feat(deploy): aibook.fun deploy layer (terraform + ansible + docker on DO)

- Cover: publisher-style belly band across the lower book cover using a
  compressed banner (2.2MB screenshot -> 60KB WebP, resized to display
  needs), cropped via a width-locked <img> + percentage offset so the
  wordmark stays legible rather than getting zoomed/cropped sideways.
  Compass + wordmark compacted into a row to make room.
- Copy: the theme woven through Field Notes, Contents, the Founding
  Sponsor tier, and one direct FAQ entry -- mostly oblique, since the
  cover already states it explicitly. Hero/Recipe/Capture/Footer left
  untouched on purpose.

.gitea/workflows/deploy.yml

@@ -0,0 +1,105 @@
+# aibook-fun — CI/CD: build the Next.js marketing site, push to reg.mini.dev,
+# pin the image ref in Infisical, then trigger a pull + bounce on the droplet.
+#
+# Runs on Gitea Actions (GitHub-compatible syntax). This repo has Actions
+# enabled; the runner must be labeled `ubuntu-latest`.
+#
+# Repository secrets required (Settings → Actions → Secrets):
+#   MINIMUS_TOKEN            reg.mini.dev registry token (u: minimus)
+#   INFISICAL_CLIENT_ID      Infisical Machine Identity Client ID
+#   INFISICAL_CLIENT_SECRET  Infisical Machine Identity Client Secret
+#   INFISICAL_PROJECT_ID     the /AIBook-Fun project ID
+#   DROPLET_IP               droplet reserved IP (or resolve via DNS)
+#   DROPLET_SSH_KEY          private SSH key for root@ on the droplet
+#
+# NOTE: first provision is NOT done here — it's terraform + ansible converge
+# (deploy/docker-compose/terraform + ansible/deploy.yml). This workflow handles
+# everything after the site exists: every main-branch push to app/deploy code
+# rebuilds and rolls forward idempotently.
+
+name: deploy
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'marketing-site/**'
+      - 'deploy/**'
+      - '.gitea/workflows/**'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: aibook-fun-deploy
+  cancel-in-progress: false
+
+env:
+  REGISTRY: reg.mini.dev
+  IMAGE_REPO: weownai/aibook-fun-marketing
+  INFISICAL_ENV: prod
+  INFISICAL_PATH: /AIBook-Fun
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Build image
+        run: |
+          docker build \
+            --pull \
+            -f deploy/docker-compose/docker/Dockerfile \
+            -t "${{ env.REGISTRY }}/${{ env.IMAGE_REPO }}:${{ github.sha }}" \
+            -t "${{ env.REGISTRY }}/${{ env.IMAGE_REPO }}:latest" \
+            marketing-site/
+
+      - name: Login to reg.mini.dev
+        run: echo "${{ secrets.MINIMUS_TOKEN }}" | docker login "${{ env.REGISTRY }}" -u minimus --password-stdin
+
+      - name: Push image
+        run: |
+          docker push "${{ env.REGISTRY }}/${{ env.IMAGE_REPO }}:${{ github.sha }}"
+          docker push "${{ env.REGISTRY }}/${{ env.IMAGE_REPO }}:latest"
+
+      - name: Pin AIBOOK_IMAGE in Infisical
+        env:
+          INFISICAL_UNIVERSAL_AUTH_CLIENT_ID: ${{ secrets.INFISICAL_CLIENT_ID }}
+          INFISICAL_UNIVERSAL_AUTH_CLIENT_SECRET: ${{ secrets.INFISICAL_CLIENT_SECRET }}
+        run: |
+          sudo curl -1sLf 'https://artifacts-cli.infisical.com/setup.deb.sh' | sudo -E bash
+          sudo DEBIAN_FRONTEND=noninteractive apt-get install -y -qq infisical >/dev/null
+          export INFISICAL_TOKEN="$(infisical login --method=universal-auth --plain --silent)"
+          infisical secrets set \
+            AIBOOK_IMAGE="${{ env.REGISTRY }}/${{ env.IMAGE_REPO }}:${{ github.sha }}" \
+            --projectId="${{ secrets.INFISICAL_PROJECT_ID }}" \
+            --env="${{ env.INFISICAL_ENV }}" \
+            --path="${{ env.INFISICAL_PATH }}"
+
+      - name: Deploy to droplet (pull + up)
+        uses: appleboy/ssh-action@v1
+        with:
+          host: ${{ secrets.DROPLET_IP }}
+          username: root
+          key: ${{ secrets.DROPLET_SSH_KEY }}
+          command_timeout: "15m"
+          script: |
+            set -euo pipefail
+            cd /opt/aibook_fun
+            # Droplet-side Infisical auth (auth file written by cloud-init).
+            source .infisical-auth.env
+            export INFISICAL_UNIVERSAL_AUTH_CLIENT_ID="$INFISICAL_CLIENT_ID"
+            export INFISICAL_UNIVERSAL_AUTH_CLIENT_SECRET="$INFISICAL_CLIENT_SECRET"
+            export INFISICAL_TOKEN="$(infisical login --method=universal-auth --plain --silent)"
+            # Re-auth reg.mini.dev if the docker login from ansible has lapsed.
+            MINIMUS_TOKEN="$(infisical secrets get MINIMUS_TOKEN --projectId="$INFISICAL_PROJECT_ID" --env=prod --path=/AIBook-Fun --plain || true)"
+            if [ -n "${MINIMUS_TOKEN:-}" ]; then
+              printf '%s' "$MINIMUS_TOKEN" | docker login reg.mini.dev -u minimus --password-stdin
+            fi
+            # AIBOOK_IMAGE is injected by `infisical run`; also export it so the
+            # ${AIBOOK_IMAGE:?} compose ref resolves even without run-injection.
+            export AIBOOK_IMAGE="$(infisical secrets get AIBOOK_IMAGE --projectId="$INFISICAL_PROJECT_ID" --env=prod --path=/AIBook-Fun --plain)"
+            infisical run --projectId="$INFISICAL_PROJECT_ID" --env=prod --path=/AIBook-Fun \
+              -- docker compose up -d --remove-orphans

deploy/.gitignore

@@ -0,0 +1,73 @@
+# aibook-fun deploy — gitignore
+# ⚠️ CRITICAL: Never commit credentials or state files
+
+# =============================================================================
+# Terraform / OpenTofu State (CRITICAL - contains infrastructure details)
+# =============================================================================
+*.tfstate
+*.tfstate.*
+*.tfstate.backup
+.terraform/
+# NOTE: .terraform.lock.hcl is NOT ignored — commit it so provider versions
+# are reproducible across machines/CI runs.
+
+# Terraform variable files with real values
+terraform.tfvars
+terraform.tfvars.json
+*.auto.tfvars
+*.auto.tfvars.json
+
+# Terraform crash logs
+crash.log
+crash.*.log
+
+# =============================================================================
+# Environment Files (CRITICAL - contains passwords)
+# =============================================================================
+.env
+.env.prod
+.env.local
+.env.*.local
+
+# =============================================================================
+# Backups (may contain sensitive data)
+# =============================================================================
+backups/
+*.tar.gz
+*.sql
+*.sql.gz
+
+# =============================================================================
+# Logs
+# =============================================================================
+logs/
+*.log
+
+# =============================================================================
+# OS & Editor
+# =============================================================================
+.DS_Store
+.DS_Store?
+._*
+Thumbs.db
+*.swp
+*.swo
+*~
+.idea/
+.vscode/
+*.code-workspace
+
+# =============================================================================
+# Docker
+# =============================================================================
+docker-compose.override.yml
+docker-compose.override.yaml
+
+# =============================================================================
+# Ansible
+# =============================================================================
+*.retry
+.vault-pass
+
+# OpenTofu saved plans (sensitive) — never commit
+*.tfplan

deploy/README.md

@@ -0,0 +1,25 @@
+# Deploy
+
+Provisions a DO droplet + reserved IP + firewall + monitoring, builds the
+Next.js image locally on the droplet, runs it behind Caddy.
+
+## Deploy from scratch
+
+```bash
+cd terraform
+infisical login
+export INFISICAL_PROJECT_ID=<aibook-fun-project-id>
+./itofu.sh init && ./itofu.sh plan && ./itofu.sh apply
+./itofu.sh output -raw droplet_ip
+
+# add Cloudflare A record: aibook.fun → <that-ip>
+
+cd ..
+ansible-playbook -i 'root@<that-ip>,' ansible/deploy.yml
+```
+
+## Structure
+
+- `terraform/` — droplet + IP + firewall + monitoring
+- `docker/` — Dockerfile + compose + Caddy
+- `ansible/` — droplet convergence

deploy/ansible.cfg

@@ -0,0 +1,33 @@
+# Ansible settings for deploying aibook-fun.
+#
+# The whole point of this file is SSH connection reuse. On a workstation whose
+# SSH key lives in a hardware-backed agent (Secretive, a YubiKey, the Secure
+# Enclave), every *new* TCP connection needs a fresh signature — which means a
+# Touch ID prompt. Ansible opens many connections per run and does so
+# non-interactively, so those prompts cannot be answered and the run dies with:
+#
+#     sign_and_send_pubkey: signing failed ... agent refused operation
+#
+# Ansible's own defaults make this worse in two ways, both fixed below:
+#
+#   1. It keeps control sockets in ~/.ansible/cp, separate from the ones the
+#      operator's own `ssh` has already authenticated. Pointing it at the same
+#      directory and the same %C naming as OpenSSH means ansible *reuses* a
+#      master connection the operator authorised earlier — no new signature.
+#   2. ControlPersist defaults to 60s, so a master closes between steps of a
+#      deploy and the next one needs another signature.
+#
+# Together: authenticate once at the start of a work session, then deploy
+# repeatedly without touching the key again.
+[defaults]
+host_key_checking = True
+interpreter_python = auto_silent
+
+[ssh_connection]
+# Match OpenSSH's own ControlPath so ansible shares the operator's masters.
+# %%C is escaped for configparser — ssh receives %C (a hash of local host,
+# remote host, port and user), exactly what ~/.ssh/config uses.
+control_path_dir = ~/.ssh/sockets
+control_path = %(directory)s/%%C
+ssh_args = -C -o ControlMaster=auto -o ControlPersist=4h
+pipelining = True

deploy/ansible/deploy.yml

@@ -0,0 +1,150 @@
+---
+# Usage: ansible-playbook -i 'root@<droplet-ip>,' deploy/ansible/deploy.yml
+# Pre: droplet cloud-init complete (.bootstrap-complete marker present)
+
+- name: Deploy aibook-fun app layer
+  hosts: all
+  gather_facts: false
+  become: true
+  vars:
+    app_dir: /opt/aibook_fun
+    repo_dir: /opt/aibook_fun/repo
+    repo_url: "https://git.weown.tools/WeOwnAI/aibook-fun.git"
+    repo_branch: main
+    image_tag: "aibook-fun-marketing:v1"
+
+  pre_tasks:
+    - name: Verify droplet has completed cloud-init bootstrap
+      ansible.builtin.stat:
+        path: "{{ app_dir }}/.bootstrap-complete"
+      register: bootstrap_marker
+
+    - name: Fail clearly if bootstrap is not complete
+      ansible.builtin.fail:
+        msg: >-
+          {{ app_dir }}/.bootstrap-complete is missing — droplet has not
+          finished cloud-init. Wait a few minutes after `tofu apply` and retry.
+          Check /var/log/cloud-init-output.log on the droplet.
+      when: not bootstrap_marker.stat.exists
+
+    - name: Ensure app dir exists
+      ansible.builtin.file:
+        path: "{{ app_dir }}"
+        state: directory
+        owner: root
+        group: root
+        mode: "0755"
+
+  tasks:
+    # ─── Clone / update repo on droplet ────────────────────────────────────
+    - name: Clone (or update) aibook-fun repo on droplet
+      ansible.builtin.git:
+        repo: "{{ repo_url }}"
+        dest: "{{ repo_dir }}"
+        version: "{{ repo_branch }}"
+        force: true
+      register: git_clone
+      notify: Rebuild image
+
+    # ─── Upload Dockerfile (deploy/ scaffold not yet pushed to git.weown.tools) ─
+    - name: Upload Dockerfile to droplet
+      ansible.builtin.copy:
+        src: ../docker/Dockerfile
+        dest: "{{ app_dir }}/Dockerfile"
+        owner: root
+        group: root
+        mode: "0644"
+
+    # ─── Build docker image locally on droplet (unconditional — docker layer cache handles no-ops) ─
+    - name: Build Next.js docker image locally
+      ansible.builtin.shell: |
+        set -euo pipefail
+        docker build -t {{ image_tag }} -f {{ app_dir }}/Dockerfile {{ repo_dir }}/marketing-site/
+      args:
+        executable: /bin/bash
+      register: image_build
+      changed_when: "'writing image' in image_build.stderr"
+      notify: Reconcile docker compose stack
+
+    # ─── Upload compose + Caddyfile ────────────────────────────────────────
+    - name: Upload compose.yaml
+      ansible.builtin.copy:
+        src: ../docker/compose.prod.yaml
+        dest: "{{ app_dir }}/compose.yaml"
+        owner: root
+        group: root
+        mode: "0644"
+      notify: Reconcile docker compose stack
+
+    - name: Upload Caddyfile
+      ansible.builtin.copy:
+        src: ../docker/Caddyfile
+        dest: "{{ app_dir }}/Caddyfile"
+        owner: root
+        group: root
+        mode: "0644"
+      notify: Reconcile docker compose stack
+
+    - name: Ensure caddy log dir is writable
+      ansible.builtin.file:
+        path: /var/log/caddy
+        state: directory
+        owner: root
+        group: root
+        mode: "0777"
+
+    - name: Ensure Caddy Docker volumes are writable (caddy runs as UID 1000)
+      ansible.builtin.shell: |
+        set -euo pipefail
+        for suffix in caddy_data caddy_config; do
+          path="/var/lib/docker/volumes/aibook_fun_${suffix}/_data"
+          if [ -d "$path" ]; then
+            chown -R 1000:1000 "$path"
+          fi
+        done
+      args:
+        executable: /bin/bash
+      changed_when: false
+
+    # ─── Ensure compose stack is running (idempotent) ──────────────────────
+    - name: Ensure compose stack is running (idempotent — `up -d` no-op if unchanged)
+      ansible.builtin.shell: |
+        set -euo pipefail
+        cd {{ app_dir }}
+        docker compose up -d --remove-orphans
+      args:
+        executable: /bin/bash
+      register: compose_up
+      changed_when: "'Started' in compose_up.stderr or 'Created' in compose_up.stderr or 'Recreated' in compose_up.stderr"
+
+    - name: Wait for web app to respond
+      ansible.builtin.uri:
+        url: http://127.0.0.1:3000/
+        status_code: [200]
+      register: health_probe
+      retries: 20
+      delay: 5
+      until: health_probe.status == 200
+
+    - name: Report success
+      ansible.builtin.debug:
+        msg: "aibook-fun app layer deployed. URL: https://aibook.fun"
+
+  handlers:
+    - name: Rebuild image
+      ansible.builtin.shell: |
+        set -euo pipefail
+        cd {{ repo_dir }}
+        docker build -t {{ image_tag }} -f {{ repo_dir }}/deploy/docker/Dockerfile {{ repo_dir }}/marketing-site/
+      args:
+        executable: /bin/bash
+      changed_when: false
+
+    - name: Reconcile docker compose stack
+      ansible.builtin.shell: |
+        set -euo pipefail
+        cd {{ app_dir }}
+        docker compose up -d --force-recreate --remove-orphans
+      args:
+        executable: /bin/bash
+      changed_when: false

deploy/ansible/harden.yml

@@ -0,0 +1,76 @@
+# aibook-fun — host hardening (CIS-aligned, Phase A)
+#
+# Applies the DevSec hardening baseline (≈ CIS Ubuntu L1) to the droplet:
+# kernel/sysctl, auth policy, filesystem perms, SSH crypto + policy — then
+# measures the result with Lynis. Idempotent; run any time after bootstrap:
+#
+#   ansible-galaxy collection install -r ansible/requirements.yml   # once
+#   ansible-playbook ansible/harden.yml -i 'root@<droplet-ip>,'
+#
+# PHASE A vs PHASE B (deliberate scope — do not "fix" this into Phase B):
+#   Phase A (this play): CIS L1 OS + SSH hardening with root login KEPT
+#     (key-only). Every fleet tool (deploy.sh, backup.sh, manage-droplets.sh)
+#     SSHes as root@; removing root here would break the fleet mid-flight.
+#   Phase B (tracked, pre-first-customer): ops-user model (root SSH off,
+#     password-sudo 2FA), mesh/CIDR-locked port 22 — per SOP-INFRA-012. Needs
+#     the fleet tooling migrated off root@ first.
+#
+# Docker-safe exceptions (the CIS-L2-vs-container-runtime conflicts):
+#   - net.ipv4.ip_forward stays 1 — Docker bridge networking requires it. A
+#     defaults-level override silently LOSES to the inner role's defaults;
+#     it must be a task-var on the include (hit live 2026-07-03: containers
+#     got DNS but no TCP egress when this landed at 0).
+---
+- name: Harden aibook-fun host (CIS L1 via devsec — Phase A)
+  hosts: all
+  become: true
+  vars:
+    run_lynis: true
+
+  tasks:
+    - name: "OS hardening (devsec.hardening.os_hardening ≈ CIS Ubuntu L1)"
+      ansible.builtin.include_role:
+        name: devsec.hardening.os_hardening
+      vars:
+        # MUST be task-vars here (see header) — Docker bridge needs ip_forward.
+        sysctl_overwrite:
+          net.ipv4.ip_forward: 1
+
+    - name: "SSH hardening (devsec.hardening.ssh_hardening — key-only, strong KEX/ciphers)"
+      ansible.builtin.include_role:
+        name: devsec.hardening.ssh_hardening
+      vars:
+        # Phase A: root stays (fleet tooling), but key-only and CIS crypto.
+        ssh_permit_root_login: "without-password"
+        ssh_password_authentication: false
+        ssh_challenge_response_authentication: false
+
+    - name: "Measure: install + run Lynis (hardening index; non-blocking)"
+      when: run_lynis | bool
+      block:
+        - name: "Install Lynis"
+          ansible.builtin.apt:
+            name: lynis
+            state: present
+            update_cache: true
+
+        - name: "Run Lynis audit (quick)"
+          ansible.builtin.command: lynis audit system --quick --no-colors
+          register: lynis_out
+          changed_when: false
+          failed_when: false
+
+        - name: "Lynis summary (record this index in the site CHANGELOG)"
+          ansible.builtin.debug:
+            msg: "{{ lynis_out.stdout_lines | select('search', 'Hardening index|Warnings|Suggestions|Tests performed') | list }}"
+
+    - name: "Verify Docker survived hardening (containers must still run)"
+      # brace-free format string: Go-template braces here would be re-templated
+      # by ansible's own Jinja pass and error out.
+      ansible.builtin.command: docker info --format json
+      register: docker_ok
+      changed_when: false
+
+    - name: "Docker status"
+      ansible.builtin.debug:
+        msg: "Docker OK (server {{ (docker_ok.stdout | from_json).ServerVersion | default('unknown') }}) — hardening did not break the runtime"

deploy/ansible/requirements.yml

@@ -0,0 +1,8 @@
+# Ansible Galaxy requirements for the optional hardening play (harden.yml).
+# Install once per operator workstation:
+#   ansible-galaxy collection install -r ansible/requirements.yml
+collections:
+  # DevSec Hardening Framework — CIS/STIG-aligned os_hardening + ssh_hardening.
+  # https://github.com/dev-sec/ansible-collection-hardening
+  - name: devsec.hardening
+    version: ">=8.8.0"

deploy/docker/Caddyfile

@@ -0,0 +1,23 @@
+
+aibook.fun {
+
+    # AIBook.fun is a static marketing site — pure reverse proxy to the Next.js
+    # standalone server. No auth/headers added here beyond baseline security.
+    reverse_proxy web:3000
+
+    log {
+        # Host-bind-mounted /var/log/caddy/ so logs survive container recreation.
+        output file /var/log/caddy/aibook-fun.log
+    }
+
+    header {
+        # Force HTTPS for a year (HSTS — a lapsed cert is a service outage, not a
+        # warning; weown rail per W24 phase4 findings).
+        Strict-Transport-Security "max-age=31536000; includeSubDomains"
+        X-Content-Type-Options nosniff
+        X-Frame-Options SAMEORIGIN
+        X-XSS-Protection "1; mode=block"
+        Referrer-Policy strict-origin-when-cross-origin
+        -Server
+    }
+}

deploy/docker/Dockerfile

@@ -0,0 +1,41 @@
+# syntax=docker/dockerfile:1
+# aibook-fun — Next.js 16 marketing site (marketing-site/), standalone output.
+#
+# Build context = marketing-site/ (see .gitea/workflows/deploy.yml):
+#   docker build -f deploy/docker/Dockerfile -t <image> marketing-site/
+#
+# Multi-stage: deps → build (next build → .next/standalone) → slim non-root runner.
+# Requires `output: 'standalone'` in next.config.mjs (added on this branch).
+# Node 20.9+ / 22+ required by Next 16; pin 22 LTS.
+
+FROM node:22-alpine AS deps
+WORKDIR /app
+# Lockfiles first for layer caching.
+COPY package.json package-lock.json ./
+RUN npm ci
+
+FROM node:22-alpine AS builder
+WORKDIR /app
+ENV NEXT_TELEMETRY_DISABLED=1
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM node:22-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+# Next standalone ships as a single node server.js; run as non-root (uid 1001).
+RUN addgroup --system --gid 1001 nodejs \
+ && adduser --system --uid 1001 --ingroup nodejs nextjs
+
+# Static assets not bundled into the standalone output.
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+CMD ["node", "server.js"]

deploy/docker/compose.prod.yaml

@@ -0,0 +1,59 @@
+services:
+  web:
+    image: aibook-fun-marketing:v1
+    pull_policy: never
+    restart: unless-stopped
+    ports:
+      # Loopback-only: lets caddy proxy and health probes reach the app.
+      # Not internet-exposed; caddy handles :80/:443 → web:3000.
+      - "127.0.0.1:3000:3000"
+    networks:
+      - aibooknet
+    healthcheck:
+      test: ["CMD-SHELL", "curl -f -o /dev/null -w '%{http_code}' http://localhost:3000/ | grep -q '^200$' || exit 1"]
+      start_period: 30s
+      interval: 30s
+      timeout: 10s
+      retries: 5
+    deploy:
+      resources:
+        limits:
+          memory: 512M
+        reservations:
+          memory: 128M
+
+  caddy:
+    image: caddy:2
+    restart: unless-stopped
+    depends_on:
+      - web
+    environment:
+      DOMAIN: aibook.fun
+    ports:
+      - "80:80"
+      - "443:443"
+      - "443:443/udp"
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile:ro
+      - caddy_data:/data
+      - caddy_config:/config
+      - /var/log/caddy:/var/log/caddy
+    networks:
+      - aibooknet
+    deploy:
+      resources:
+        limits:
+          memory: 256M
+        reservations:
+          memory: 128M
+
+volumes:
+  caddy_data:
+    name: aibook_fun_caddy_data
+  caddy_config:
+    name: aibook_fun_caddy_config
+
+networks:
+  aibooknet:
+    name: aibook_fun_net
+    driver: bridge

deploy/terraform/.terraform.lock.hcl

@@ -0,0 +1,41 @@
+# This file is maintained automatically by "tofu init".
+# Manual edits may be lost in future updates.
+
+provider "registry.opentofu.org/digitalocean/digitalocean" {
+  version     = "2.100.0"
+  constraints = "~> 2.36"
+  hashes = [
+    "h1:+1p5n5KeGjz/ulw/ZLXoaBkF+2UTgKqWqERw1nA2sJQ=",
+    "h1:79G5uDt1VHL6gWtSnK8lCOHZpo/jp/kSGA7FXtqQvX4=",
+    "h1:7r9AZrpc8pB6PRsJfmxSGLzIRmohmfpX6RrnA1FLbh4=",
+    "h1:9VsRnY7rmGiMFVG4ix3ry2fx8B8d7l9PyEpmGjjiW3I=",
+    "h1:LchVh6xhpXw1PEnl2mRnsLlR4dzLePw8M2vw4DuPk9U=",
+    "h1:OmnMLcKMFnZLI1CvTgQBod0awOpuVxsfB8dqBejfwE8=",
+    "h1:Q9BxzK1Tp8YeuCUXVogVfqTsVCrWUUJJdvpL7UA0W/s=",
+    "h1:R13HFu3vyxrd4aHyh/+p2YY0vWpPAFjafBRYVuIL5HE=",
+    "h1:RJH5t57bLx1b2+l+gS6RRHyakhEQjSKL/QYu6npCtbI=",
+    "h1:WQ2ClvMwBILHDzWWhAm3LBRra4HkSe9taUlUGSLBNWI=",
+    "h1:WbQfCVfC+GU0qPSoZKuoEllr3cMqwTC1Fx5DfbUjy/o=",
+    "h1:iwjK8zLBTHWHICCP/O+QFcyxH16bV4gKPFUbmu2foqc=",
+    "h1:pTFXceDc5intkLpVFVW3PKfwkF1CvmnWi3vYcF6SAQs=",
+    "h1:pc1iMmHPQA37PCkVWTRzuO/WgaoSGYtSBVP5paO6nK4=",
+    "h1:uDVCzJGtpV2DqyPWoYWjQpbEV48PxS6/U7/uiGfDDsU=",
+    "h1:yyBAhHZmejmdvjuvsF2gAwIZebqOmisQIT5dOQqQx9A=",
+    "zh:021dbdacf7dd636cb66990964737bc4a6402160b5301e06b6fdab03a814f7e96",
+    "zh:083ff822b22738eedc9eae29aa5d4c369b2de921e49fefa9858a4e7c6274b0c1",
+    "zh:10695b5f7dbbe8ba1a20ac6bea1ab8613b43d2b1f6f9b53369bed296b2dff4d2",
+    "zh:110124b9d07cd1f0f2831ad27dfeb5a010a070952ea9a9e675ca3cfe158a0ffa",
+    "zh:409a8b22ffb9a53caf57d0a16f5f8ac0a2fcd61b6b0bcd512a685ea26cd06047",
+    "zh:488e4b494c198c0696c85d2c73c66c40567ca2ad5230bbd95d8ffdead86e646d",
+    "zh:4dd5b6e8c1be5fb619812fe738d0b49e0d24731fb290c0ab5190b7bc60c70e66",
+    "zh:6717fa7f623ad4c9b4d99acceffd1372d272ff02d7c98259dd17ec7ef11b836c",
+    "zh:7a25445caebd2e7f6ab2381578ecaf31744159a7e4a16476f19112d2e50d8519",
+    "zh:86b3d7050ba04ec7e0a14dbee8c0540fca8f4377fb072f87c88a6fcd26388714",
+    "zh:c23f30a38930c283055b6f04acbcad06cb0dd3c71c172eb23bb239f50dd12823",
+    "zh:d1f9c5be7f7d5c71830357bdd9c0fb529185e9380092e1b792f969495c943790",
+    "zh:d222573e7de8f9ad1c5b87a6c44c2dc59947c3968b3e70b7d4c76263d6c8fe5c",
+    "zh:e1f2d606661435416c4d2b48db80244d0acef88a5ce81b5dcbd65ff2642b1b4d",
+    "zh:ea13fad19414586864557601c59e85188601e150c815ec1e71f8ed83f1942a50",
+    "zh:f795be71dc933aaec7145f93068da17f227783964d33a79de591a042aac7c3ca",
+  ]
+}

deploy/terraform/backend.tf

@@ -0,0 +1,25 @@
+# aibook-fun - Terraform Backend Configuration
+# State stored in DigitalOcean Spaces (S3-compatible) for team sharing, SSE-C
+# encrypted at rest.
+#
+# Pass credentials via itofu.sh (preferred) or -backend-config flags:
+#   access_key / secret_key / sse_customer_key
+# Backend config cannot reference Terraform variables — itofu.sh forwards them.
+
+terraform {
+  backend "s3" {
+    endpoint = "https://atl1.digitaloceanspaces.com"
+    bucket   = "weown-tools-state"
+    key      = "aibook-fun/aibook-fun.tfstate"
+    region   = "us-east-1"
+    encrypt  = true
+    acl      = "private"
+
+    # Required for DO Spaces (S3-compatible but not AWS)
+    skip_credentials_validation = true
+    skip_metadata_api_check     = true
+    skip_requesting_account_id  = true
+    skip_region_validation      = true
+    skip_s3_checksum            = true
+  }
+}

deploy/terraform/itofu.sh

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+# Run OpenTofu with TF_VAR_* creds injected from Infisical /tofu/.
+# Usage: infisical login && INFISICAL_PROJECT_ID=<id> ./itofu.sh <init|plan|apply|...>
+set -euo pipefail
+
+INFISICAL_PROJECT_ID="${INFISICAL_PROJECT_ID:-}"
+INFISICAL_ENV="${INFISICAL_ENV:-prod}"
+TOFU_PATH="/tofu"
+PLAN_FILE="${WEOWN_TOFU_PLAN:-plan.tfplan}"
+
+: "${INFISICAL_PROJECT_ID:?INFISICAL_PROJECT_ID not set. Export it (e.g. from site.conf) before running itofu.sh.}"
+
+command -v infisical >/dev/null 2>&1 || { echo "ERROR: infisical CLI not found." >&2; exit 1; }
+command -v tofu      >/dev/null 2>&1 || { echo "ERROR: tofu not found." >&2; exit 1; }
+infisical export --projectId="$INFISICAL_PROJECT_ID" --env="$INFISICAL_ENV" --path="$TOFU_PATH" >/dev/null 2>&1 || {
+  echo "ERROR: cannot read $INFISICAL_PROJECT_ID $INFISICAL_ENV $TOFU_PATH — run 'infisical login' and check your access." >&2; exit 1; }
+[ "$#" -ge 1 ] || { echo "usage: ./itofu.sh <init|plan|apply|output|destroy|...> [args]" >&2; exit 1; }
+
+irun() { infisical run --projectId="$INFISICAL_PROJECT_ID" --env="$INFISICAL_ENV" --path="$TOFU_PATH" -- "$@"; }
+
+# S3 backend reads AWS_* env on every state op — so ALL tofu calls go through trun.
+# shellcheck disable=SC2016
+trun() { irun bash -c 'export AWS_ACCESS_KEY_ID="$TF_VAR_spaces_access_key" AWS_SECRET_ACCESS_KEY="$TF_VAR_spaces_secret_key"; exec tofu "$@"' itofu "$@"; }
+
+case "$1" in
+  init)
+    shift
+    # shellcheck disable=SC2016
+    irun bash -c 'export AWS_ACCESS_KEY_ID="$TF_VAR_spaces_access_key" AWS_SECRET_ACCESS_KEY="$TF_VAR_spaces_secret_key"; exec tofu init -reconfigure \
+      -backend-config="sse_customer_key=$TF_VAR_spaces_encryption_key" "$@"' itofu "$@"
+    ;;
+  plan)
+    shift
+    trun plan -out="$PLAN_FILE" "$@"
+    ;;
+  apply)
+    shift
+    if [ "$#" -eq 0 ] && [ -f "$PLAN_FILE" ]; then
+      set +e; trun apply "$PLAN_FILE"; rc=$?; set -e
+      rm -f "$PLAN_FILE"
+      exit "$rc"
+    fi
+    trun apply "$@"
+    ;;
+  *)
+    trun "$@"
+    ;;
+esac

deploy/terraform/main.tf

@@ -0,0 +1,113 @@
+# aibook-fun - Main Infrastructure
+# Managed by OpenTofu
+
+resource "digitalocean_droplet" "web" {
+  name       = "aibook-fun"
+  image      = var.droplet_image
+  size       = var.droplet_size
+  region     = var.region
+  monitoring = true
+  backups    = true
+
+  # CPU/RAM-only resize (provider default is true = also grow the disk).
+  resize_disk = false
+
+  ssh_keys = var.ssh_key_fingerprints
+
+  user_data = templatefile("${path.module}/templates/cloud-init.yaml", {
+    project_name = "aibook_fun"
+  })
+
+  tags = ["aibook-fun", "web", "weown-ai"]
+
+  lifecycle {
+    # A droplet destroy means losing every Docker volume + cert state on it.
+    # make any such plan a hard error instead of an accident.
+    prevent_destroy = true
+    # user_data/tags/ssh_keys are create-time-only on DO; ignore drift so
+    # unrelated changes don't arm `# forces replacement` on next apply.
+    ignore_changes = [user_data, tags, ssh_keys]
+  }
+}
+
+# Optional encrypted-at-rest data volume (default 0 = stateless: droplet local
+# disk only). Enable by setting data_volume_size_gb > 0 if the site ever needs
+# durable state; DO block storage is encrypted at rest, the droplet disk is not.
+resource "digitalocean_volume" "data" {
+  count                   = var.data_volume_size_gb > 0 ? 1 : 0
+  region                  = var.region
+  name                    = "aibook-fun-data"
+  size                    = var.data_volume_size_gb
+  initial_filesystem_type = "ext4"
+  description             = "aibook-fun encrypted-at-rest data (docker data-root)"
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "digitalocean_volume_attachment" "data" {
+  count      = var.data_volume_size_gb > 0 ? 1 : 0
+  droplet_id = digitalocean_droplet.web.id
+  volume_id  = digitalocean_volume.data[0].id
+}
+
+resource "digitalocean_reserved_ip" "web" {
+  region = var.region
+}
+
+resource "digitalocean_reserved_ip_assignment" "web" {
+  ip_address = digitalocean_reserved_ip.web.ip_address
+  droplet_id = digitalocean_droplet.web.id
+}
+
+#trivy:ignore:AVD-DIG-0001  # Public web server: HTTP/HTTPS inbound from internet is required by design
+#trivy:ignore:AVD-DIG-0003  # Public web server: unrestricted outbound required for package installs, ACME, image pulls
+resource "digitalocean_firewall" "web" {
+  name        = "aibook-fun-fw"
+  droplet_ids = [digitalocean_droplet.web.id]
+
+  # SSH — restrict via var.ssh_source_cidrs. ⚠️ PRODUCTION: pin to admin IP/32 or VPN
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "22"
+    source_addresses = var.ssh_source_cidrs
+  }
+
+  # HTTP (ACME challenge + redirect)
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "80"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # HTTPS
+  inbound_rule {
+    protocol         = "tcp"
+    port_range       = "443"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # HTTPS/QUIC (HTTP/3)
+  inbound_rule {
+    protocol         = "udp"
+    port_range       = "443"
+    source_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # All outbound TCP (apt, ACME, container image pulls)
+  outbound_rule {
+    protocol              = "tcp"
+    port_range            = "1-65535"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  # All outbound UDP (DNS, NTP, QUIC)
+  outbound_rule {
+    protocol              = "udp"
+    port_range            = "1-65535"
+    destination_addresses = ["0.0.0.0/0", "::/0"]
+  }
+
+  tags = ["aibook-fun"]
+}

deploy/terraform/monitoring.tf

@@ -0,0 +1,44 @@
+# aibook-fun - Monitoring Configuration
+# Managed by OpenTofu
+
+resource "digitalocean_monitor_alert" "cpu" {
+  count = var.enable_monitoring ? 1 : 0
+  alerts {
+    email = [var.alert_email]
+  }
+  window      = "5m"
+  type        = "v1/insights/droplet/cpu"
+  compare     = "GreaterThan"
+  value       = var.cpu_alert_threshold
+  enabled     = true
+  entities    = [digitalocean_droplet.web.id]
+  description = "aibook-fun: CPU usage above ${var.cpu_alert_threshold}% for 5 min"
+}
+
+resource "digitalocean_monitor_alert" "memory" {
+  count = var.enable_monitoring ? 1 : 0
+  alerts {
+    email = [var.alert_email]
+  }
+  window      = "5m"
+  type        = "v1/insights/droplet/memory_utilization_percent"
+  compare     = "GreaterThan"
+  value       = var.memory_alert_threshold
+  enabled     = true
+  entities    = [digitalocean_droplet.web.id]
+  description = "aibook-fun: Memory usage above ${var.memory_alert_threshold}% for 5 min"
+}
+
+resource "digitalocean_monitor_alert" "disk" {
+  count = var.enable_monitoring ? 1 : 0
+  alerts {
+    email = [var.alert_email]
+  }
+  window      = "5m"
+  type        = "v1/insights/droplet/disk_utilization_percent"
+  compare     = "GreaterThan"
+  value       = var.disk_alert_threshold
+  enabled     = true
+  entities    = [digitalocean_droplet.web.id]
+  description = "aibook-fun: Disk usage above ${var.disk_alert_threshold}% for 5 min"
+}

deploy/terraform/outputs.tf

@@ -0,0 +1,28 @@
+# aibook-fun - Terraform Outputs
+# Managed by OpenTofu
+
+output "droplet_ip" {
+  description = "Droplet IPv4 address (reserved IP)"
+  value       = digitalocean_reserved_ip.web.ip_address
+}
+
+output "reserved_ip" {
+  description = "Reserved IP address (alias for droplet_ip; stable across rebuilds)"
+  value       = digitalocean_reserved_ip.web.ip_address
+}
+
+output "droplet_id" {
+  description = "Droplet ID"
+  value       = digitalocean_droplet.web.id
+}
+
+output "domain" {
+  description = "Primary domain"
+  value       = var.domain
+}
+
+output "site_url" {
+  description = "Site URL"
+  value       = "https://${var.domain}"
+}
+

deploy/terraform/templates/cloud-init.yaml

@@ -0,0 +1,85 @@
+#cloud-config
+# First-boot bootstrap: base packages + Docker + git. App layer via ansible.
+
+package_update: true
+packages:
+  - apt-transport-https
+  - ca-certificates
+  - curl
+  - gnupg
+  - lsb-release
+  - jq
+  - unzip
+  - git
+
+write_files:
+  # Docker installation
+  - path: /tmp/install-docker.sh
+    permissions: "0755"
+    content: |
+      #!/bin/bash
+      set -euo pipefail
+      curl -fsSL https://get.docker.com -o /tmp/get-docker.sh
+      sh /tmp/get-docker.sh
+      systemctl enable docker
+      systemctl start docker
+      usermod -aG docker ubuntu
+
+  # Docker daemon config (log rotation)
+  - path: /etc/docker/daemon.json
+    content: |
+      {
+        "log-driver": "json-file",
+        "log-opts": {
+          "max-size": "10m",
+          "max-file": "3"
+        },
+        "storage-driver": "overlay2"
+      }
+
+  # Encrypted-at-rest data volume setup (runs BEFORE Docker is installed).
+  # Graceful no-op when no volume is attached (data_volume_size_gb = 0 default
+  # for aibook-fun stateless marketing site).
+  - path: /tmp/setup-data-volume.sh
+    permissions: "0755"
+    content: |
+      #!/bin/bash
+      set -euo pipefail
+      DEV="/dev/disk/by-id/scsi-0DO_Volume_aibook-fun-data"
+      MNT="/mnt/${project_name}_data"
+      for i in $(seq 1 24); do
+        [ -e "$DEV" ] && break
+        sleep 5
+      done
+      if [ ! -e "$DEV" ]; then
+        echo "no data volume attached after 120s - using droplet local disk (stateless mode)"
+        exit 0
+      fi
+      blkid "$DEV" >/dev/null 2>&1 || mkfs.ext4 -q "$DEV"
+      mkdir -p "$MNT"
+      grep -q "scsi-0DO_Volume_aibook-fun-data" /etc/fstab || \
+        echo "$DEV $MNT ext4 defaults,noatime,nofail,discard 0 2" >> /etc/fstab
+      mountpoint -q "$MNT" || mount "$MNT"
+      mkdir -p "$MNT/docker"
+      jq --arg dr "$MNT/docker" '. + {"data-root": $dr}' /etc/docker/daemon.json > /tmp/daemon.json.new
+      mv /tmp/daemon.json.new /etc/docker/daemon.json
+      mkdir -p /opt/${project_name}
+      echo "data volume mounted at $MNT (docker data-root relocated)"
+
+runcmd:
+  # Data volume setup only when a block volume is attached
+  - 'bash -c "[ -e /dev/disk/by-id/scsi-0DO_Volume_aibook-fun-data ] && bash /tmp/setup-data-volume.sh || echo no-data-volume"'
+  - [bash, /tmp/install-docker.sh]
+  - [systemctl, restart, docker]
+  # Ensure the app dir exists for ansible to land the compose + Caddyfile
+  - [mkdir, -p, /opt/${project_name}]
+  # Marker so ansible/deploy.yml can confirm the host is ready
+  - [touch, /opt/${project_name}/.bootstrap-complete]
+  # Enable automatic security updates
+  - dpkg-reconfigure -plow unattended-upgrades
+
+final_message: |
+  aibook-fun bootstrap complete. Next step from the operator workstation:
+    ansible-playbook aibook-fun/ansible/deploy.yml -i 'root@<this-droplet-ip>,'
+  Ansible will clone the repo, build the Docker image locally on this droplet,
+  and bring up the compose stack. Site served at https://aibook.fun.

deploy/terraform/terraform.tfvars.example

@@ -0,0 +1,27 @@
+# ⚠️  NEVER commit terraform.tfvars with real values. Use ./itofu.sh instead —
+# it reads TF_VAR_* straight from Infisical /tofu/.
+
+do_token = "<YOUR_DIGITALOCEAN_TOKEN>"
+
+ssh_key_fingerprints = ["<YOUR_SSH_KEY_FINGERPRINT>"]
+
+# pin to admin IP/32 or VPN range for prod
+ssh_source_cidrs = ["0.0.0.0/0", "::/0"]
+
+spaces_access_key     = "<YOUR_SPACES_ACCESS_KEY>"
+spaces_secret_key     = "<YOUR_SPACES_SECRET_KEY>"
+spaces_encryption_key = "<YOUR_SSE_C_KEY_BASE64>"
+
+domain        = "aibook.fun"
+region        = "atl1"
+droplet_size  = "s-2vcpu-4gb-amd"
+droplet_image = "ubuntu-24-04-x64"
+
+data_volume_size_gb = 0
+
+enable_monitoring = true
+# MUST be verified on the DO account
+alert_email            = "PLT@weown.net"
+cpu_alert_threshold    = 80
+memory_alert_threshold = 90
+disk_alert_threshold   = 85

deploy/terraform/variables.tf

@@ -0,0 +1,82 @@
+variable "domain" {
+  type    = string
+  default = "aibook.fun"
+}
+
+variable "region" {
+  type    = string
+  default = "atl1"
+}
+
+variable "droplet_size" {
+  type    = string
+  default = "s-2vcpu-4gb-amd"
+}
+
+variable "droplet_image" {
+  type    = string
+  default = "ubuntu-24-04-x64"
+}
+
+variable "ssh_key_fingerprints" {
+  type = list(string)
+}
+
+variable "ssh_source_cidrs" {
+  description = "CIDR list allowed to reach port 22 — pin to admin IP/32 or VPN range for prod"
+  type        = list(string)
+  default     = ["0.0.0.0/0", "::/0"]
+}
+
+variable "do_token" {
+  type      = string
+  sensitive = true
+}
+
+variable "spaces_access_key" {
+  type      = string
+  sensitive = true
+}
+
+variable "spaces_secret_key" {
+  type      = string
+  sensitive = true
+}
+
+variable "spaces_encryption_key" {
+  description = "DO Spaces SSE-C encryption key (32-byte AES-256, base64)"
+  type        = string
+  sensitive   = true
+}
+
+variable "data_volume_size_gb" {
+  description = "0 = stateless (droplet local disk); >0 attaches encrypted DO block volume for Docker data-root"
+  type        = number
+  default     = 0
+}
+
+variable "enable_monitoring" {
+  type    = bool
+  default = true
+}
+
+variable "alert_email" {
+  description = "Email for monitoring alerts — MUST be verified on the DO account"
+  type        = string
+  default     = "PLT@weown.net"
+}
+
+variable "cpu_alert_threshold" {
+  type    = number
+  default = 80
+}
+
+variable "memory_alert_threshold" {
+  type    = number
+  default = 90
+}
+
+variable "disk_alert_threshold" {
+  type    = number
+  default = 85
+}

deploy/terraform/versions.tf

@@ -0,0 +1,17 @@
+# aibook-fun - OpenTofu Version Constraints
+# Managed by OpenTofu
+
+terraform {
+  required_version = ">= 1.7.0"
+
+  required_providers {
+    digitalocean = {
+      source  = "digitalocean/digitalocean"
+      version = "~> 2.36"
+    }
+  }
+}
+
+provider "digitalocean" {
+  token = var.do_token
+}

marketing-site/.gitignore

@@ -0,0 +1,35 @@
+# dependencies
+/node_modules
+
+# next.js build output
+/.next/
+/out/
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Next.js auto-generated agent rule files (agentRules)
+AGENTS.md
+CLAUDE.md
+
+# scratch / superseded single-file previews
+preview.html
+redesign-preview.html
+node_modules/

marketing-site/README.md

@@ -0,0 +1,35 @@
+# AIBook.fun Marketing Site
+
+Scaffolded for Framer import and Next.js (Cloudflare Pages / DigitalOcean).
+
+## Stack
+- React 18 + JSX
+- Tailwind CSS (v4 with @import)
+- shadcn/ui-ready component structure
+- SendGrid (email) + Twilio (optional SMS)
+- Hosting: Cloudflare Pages / DigitalOcean
+
+## Framer Compatibility
+These components are standard React + Tailwind. To use in Framer:
+1. Copy any `.jsx` component file.
+2. In Framer, add a new Code Component and paste the file contents.
+3. Ensure your Framer project has Tailwind CSS configured in settings if classes don't render.
+4. Import `globals.css` or copy Tailwind directives into Framer's CSS settings.
+
+Note: Framer Sites don't run Next.js natively. For a live site with routing (A/B tests, CMS integrations, analytics events), deploy via Next.js on Cloudflare Pages.
+
+## Pages scaffolded
+- `pages/index.jsx` — landing (hero, the book, workflows, tiers, FAQ)
+- `components/Header.jsx`
+- `components/Hero.jsx`
+- `components/Workflows.jsx`
+- `components/Tiers.jsx`
+- `components/FAQ.jsx`
+- `components/Footer.jsx`
+
+## Key design references (from PRD / Spec)
+- Utility-first pitch: "run a workflow today" (A/B test hook ready)
+- 6 verticals listed in Workflows
+- 3 sample tiers shown ($10 / $47yr / $4,888)
+- No NFT/crypto/Web3 language (Kickstarter compliance scrubbed)
+- Event tracking only (not content) — PostHog/Cloudflare Analytics slot available

marketing-site/components/Authors.jsx

@@ -0,0 +1,41 @@
+const AUTHORS = [
+  { tile: "RE", name: "Real Estate & Finance", role: "Market briefs, compliant summaries", status: "confirmed", label: "Co-author confirmed" },
+  { tile: "CS", name: "Fractional C-Suite", role: "Strategy & board workflows", status: "confirmed", label: "Co-author confirmed" },
+  { tile: "TE", name: "Technology & RAAI", role: "Agent patterns & safe defaults", status: "confirmed", label: "Co-author confirmed" },
+  { tile: "HE", name: "Higher Education", role: "Teaching & research integrity", status: "tba", label: "To be announced" },
+  { tile: "CO", name: "Communities", role: "Moderation & member programs", status: "tba", label: "To be announced" },
+];
+
+export default function Authors() {
+  return (
+    <section className="section authors" id="authors">
+      <div className="wrap">
+        <span className="spec reveal">Who’s writing this</span>
+        <h2 className="reveal">Practitioners, one per vertical.</h2>
+        <p className="lede reveal">
+          Each chapter is owned by someone who does the work — not a generalist writing about
+          it. Names are announced as co-authors confirm.
+        </p>
+        <div className="auth-grid">
+          {AUTHORS.map((a) => (
+            <div className="auth reveal" key={a.tile}>
+              <div className="mono-tile">{a.tile}</div>
+              <h3>{a.name}</h3>
+              <div className="role">{a.role}</div>
+              <div className={`status ${a.status}`}>
+                <i></i>
+                {a.label}
+              </div>
+            </div>
+          ))}
+          <div className="auth auth-join reveal">
+            <div>
+              <div className="spec" style={{ marginBottom: "8px" }}>Your name?</div>
+              <p>Contribute a workflow after launch and earn a byline in the guide.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

marketing-site/components/Book3D.jsx

@@ -0,0 +1,42 @@
+/**
+ * Pure-CSS 3D book styled as the field guide. Decorative, so aria-hidden.
+ * Faces (cover / spine / fore-edge / top / back) are assembled with
+ * transform-style: preserve-3d; see `.book3d` in globals.css.
+ */
+export default function Book3D() {
+  return (
+    <div className="book3d" aria-hidden="true">
+      <div className="book3d__inner">
+        <div className="book3d__face book3d__back" />
+        <div className="book3d__face book3d__pages" />
+        <div className="book3d__face book3d__top" />
+        <div className="book3d__face book3d__spine">
+          <span>AIBook.fun · Responsible Agentic AI</span>
+        </div>
+        <div className="book3d__face book3d__cover">
+          <span className="book3d__kicker">The Field Guide</span>
+          <h3 className="book3d__title">
+            Responsible
+            <br />
+            Agentic AI
+          </h3>
+          <span className="book3d__line" />
+          <span className="book3d__sub">Tested workflows you can actually run</span>
+          <div className="book3d__foot">
+            <svg className="book3d__mark" viewBox="0 0 40 40" fill="none">
+              <circle cx="20" cy="20" r="17.5" stroke="#efe9db" strokeWidth="1" opacity="0.7" />
+              <path d="M20 5 L22.6 20 L20 35 L17.4 20 Z" fill="#efe9db" />
+              <path d="M5 20 L20 17.4 L35 20 L20 22.6 Z" fill="#efe9db" opacity="0.55" />
+            </svg>
+            <span className="book3d__brand">AIBook.fun</span>
+          </div>
+          {/* Belly band — the classic publisher's wraparound strip for a themed
+              tie-in, rather than redesigning the whole cover around it. */}
+          <div className="book3d__band">
+            <img src="/american-dream-banner.webp" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

marketing-site/components/Capture.jsx

@@ -0,0 +1,22 @@
+import EmailForm from "./EmailForm";
+
+export default function Capture() {
+  return (
+    <section className="section capture" id="get">
+      <div className="capture-in">
+        <span className="spec reveal">Be first</span>
+        <h2 className="reveal">Get the preview chapter free.</h2>
+        <p className="reveal">
+          Join the pre-launch list. You’ll get one full workflow to keep, a heads-up the morning
+          we launch on Kickstarter, and early-backer pricing. Three emails. No spam, ever.
+        </p>
+        <div className="reveal">
+          <EmailForm cta="Send it to me" />
+        </div>
+        <p className="fine reveal">
+          Launching Sept 26, 2026 · unsubscribe anytime · we track sign-ups, never your work
+        </p>
+      </div>
+    </section>
+  );
+}

marketing-site/components/Contents.jsx

@@ -0,0 +1,29 @@
+const ITEMS = [
+  { num: "01", name: "Real Estate", desc: "Market briefs & listings, without leaking client data" },
+  { num: "02", name: "Financial Advisors", desc: "Portfolio summaries that stay compliant & reviewed" },
+  { num: "03", name: "Fractional C-Suite", desc: "Board updates & plans with real escalation paths" },
+  { num: "04", name: "Higher Education", desc: "Course & research workflows with academic integrity" },
+  { num: "05", name: "Communities", desc: "Moderation & programming that respects members" },
+  { num: "06", name: "Technology", desc: "Agent patterns, evals & the responsible defaults" },
+];
+
+export default function Contents() {
+  return (
+    <section className="section contents" id="contents">
+      <div className="wrap">
+        <span className="spec reveal">The founding library</span>
+        <h2 className="reveal">Six practices, written by people who built their careers on them.</h2>
+        <div className="toc reveal">
+          {ITEMS.map((x) => (
+            <a href="#get" key={x.num}>
+              <span className="num">{x.num}</span>
+              <span className="name">{x.name}</span>
+              <span className="desc">{x.desc}</span>
+              <span className="arrow" aria-hidden="true">→</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

marketing-site/components/EmailForm.jsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+
+/**
+ * Pre-launch email capture. Front-end demo only: on submit it shows a success
+ * state. Wire `postEmail` to the real CRM endpoint (FluentCRM tag `prelaunch`)
+ * when the backend is ready.
+ */
+export default function EmailForm({ className = "", cta = "Send it to me" }) {
+  const [email, setEmail] = useState("");
+  const [done, setDone] = useState(false);
+
+  async function onSubmit(e) {
+    e.preventDefault();
+    if (!email) return;
+    // TODO: await postEmail(email)  — POST to CRM, then setDone(true)
+    setDone(true);
+  }
+
+  if (done) {
+    return (
+      <p className="ok-msg" role="status">
+        ✓ You’re on the list — check your inbox for the preview chapter.
+      </p>
+    );
+  }
+
+  return (
+    <form className={className} onSubmit={onSubmit} noValidate>
+      <input
+        className="field"
+        type="email"
+        required
+        placeholder="you@work.com"
+        aria-label="Email address"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <button className="btn btn-primary" type="submit">
+        {cta}
+      </button>
+    </form>
+  );
+}

marketing-site/components/FAQ.jsx

@@ -0,0 +1,48 @@
+const QA = [
+  {
+    q: "Is this AI theory, or something I can actually run?",
+    a: "Something you run. Every workflow shows the real tool output, lists the real steps, and ends in a ~15-minute Try-it on non-confidential sample data. If you can’t run it, it doesn’t ship.",
+    open: true,
+  },
+  {
+    q: "How is this different from a course?",
+    a: "A course teaches concepts; this is a field guide of tested recipes you apply to your real job this week. It refreshes annually because AI moves fast — stale advice is worthless.",
+  },
+  {
+    q: "What does “responsible by design” actually mean?",
+    a: "Every recipe includes data-handling rules, human-oversight steps, failure modes, and escalation paths. They’re part of the template — not an appendix, not an afterthought.",
+  },
+  {
+    q: "Can I contribute a workflow after backing?",
+    a: "Yes — open contribution opens once the founding library is live. We’re finalizing how contributors get paid (not just a byline) before launch.",
+  },
+  {
+    q: "Why subscribe instead of buy once?",
+    a: "Because a static AI book is out of date in months. The subscription is what keeps every workflow current — and it’s what funds the practitioners keeping them that way.",
+  },
+  {
+    q: "Why frame this around the American Dream?",
+    a: "Because for most of the people writing and reading this guide, real fluency with these tools isn’t a slogan — it’s a practical ladder. Nobody in this book inherited their edge; they built it, one real skill at a time. We think this is the next one worth building.",
+  },
+];
+
+export default function FAQ() {
+  return (
+    <section className="section faq" id="faq">
+      <div className="wrap" style={{ maxWidth: "760px" }}>
+        <h2 className="reveal">Frequently asked.</h2>
+        <div className="qa reveal">
+          {QA.map((x, i) => (
+            <details key={i} open={x.open || undefined}>
+              <summary>
+                {x.q}
+                <span className="pl" aria-hidden="true">+</span>
+              </summary>
+              <div className="ans">{x.a}</div>
+            </details>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

marketing-site/components/FieldNotes.jsx

@@ -0,0 +1,35 @@
+const NOTES = [
+  {
+    n: "01 / Stays current",
+    h: "A subscription, not a static book",
+    p: "AI moves too fast for a book you buy once. Each annual edition is refreshed so the ground you gain here doesn’t erode the moment you look away.",
+  },
+  {
+    n: "02 / Authored, then open",
+    h: "Written by practitioners first",
+    p: "The first edition is seeded by co-authors — a real founding library, not an empty shelf. Open, paid contribution opens once it’s worth browsing, so the people who build it get to own a piece of it.",
+  },
+  {
+    n: "03 / Responsible by design",
+    h: "Guardrails in every recipe",
+    p: "Data handling, human oversight, failure modes, escalation — part of the template on every workflow, never an appendix.",
+  },
+];
+
+export default function FieldNotes() {
+  return (
+    <section className="notes">
+      <div className="wrap">
+        <div className="notes-grid">
+          {NOTES.map((x) => (
+            <div className="note reveal" key={x.n}>
+              <div className="n">{x.n}</div>
+              <h3>{x.h}</h3>
+              <p>{x.p}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

marketing-site/components/Footer.jsx

@@ -0,0 +1,32 @@
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <div className="foot-in">
+        <div className="foot-top">
+          <div>
+            <div className="logo">
+              AIBook<b>.</b>
+              <span className="dot">fun</span>
+            </div>
+            <p className="foot-blurb">
+              A living, crowd-written field guide to using AI agents responsibly at work. Part
+              of the WeOwnNet ecosystem.
+            </p>
+          </div>
+          <div className="foot-links">
+            <a href="#recipe">A recipe</a>
+            <a href="#contents">Contents</a>
+            <a href="#get">Preview</a>
+            <a href="#faq">FAQ</a>
+          </div>
+        </div>
+        <div className="colophon">
+          © 2026 WeOwnAI · MIT-licensed docs · Launching on Kickstarter, Sept 26, 2026
+          <br />
+          Set in Fraunces, Hanken Grotesk & JetBrains Mono. This is a pre-launch page — pledge
+          tiers and pricing are finalized at launch.
+        </div>
+      </div>
+    </footer>
+  );
+}

marketing-site/components/Hero.jsx

@@ -0,0 +1,42 @@
+import EmailForm from "./EmailForm";
+import Book3D from "./Book3D";
+
+export default function Hero() {
+  return (
+    <section className="hero" id="top">
+      <div className="hero-tabs" aria-hidden="true">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <div className="wrap hero-grid">
+        <div className="hero-visual">
+          <Book3D />
+        </div>
+        <div className="hero-copy">
+          <div className="eyebrow">
+            <span className="tick"></span>
+            <span className="spec">
+              Field guide · Edition&nbsp;001 · Kickstarter&nbsp;Sept&nbsp;26,&nbsp;2026
+            </span>
+          </div>
+          <h1>
+            The field guide to using AI agents{" "}
+            <span className="serif-it">responsibly</span> at work.
+          </h1>
+          <p className="hero-sub">
+            Not theory. Not hype. A subscription guide of{" "}
+            <span className="hl">tested workflows you can actually run</span> — each with the
+            real tool output, the guardrails, and a 15-minute exercise so you learn by doing.
+          </p>
+          <EmailForm className="hero-form" cta="Send me the preview chapter" />
+          <p className="hero-note">
+            Free preview + first access at launch · <b>3 emails, no spam</b>
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

marketing-site/components/Letter.jsx

@@ -0,0 +1,25 @@
+export default function Letter() {
+  return (
+    <section className="section letter" id="letter">
+      <div className="letter-in">
+        <span className="spec reveal">A note on why</span>
+        <p className="letter-body reveal">
+          Most AI advice is either hype or theory — and neither survives contact with real
+          work. We’re writing the guide we wish we’d had: workflows that <em>actually run</em>,
+          with the <span className="mark">guardrails built in</span>, kept honest by the people
+          who use them every day. For a lot of us, mastering these tools isn’t optional
+          anymore — it’s how you build the life you’re working toward. Fund the first edition,
+          and you don’t just get the book — you help decide what goes in it.
+        </p>
+        <div className="sign reveal">
+          <span className="scrawl">The co-authors</span>
+          <span className="who">
+            AIBook.fun founding team
+            <br />
+            Real estate · finance · leadership · tech
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}

marketing-site/components/Nav.jsx

@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState } from "react";
+
+const LINKS = [
+  { href: "#recipe", label: "A recipe" },
+  { href: "#contents", label: "Contents" },
+  { href: "#letter", label: "Why" },
+  { href: "#faq", label: "FAQ" },
+];
+
+export default function Nav() {
+  const [scrolled, setScrolled] = useState(false);
+  const [open, setOpen] = useState(false);
+  const navRef = useRef(null);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 12);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // While the mobile menu is open: close on Escape or an outside tap.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && setOpen(false);
+    const onDown = (e) => {
+      if (navRef.current && !navRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDown);
+    };
+  }, [open]);
+
+  const close = () => setOpen(false);
+
+  return (
+    <nav ref={navRef} className={`nav${scrolled ? " scrolled" : ""}${open ? " open" : ""}`}>
+      <div className="nav-in">
+        <a className="logo" href="#top" onClick={close}>
+          AIBook<b>.</b>
+          <span className="dot">fun</span>
+        </a>
+
+        <div className="nav-links">
+          {LINKS.map((l) => (
+            <a key={l.href} href={l.href}>
+              {l.label}
+            </a>
+          ))}
+        </div>
+
+        <a href="#get" className="btn btn-primary nav-cta">
+          Get the preview
+        </a>
+
+        <button
+          type="button"
+          className="nav-toggle"
+          aria-label={open ? "Close menu" : "Open menu"}
+          aria-expanded={open}
+          aria-controls="mobile-menu"
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span className="bars" aria-hidden="true"></span>
+        </button>
+      </div>
+
+      <div className="nav-menu" id="mobile-menu">
+        {LINKS.map((l) => (
+          <a key={l.href} href={l.href} onClick={close}>
+            {l.label}
+          </a>
+        ))}
+        <a href="#get" className="btn btn-primary" onClick={close}>
+          Get the preview
+        </a>
+      </div>
+    </nav>
+  );
+}

marketing-site/components/Recipe.jsx

@@ -0,0 +1,120 @@
+function ShieldCheck() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path
+        d="M8 1.5 2.5 4v3.5c0 3 2.3 5.4 5.5 7 3.2-1.6 5.5-4 5.5-7V4L8 1.5Z"
+        stroke="#1C5D4C"
+        strokeWidth="1.3"
+        strokeLinejoin="round"
+      />
+      <path
+        d="m5.6 8 1.7 1.7L10.6 6"
+        stroke="#1C5D4C"
+        strokeWidth="1.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default function Recipe() {
+  return (
+    <section className="section" id="recipe">
+      <div className="wrap">
+        <div className="recipe-head reveal">
+          <span className="spec">Read an actual recipe</span>
+          <h2>Every entry is a workflow you can run.</h2>
+          <p>
+            Here’s a real one from the founding library — the whole thing, exactly as it
+            appears in the guide. This is the format behind every workflow.
+          </p>
+        </div>
+
+        <div className="recipe reveal">
+          <div className="recipe-top">
+            <span className="recipe-id">
+              recipe <b>RE-04</b> · v1.2 · ~15 min
+            </span>
+            <span className="recipe-vert">Real Estate</span>
+          </div>
+          <div className="recipe-body">
+            <h3 className="recipe-title">
+              Draft a property-market brief with an AI agent — without leaking client data.
+            </h3>
+
+            <div className="row">
+              <div className="k">Problem</div>
+              <div className="v">
+                You need a sharp neighborhood market brief for a client meeting, fast — but
+                the listing sheet and client notes can’t go into a public model.{" "}
+                <span className="sub">
+                  Job: turn messy local data into a credible one-pager in minutes, safely.
+                </span>
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="k">Method</div>
+              <div className="v">
+                <ol className="steps">
+                  <li>Strip identifiers from the source data locally (a provided script does this).</li>
+                  <li>Prompt the agent with the anonymized sample and a fixed brief template.</li>
+                  <li>Review the draft against the checklist before anything leaves your machine.</li>
+                </ol>
+                <div className="term" role="img" aria-label="Sample terminal output from the workflow">
+                  <div className="term-bar">
+                    <i></i>
+                    <i></i>
+                    <i></i>
+                    <span>agent — property-brief · sample dataset (non-confidential)</span>
+                  </div>
+                  <pre>
+                    <span className="c-dim">{"$ "}</span>
+                    <span className="c-user">{"brief"}</span>
+                    {" --input "}
+                    <span className="c-key">{"sample_listings.csv"}</span>
+                    {" --template market-1pager\n\n"}
+                    <span className="c-dim">{"✓ redacted 3 fields (owner_name, phone, exact_address)\n✓ 41 comps in radius · median $/sqft computed\n\n"}</span>
+                    <span className="c-ok">{"MARKET BRIEF — Maple Heights (sample)\n"}</span>
+                    {" · Median list: $420/sqft  (▲ 4.1% QoQ)\n · Days on market: 22  (was 31)\n · Inventory: 1.8 mo — seller-leaning\n · Read: price to comp, expect <2 wks at ask\n\n"}
+                    <span className="c-dim">{"# cost this run: $0.03 · model: claude · 2,140 tokens"}</span>
+                  </pre>
+                </div>
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="k">Safeguards</div>
+              <div className="v">
+                <div className="guard">
+                  <ShieldCheck />
+                  <span>
+                    Redaction runs <b style={{ color: "var(--color-ink)" }}>on your machine</b> —
+                    raw client data never reaches the model.
+                  </span>
+                </div>
+                <div className="guard">
+                  <ShieldCheck />
+                  <span>
+                    A human review step is required before the brief is shared. The checklist
+                    is part of the recipe.
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="k">Try it</div>
+              <div className="v">
+                Run the same brief on the included sample dataset (no real client data) in
+                about 15 minutes — then swap in your own, safely.{" "}
+                <span className="chip">◷ cost to try ≈ $0.03</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

marketing-site/components/Tiers.jsx

@@ -0,0 +1,50 @@
+export default function Tiers() {
+  return (
+    <section className="section" id="back">
+      <div className="wrap">
+        <div className="tiers-head">
+          <div className="reveal">
+            <span className="spec">When we launch</span>
+            <h2>What backing will look like.</h2>
+          </div>
+          <p className="tiers-note reveal">
+            Preview of planned pledge tiers. Final pricing is confirmed at the Kickstarter
+            launch — nothing here is a live checkout yet.
+          </p>
+        </div>
+        <div className="tier-grid">
+          <div className="tier reveal">
+            <div className="t-name">Supporter</div>
+            <div className="t-price">$10</div>
+            <div className="t-unit">one-time</div>
+            <div className="t-desc">
+              The preview chapter, community updates, and an early look at the founding library
+              as it’s written.
+            </div>
+          </div>
+          <div className="tier feature reveal">
+            <div className="t-tag">The one to get</div>
+            <div className="t-name">The Book</div>
+            <div className="t-price">
+              $47 <small>/yr</small>
+            </div>
+            <div className="t-unit">annual subscription</div>
+            <div className="t-desc">
+              The full guide — PDF + web reader — and every annual update while you’re
+              subscribed. Recurring value, no lifetime gimmick.
+            </div>
+          </div>
+          <div className="tier reveal">
+            <div className="t-name">Founding Sponsor</div>
+            <div className="t-price">Founding</div>
+            <div className="t-unit">limited · final terms at launch</div>
+            <div className="t-desc">
+              A named acknowledgment in the guide, a private cohort seat, and a hand in shaping
+              the first edition — the ground floor of something you helped build.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

marketing-site/lib/useReveal.js

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+
+/**
+ * Scroll-reveal for elements with the `.reveal` class.
+ * Above-the-fold content should NOT use `.reveal` (it must be visible instantly);
+ * this is for sections below the fold. A failsafe guarantees nothing stays hidden.
+ */
+export default function useReveal() {
+  useEffect(() => {
+    const els = document.querySelectorAll(".reveal");
+    if (!("IntersectionObserver" in window)) {
+      els.forEach((el) => el.classList.add("in"));
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.classList.add("in");
+            io.unobserve(e.target);
+          }
+        });
+      },
+      { rootMargin: "0px 0px -8% 0px", threshold: 0.08 }
+    );
+    els.forEach((el) => io.observe(el));
+    const failsafe = setTimeout(
+      () => els.forEach((el) => el.classList.add("in")),
+      1600
+    );
+    return () => {
+      io.disconnect();
+      clearTimeout(failsafe);
+    };
+  }, []);
+}

marketing-site/next.config.mjs

@@ -0,0 +1,16 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  // Deploy layer (deploy/docker/Dockerfile) builds the standalone
+  // output. No runtime behavior change for preview/dev.
+  output: 'standalone',
+  // A stray package-lock.json sits at the repo root; pin the workspace root here
+  // so Turbopack doesn't infer the wrong one.
+  turbopack: {
+    root: import.meta.dirname,
+  },
+  // Don't auto-generate AGENTS.md / CLAUDE.md into the project.
+  agentRules: false,
+};
+
+export default nextConfig;

marketing-site/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "aibook-fun-marketing",
+  "version": "1.0.0",
+  "private": true,
+  "description": "AIBook.fun — pre-launch marketing site (field-guide design)",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "lint": "next lint"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.weown.tools/WeOwnAI/aibook-fun.git"
+  },
+  "dependencies": {
+    "next": "^16.3.3",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.3",
+    "postcss": "^8.5.26",
+    "tailwindcss": "^4.3.3"
+  }
+}

marketing-site/pages/_app.jsx

@@ -0,0 +1,5 @@
+import "../styles/globals.css";
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

marketing-site/pages/_document.jsx

@@ -0,0 +1,27 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        {/* Mark JS as available before paint so `.reveal` only hides when it can also un-hide
+            (no-JS users and crawlers see all content). */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: "document.documentElement.classList.add('js')",
+          }}
+        />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

marketing-site/pages/index.jsx

@@ -0,0 +1,44 @@
+import Head from "next/head";
+import useReveal from "../lib/useReveal";
+import Nav from "../components/Nav";
+import Hero from "../components/Hero";
+import FieldNotes from "../components/FieldNotes";
+import Recipe from "../components/Recipe";
+import Contents from "../components/Contents";
+import Letter from "../components/Letter";
+import Authors from "../components/Authors";
+import Capture from "../components/Capture";
+import Tiers from "../components/Tiers";
+import FAQ from "../components/FAQ";
+import Footer from "../components/Footer";
+
+export default function Home() {
+  useReveal();
+
+  return (
+    <>
+      <Head>
+        <title>AIBook.fun — a field guide to AI agents at work</title>
+        <meta
+          name="description"
+          content="A living, crowd-written field guide to using AI agents responsibly at work. Tested workflows you can run — launching on Kickstarter, Sept 26, 2026."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+
+      <Nav />
+      <main>
+        <Hero />
+        <FieldNotes />
+        <Recipe />
+        <Contents />
+        <Letter />
+        <Authors />
+        <Capture />
+        <Tiers />
+        <FAQ />
+      </main>
+      <Footer />
+    </>
+  );
+}

marketing-site/postcss.config.mjs

@@ -0,0 +1,7 @@
+// Tailwind CSS v4 runs as a PostCSS plugin (separate package from `tailwindcss`).
+// Without this, `@import "tailwindcss"` in globals.css is inert.
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

marketing-site/styles/globals.css

@@ -0,0 +1,423 @@
+@import "tailwindcss";
+
+/* ============================================================
+   AIBook.fun — "field guide" design system
+   Tokens live in @theme so they're available BOTH as CSS vars
+   (var(--color-pine)) and as Tailwind utilities (bg-pine, font-display).
+   ============================================================ */
+@theme {
+  --color-paper: #fcfbf8;      /* warm near-white ground (chosen, not cream cliché) */
+  --color-paper-2: #f6f4ee;    /* recessed band */
+  --color-card: #ffffff;       /* raised surfaces */
+  --color-ink: #1a1613;        /* warm near-black text */
+  --color-muted: #6e675e;      /* warm stone secondary */
+  --color-line: #e7e1d7;       /* warm hairline */
+  --color-line-2: #d8d1c4;     /* stronger hairline */
+  --color-pine: #1c5d4c;       /* THE accent — field-guide green */
+  --color-pine-deep: #12463a;
+  --color-pine-tint: rgba(28, 93, 76, 0.1);
+  --color-pine-wash: rgba(28, 93, 76, 0.06);
+  --color-amber: #b4791f;
+
+  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
+  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+:root {
+  --sh-sm: 0 1px 2px rgba(26, 22, 19, 0.05), 0 1px 3px rgba(26, 22, 19, 0.04);
+  --sh-md: 0 4px 10px rgba(26, 22, 19, 0.06), 0 2px 4px rgba(26, 22, 19, 0.04);
+  --sh-lg: 0 18px 40px -12px rgba(26, 22, 19, 0.12), 0 6px 14px rgba(26, 22, 19, 0.05);
+  --ease: cubic-bezier(0.16, 1, 0.3, 1);
+  --wrap: 1080px;
+}
+
+/* ============ BASE ============ */
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 17px;
+  line-height: 1.65;
+  letter-spacing: -0.005em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+::selection {
+  background: var(--color-pine-tint);
+  color: var(--color-pine-deep);
+}
+a { color: inherit; text-decoration: none; }
+h1, h2, h3 { text-wrap: balance; margin: 0; }
+@media (max-width: 720px) { body { font-size: 16px; } }
+
+/* ============ LAYOUT PRIMITIVES ============ */
+.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
+.section { padding: 104px 0; }
+@media (max-width: 900px) { .section { padding: 84px 0; } }
+@media (max-width: 600px) {
+  .wrap { padding: 0 20px; }
+  .section { padding: 64px 0; }
+}
+
+.spec {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-pine);
+}
+.serif-it { font-family: var(--font-display); font-style: italic; font-weight: 500; }
+.hl {
+  background: linear-gradient(transparent 62%, var(--color-pine-tint) 62%);
+  padding: 0 0.06em;
+}
+
+/* ============ BUTTONS ============ */
+.btn {
+  display: inline-flex; align-items: center; gap: 0.5em;
+  font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
+  border-radius: 999px; padding: 15px 26px; cursor: pointer; border: 1px solid transparent;
+  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease), background 0.18s var(--ease);
+}
+.btn-primary { background: var(--color-pine); color: #f7fbf9; box-shadow: 0 6px 18px -6px rgba(28, 93, 76, 0.5); }
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(28, 93, 76, 0.55); }
+.btn-primary:active { transform: translateY(0) scale(0.99); }
+.btn-ghost { background: var(--color-card); color: var(--color-ink); border-color: var(--color-line-2); }
+.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
+.btn:focus-visible { outline: 2px solid var(--color-pine); outline-offset: 3px; }
+
+/* ============ REVEAL (only hides when JS can un-hide) ============ */
+.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
+.js .reveal.in { opacity: 1; transform: none; }
+@media (prefers-reduced-motion: reduce) {
+  .js .reveal { opacity: 1; transform: none; }
+  html { scroll-behavior: auto; }
+  * { animation: none !important; transition: none !important; }
+}
+
+/* ============ NAV ============ */
+.nav {
+  position: sticky; top: 0; z-index: 50;
+  background: color-mix(in srgb, var(--color-paper) 82%, transparent);
+  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
+  border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s;
+}
+.nav.scrolled { border-bottom-color: var(--color-line); box-shadow: var(--sh-sm); }
+.nav-in {
+  max-width: var(--wrap); margin: 0 auto; padding: 0 28px; height: 68px;
+  display: flex; align-items: center; justify-content: space-between; gap: 20px;
+}
+.logo { display: flex; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 900; font-size: 21px; letter-spacing: -0.02em; }
+.logo b { color: var(--color-pine); }
+.logo .dot { color: var(--color-muted); font-weight: 500; }
+.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 600; color: var(--color-muted); }
+.nav-links a { transition: color 0.18s; }
+.nav-links a:hover { color: var(--color-ink); }
+.nav-cta { font-size: 14px; padding: 10px 18px; }
+
+/* mobile hamburger toggle (hidden on desktop) */
+.nav-toggle {
+  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
+  padding: 0; border: 1px solid var(--color-line-2); border-radius: 12px;
+  background: var(--color-card); cursor: pointer; flex: none;
+}
+.nav-toggle:focus-visible { outline: 2px solid var(--color-pine); outline-offset: 3px; }
+.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
+  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px;
+  background: var(--color-ink); transition: transform 0.25s var(--ease), opacity 0.2s;
+}
+.nav-toggle .bars { position: relative; }
+.nav-toggle .bars::before { position: absolute; left: 0; top: -6px; }
+.nav-toggle .bars::after { position: absolute; left: 0; top: 6px; }
+.nav.open .nav-toggle .bars { background: transparent; }
+.nav.open .nav-toggle .bars::before { transform: translateY(6px) rotate(45deg); }
+.nav.open .nav-toggle .bars::after { transform: translateY(-6px) rotate(-45deg); }
+
+/* mobile dropdown menu (rendered on desktop as display:none) */
+.nav-menu { display: none; }
+
+@media (max-width: 860px) {
+  .nav-links { display: none; }
+  .nav-cta { display: none; }           /* CTA moves into the menu */
+  .nav-toggle { display: inline-flex; }
+  .nav-menu {
+    display: flex; flex-direction: column; gap: 2px;
+    position: absolute; top: 100%; left: 0; right: 0;
+    background: var(--color-paper); border-bottom: 1px solid var(--color-line);
+    box-shadow: var(--sh-lg); padding: 10px 20px 20px;
+    opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
+    transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0.2s;
+  }
+  .nav.open .nav-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
+  .nav-menu a:not(.btn) {
+    font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--color-ink);
+    padding: 15px 6px; border-bottom: 1px solid var(--color-line);
+  }
+  .nav-menu a:not(.btn):hover { color: var(--color-pine); }
+  .nav-menu .btn { margin-top: 14px; justify-content: center; width: 100%; }
+}
+@media (max-width: 600px) { .nav-in { padding: 0 20px; } }
+
+/* ============ HERO ============ */
+.hero { padding: 78px 0 72px; position: relative; overflow: hidden; }
+.hero-tabs { position: absolute; top: 0; right: max(28px, calc(50% - var(--wrap) / 2 + 28px)); display: flex; gap: 6px; opacity: 0.5; }
+.hero-tabs span { width: 34px; height: 8px; border-radius: 0 0 4px 4px; background: var(--color-line-2); }
+.hero-tabs span:first-child { background: var(--color-pine); opacity: 0.85; }
+.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; }
+.eyebrow .tick { width: 7px; height: 7px; border-radius: 999px; background: var(--color-pine); flex: none; }
+.hero h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.7rem, 6.4vw, 5.1rem); line-height: 0.98; letter-spacing: -0.028em; max-width: 15ch; margin-bottom: 26px; }
+.hero-sub { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--color-muted); line-height: 1.62; max-width: 33rem; margin-bottom: 16px; }
+.hero-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; max-width: 34rem; }
+.field {
+  flex: 1; min-width: 220px; font-family: var(--font-body); font-size: 15.5px; color: var(--color-ink);
+  background: var(--color-card); border: 1px solid var(--color-line-2); border-radius: 999px; padding: 15px 22px;
+  transition: border-color 0.18s, box-shadow 0.18s;
+}
+.field::placeholder { color: #a49c90; }
+.field:focus { outline: none; border-color: var(--color-pine); box-shadow: 0 0 0 4px var(--color-pine-wash); }
+.hero-note { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); margin-top: 16px; }
+.hero-note b { color: var(--color-pine); font-weight: 600; }
+@media (max-width: 720px) { .hero-tabs { display: none; } .hero { padding: 56px 0 56px; } }
+@media (max-width: 600px) { .spec { letter-spacing: 0.1em; font-size: 11px; } }
+
+/* ============ HERO TWO-COLUMN + 3D BOOK ============ */
+.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; }
+.hero-visual { display: flex; justify-content: center; order: 2; }  /* book on the right */
+.hero-copy { min-width: 0; order: 1; }                              /* text on the left */
+
+.book3d { --bw: 300px; --bh: 420px; --bt: 54px; --band-h: 58px; position: relative; perspective: 2000px; flex: none; padding: 6px 0 40px; }
+.book3d__inner {
+  position: relative; width: var(--bw); height: var(--bh); margin: 0 auto;
+  transform-style: preserve-3d; transform: rotateX(7deg) rotateY(-34deg);
+  animation: book-float 8s ease-in-out infinite; will-change: transform;
+}
+.book3d:hover .book3d__inner { transform: rotateX(5deg) rotateY(-22deg); transition: transform 0.7s var(--ease); animation-play-state: paused; }
+@keyframes book-float {
+  0%, 100% { transform: rotateX(7deg) rotateY(-34deg) translateY(0); }
+  50% { transform: rotateX(5deg) rotateY(-30deg) translateY(-12px); }
+}
+.book3d__face { position: absolute; top: 0; left: 0; }
+.book3d__cover, .book3d__back { width: var(--bw); height: var(--bh); }
+.book3d__cover {
+  transform: translateZ(calc(var(--bt) / 2)); border-radius: 3px 8px 8px 3px; overflow: hidden;
+  background: linear-gradient(125deg, #23745f, #1a5748 48%, #123f34);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 8px 0 16px -8px rgba(0, 0, 0, 0.5), 0 32px 46px -22px rgba(18, 63, 52, 0.55);
+  padding: 32px 27px calc(var(--band-h) * 1.48); display: flex; flex-direction: column;
+}
+.book3d__back { transform: rotateY(180deg) translateZ(calc(var(--bt) / 2)); border-radius: 8px 3px 3px 8px; background: #0f3b30; }
+.book3d__pages {
+  width: var(--bt); height: calc(var(--bh) - 6px); top: 3px; left: calc((var(--bw) - var(--bt)) / 2);
+  transform: rotateY(90deg) translateZ(calc(var(--bw) / 2));
+  background: repeating-linear-gradient(to left, #efe9db 0, #efe9db 1px, #d6cdba 1px, #d6cdba 3px);
+}
+.book3d__spine {
+  width: var(--bt); height: var(--bh); left: calc((var(--bw) - var(--bt)) / 2);
+  transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2));
+  background: linear-gradient(#174f41, #0f3b30); display: flex; align-items: center; justify-content: center;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+.book3d__spine span {
+  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
+  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(239, 233, 219, 0.72);
+}
+.book3d__top {
+  width: var(--bw); height: var(--bt); top: calc((var(--bh) - var(--bt)) / 2);
+  transform: rotateX(90deg) translateZ(calc(var(--bh) / 2));
+  background: repeating-linear-gradient(to right, #efe9db 0, #efe9db 1px, #d6cdba 1px, #d6cdba 3px);
+}
+.book3d__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(239, 233, 219, 0.62); }
+.book3d__title { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; line-height: 1.02; letter-spacing: -0.02em; color: #f3eee2; margin-top: 16px; }
+.book3d__line { width: 34px; height: 2px; background: rgba(239, 233, 219, 0.5); margin: 15px 0; }
+.book3d__sub { font-family: var(--font-body); font-size: 13px; color: rgba(239, 233, 219, 0.68); line-height: 1.45; max-width: 16ch; }
+.book3d__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
+.book3d__mark { width: 30px; height: 30px; flex: none; }
+/* Belly band: a promotional strip wrapped across the lower cover, publisher-
+   style, rather than redesigning the whole face around the source graphic.
+   The <img> is width-locked to the band and shifted up so the crop stays
+   full-width (legible "AMERICAN" wordmark) and only trims top/bottom. */
+.book3d__band {
+  position: absolute; left: 0; right: 0; bottom: calc(var(--band-h) * 0.31);
+  height: var(--band-h); overflow: hidden;
+  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset, 0 3px 10px rgba(0, 0, 0, 0.3);
+}
+.book3d__band img {
+  position: absolute; left: 0; top: -78%; width: 100%; height: auto; display: block;
+}
+.book3d__brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(239, 233, 219, 0.85); }
+.book3d::after {
+  content: ""; position: absolute; left: 50%; bottom: 6px; width: 60%; height: 24px; transform: translateX(-50%);
+  background: radial-gradient(ellipse, rgba(18, 60, 50, 0.3), transparent 70%); filter: blur(7px); z-index: -1;
+}
+@media (max-width: 900px) {
+  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
+  .hero-visual { order: 2; }
+  .hero-copy { order: 1; }
+  .book3d { --bw: 256px; --bh: 358px; --bt: 48px; --band-h: 50px; }
+}
+@media (max-width: 420px) { .book3d { --bw: 210px; --bh: 294px; --bt: 40px; --band-h: 40px; } }
+@media (prefers-reduced-motion: reduce) { .book3d__inner { animation: none; } }
+
+/* ============ FIELD NOTES (even gutters, aligned to container edges) ============ */
+.notes { background: var(--color-paper-2); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
+.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
+.note { padding: 48px 36px; border-left: 1px solid var(--color-line); }
+.note:first-child { border-left: none; padding-left: 0; }
+.note:last-child { padding-right: 0; }
+.note .n { font-family: var(--font-mono); font-size: 12px; color: var(--color-pine); letter-spacing: 0.12em; margin-bottom: 16px; }
+.note h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.15; }
+.note p { font-size: 15px; color: var(--color-muted); line-height: 1.6; }
+@media (max-width: 760px) {
+  .notes-grid { grid-template-columns: 1fr; }
+  .note { padding: 32px 0; border-left: none; border-top: 1px solid var(--color-line); }
+  .note:first-child { border-top: none; padding-top: 0; }
+  .note:last-child { padding-bottom: 0; }
+}
+
+/* ============ RECIPE (value centerpiece) ============ */
+.recipe-head { max-width: 40rem; margin-bottom: 44px; }
+.recipe-head h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4.3vw, 3.3rem); letter-spacing: -0.025em; line-height: 1.02; margin: 16px 0 18px; }
+.recipe-head p { color: var(--color-muted); font-size: 1.08rem; }
+.recipe { background: var(--color-card); border: 1px solid var(--color-line); border-radius: 20px; box-shadow: var(--sh-lg); overflow: hidden; }
+.recipe-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--color-line); background: linear-gradient(var(--color-card), var(--color-paper)); }
+.recipe-id { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-muted); letter-spacing: 0.04em; }
+.recipe-id b { color: var(--color-pine); }
+.recipe-vert { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-pine); background: var(--color-pine-wash); border: 1px solid var(--color-pine-tint); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
+.recipe-body { padding: 34px 28px; }
+.recipe-title { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 26px; max-width: 34rem; }
+.row { display: grid; grid-template-columns: 118px 1fr; gap: 20px; padding: 18px 0; border-top: 1px dashed var(--color-line-2); }
+.row:first-of-type { border-top: none; padding-top: 0; }
+.row .k { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-pine); padding-top: 3px; }
+.row .v { font-size: 15.5px; color: var(--color-ink); line-height: 1.6; }
+.row .v .sub { color: var(--color-muted); font-size: 14.5px; }
+/* Let grid items shrink below their content width so the terminal's own
+   overflow-x:auto engages (scrolls) instead of the row expanding + being clipped. */
+.row > * { min-width: 0; }
+.term { max-width: 100%; }
+.steps { counter-reset: s; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; }
+.steps li { list-style: none; display: flex; gap: 12px; font-size: 15px; color: var(--color-ink); }
+.steps li::before {
+  counter-increment: s; content: counter(s);
+  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--color-pine);
+  background: var(--color-pine-wash); width: 22px; height: 22px; border-radius: 6px;
+  display: grid; place-items: center; flex: none; margin-top: 1px;
+}
+.term { margin-top: 14px; background: #14110e; border-radius: 12px; overflow: hidden; border: 1px solid #2a241d; }
+.term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid #2a241d; }
+.term-bar i { width: 11px; height: 11px; border-radius: 999px; background: #3a342b; display: block; }
+.term-bar span { font-family: var(--font-mono); font-size: 11px; color: #8a8175; margin-left: 8px; letter-spacing: 0.03em; }
+.term pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: #d8d0c4; }
+.term .c-user { color: #7fc8a9; }
+.term .c-key { color: #e0b96b; }
+.term .c-dim { color: #8a8175; }
+.term .c-ok { color: #7fc8a9; }
+.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--color-amber); background: rgba(180, 121, 31, 0.08); border: 1px solid rgba(180, 121, 31, 0.2); padding: 4px 10px; border-radius: 999px; }
+.guard { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--color-muted); padding: 8px 0; }
+.guard svg { flex: none; margin-top: 2px; }
+@media (max-width: 640px) {
+  .row { grid-template-columns: 1fr; gap: 8px; }
+  .recipe-body { padding: 26px 20px; }
+  .recipe-top { padding: 16px 20px; }
+}
+
+/* ============ CONTENTS (table-of-contents) ============ */
+.contents { background: var(--color-paper-2); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
+.contents h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.025em; margin: 14px 0 34px; max-width: 20ch; }
+.toc { border-top: 1px solid var(--color-line-2); }
+.toc a { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 20px; padding: 22px 8px; border-bottom: 1px solid var(--color-line); transition: background 0.2s, padding 0.2s; }
+.toc a:hover { background: var(--color-pine-wash); padding-left: 16px; }
+.toc .num { font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); }
+.toc .name { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -0.02em; }
+.toc .desc { font-size: 14px; color: var(--color-muted); justify-self: end; text-align: right; max-width: 24rem; }
+.toc .arrow { color: var(--color-pine); opacity: 0; transition: opacity 0.2s, transform 0.2s; font-family: var(--font-mono); }
+.toc a:hover .arrow { opacity: 1; transform: translateX(3px); }
+@media (max-width: 720px) { .toc .desc { display: none; } .toc a { grid-template-columns: 40px 1fr auto; } }
+
+/* ============ LETTER (human) ============ */
+.letter { background: var(--color-pine-deep); color: #eaf1ec; position: relative; overflow: hidden; }
+.letter::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 0%, rgba(255, 255, 255, 0.06), transparent 60%); pointer-events: none; }
+.letter-in { max-width: 720px; margin: 0 auto; padding: 0 28px; position: relative; }
+.letter .spec { color: #8fbeae; }
+.letter-body { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.42; letter-spacing: -0.01em; margin: 22px 0 30px; }
+.letter-body em { font-style: italic; color: #fff; }
+.letter-body .mark { background: rgba(143, 190, 174, 0.18); padding: 0 0.08em; border-radius: 2px; }
+.sign { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+.sign .scrawl { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.5rem; color: #fff; }
+.sign .who { font-family: var(--font-mono); font-size: 12px; color: #8fbeae; letter-spacing: 0.04em; line-height: 1.5; }
+@media (max-width: 600px) { .letter-in { padding: 0 20px; } }
+
+/* ============ AUTHORS ============ */
+.authors h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -0.025em; margin: 14px 0 10px; }
+.authors .lede { color: var(--color-muted); max-width: 38rem; margin-bottom: 38px; }
+.auth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.auth { background: var(--color-card); border: 1px solid var(--color-line); border-radius: 16px; padding: 24px; box-shadow: var(--sh-sm); transition: box-shadow 0.2s, transform 0.2s; }
+.auth:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
+.auth .mono-tile { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--color-pine); background: var(--color-pine-wash); border: 1px solid var(--color-pine-tint); margin-bottom: 16px; }
+.auth h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 4px; }
+.auth .role { font-size: 13.5px; color: var(--color-muted); margin-bottom: 12px; }
+.auth .status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
+.auth .status.confirmed { color: var(--color-pine); }
+.auth .status.tba { color: var(--color-muted); }
+.auth .status i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: block; }
+.auth-join { display: grid; place-content: center; text-align: center; background: var(--color-pine-wash); border-style: dashed; border-color: var(--color-pine-tint); }
+.auth-join p { font-size: 14px; color: var(--color-muted); max-width: 15rem; }
+@media (max-width: 900px) { .auth-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px) { .auth-grid { grid-template-columns: 1fr; } }
+
+/* ============ EMAIL CAPTURE ============ */
+.capture { background: var(--color-paper-2); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
+.capture-in { max-width: 640px; margin: 0 auto; text-align: center; padding: 0 28px; }
+.capture h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.025em; line-height: 1.02; margin: 16px 0 14px; }
+.capture p { color: var(--color-muted); font-size: 1.06rem; margin-bottom: 28px; }
+.capture form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
+.capture .fine { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-muted); margin-top: 18px; }
+.ok-msg { font-family: var(--font-mono); font-size: 14px; color: var(--color-pine); }
+@media (max-width: 600px) { .capture-in { padding: 0 20px; } }
+
+/* ============ TIERS PREVIEW ============ */
+.tiers-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
+.tiers-head h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -0.025em; margin: 12px 0 0; }
+.tiers-note { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); max-width: 22rem; text-align: right; line-height: 1.6; }
+.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.tier { background: var(--color-card); border: 1px solid var(--color-line); border-radius: 18px; padding: 30px 26px; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; }
+.tier:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
+.tier.feature { background: var(--color-pine); color: #eaf1ec; border-color: var(--color-pine); }
+.tier .t-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
+.tier .t-price { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px; }
+.tier .t-price small { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--color-muted); }
+.tier.feature .t-price small { color: #9dc4b5; }
+.tier .t-unit { font-size: 13px; color: var(--color-muted); margin-bottom: 18px; }
+.tier.feature .t-unit { color: #9dc4b5; }
+.tier .t-desc { font-size: 14.5px; color: var(--color-muted); line-height: 1.6; }
+.tier.feature .t-desc { color: #cfe0d6; }
+.tier .t-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; background: #eaf1ec; color: var(--color-pine-deep); padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; }
+@media (max-width: 820px) { .tier-grid { grid-template-columns: 1fr; } .tiers-note { text-align: left; } }
+
+/* ============ FAQ ============ */
+.faq h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -0.025em; margin-bottom: 34px; }
+.qa { border-top: 1px solid var(--color-line); }
+.qa details { border-bottom: 1px solid var(--color-line); padding: 6px 0; }
+.qa summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
+.qa summary::-webkit-details-marker { display: none; }
+.qa summary .pl { font-family: var(--font-mono); color: var(--color-pine); font-size: 1.1rem; transition: transform 0.2s var(--ease); flex: none; }
+.qa details[open] summary .pl { transform: rotate(45deg); }
+.qa .ans { padding: 0 40px 22px 0; color: var(--color-muted); font-size: 16px; line-height: 1.65; }
+@media (max-width: 600px) { .qa .ans { padding-right: 0; } }
+
+/* ============ FOOTER ============ */
+.footer { background: var(--color-ink); color: #d8d0c4; }
+.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 64px 28px 48px; }
+.foot-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
+.foot-top .logo { color: #f7f5f0; font-size: 24px; }
+.foot-top .logo b { color: #7fc8a9; }
+.foot-top .logo .dot { color: #8a8175; }
+.foot-blurb { max-width: 24rem; font-size: 14.5px; color: #9a9184; margin-top: 14px; line-height: 1.6; }
+.foot-links { display: flex; gap: 28px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em; color: #9a9184; flex-wrap: wrap; }
+.foot-links a:hover { color: #f7f5f0; }
+.colophon { padding-top: 26px; font-family: var(--font-mono); font-size: 11.5px; color: #7a7266; letter-spacing: 0.02em; line-height: 1.8; }
+@media (max-width: 600px) { .foot-in { padding: 48px 20px 40px; } }