4 files changed, 38 insertions, 8 deletions
diff --git a/docs/site/casts/casts.toml b/docs/site/casts/casts.toml
index 5771e6be..9f0dd1a5 100644
--- a/docs/site/casts/casts.toml
+++ b/docs/site/casts/casts.toml
@@ -7,7 +7,7 @@
 [[cast]]
 name = "live-text"
 title = "Live text"
-caption = "Helix keys edit; middle-click runs make; right-click the error opens its line."
+caption = "Rename a variable with helix keys, middle-click make, right-click the error."
 cols = 100
 rows = 30
 ready = true
diff --git a/docs/site/media/clips.toml b/docs/site/media/clips.toml
index adb97762..ca3002d0 100644
--- a/docs/site/media/clips.toml
+++ b/docs/site/media/clips.toml
@@ -1,7 +1,7 @@
 # The landing page's recordings, in the order shown. For each clip the
 # site ships media/<name>.webm and media/<name>.mp4, with media/<name>.png
-# as the poster; the first ready clip's poster is also the landing's
-# hero image. While `ready` is false the clip shows placeholder.svg and
+# as the poster. `landing = false` keeps a clip off the landing (the
+# terminal casts show the same) while its files stay for the chapters. While `ready` is false the clip shows placeholder.svg and
 # no video, so the site builds before a recording exists.
 
 [[clip]]
@@ -28,10 +28,11 @@ ready = true
 name = "terminals-are-panes"
 caption = "A terminal is a pane: Ctrl-b, then move over its output."
 ready = true
+landing = false
 
 [[clip]]
 name = "scripting-over-9p"
-caption = "A script drives the session through its virtual filesystem (9P)."
+caption = "A shell under 9ns, where the session is a directory: ls, cat, echo."
 ready = true
 
 [[clip]]
diff --git a/docs/site/site.css b/docs/site/site.css
index 7d6d0660..6e4a2e93 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -150,8 +150,8 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 @media (max-width:600px) { .cmd pre { white-space:pre-wrap; overflow-wrap:anywhere; } }
 
 /* terminal recordings: the first across the page, the rest two by two */
-.casts { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:18px; margin:1em 0 1.4em; }
-.casts .first { grid-column:1 / -1; }
+/* one per row at the page's full width: a terminal at half width is unreadable */
+.casts { display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; margin:1em 0 1.4em; }
 .cast .player { background:#121314; }
 .cast figcaption strong { color:var(--leaf); }
 .content h2.shelf { font-size:26px; margin:1.2em 0 .4em; }
@@ -191,3 +191,19 @@ main[data-page="builtins"] .content h4 + p { margin-top:0; }
   /* under the name: its prefix is --cols cells of the 13px mono font */
   .fstree .desc { display:block; padding-left:calc(var(--cols) * 7.8px); font-size:15px; margin-bottom:.15em; }
 }
+
+/* what's in it: a row of linked chips under the lead */
+.inside { display:flex; flex-wrap:wrap; gap:8px 10px; margin:.2em 0 1.1em; padding:0; list-style:none; }
+.inside a { display:inline-block; padding:2px 10px; font:17px var(--pixel); color:var(--leaf); background:var(--tag); border:2px solid var(--leaf); text-decoration:none; }
+.inside a:hover { color:var(--amber); border-color:var(--amber); }
+
+/* a screenshot with numbered pins, their labels listed beside it */
+.annotated { margin:1.2em 0 1.6em; display:grid; grid-template-columns:minmax(0, 3fr) minmax(12em, 2fr); gap:14px 22px; align-items:center; }
+.annotated .frame { position:relative; border:2px solid var(--leaf); box-shadow:5px 5px 0 var(--shadow); }
+.annotated img { display:block; width:100%; height:auto; }
+.annotated .pin { position:absolute; transform:translate(-50%, -50%); width:1.5em; height:1.5em; border-radius:50%;
+  display:flex; align-items:center; justify-content:center; font:700 14px var(--mono); background:var(--amber); color:#1b120a; box-shadow:0 0 0 2px var(--panel); }
+.annotated .pins { margin:0; padding-left:1.8em; font-size:18px; }
+.annotated .pins li { margin:.25em 0; }
+.annotated .pins li::marker { font:700 15px var(--mono); color:var(--amber); }
+@media (max-width:600px) { .annotated { grid-template-columns:minmax(0, 1fr); } }
diff --git a/docs/site/site.typ b/docs/site/site.typ
index e0cd9d4d..787844f5 100644
--- a/docs/site/site.typ
+++ b/docs/site/site.typ
@@ -26,6 +26,16 @@
     Bell Labs: #link("https://9p.io/sys/doc/acme/acme.html")[acme]'s text as
     the interface, and the 9P protocol.],
   status: [Linux; macOS in progress. Version #version.],
+  // what's in it: a word each, linked to where it is told; no prose
+  inside: (
+    ("Terminals", "guide.html#terminals"),
+    ("PDFs", "builtins.html#builtin-PdfSections"),
+    ("Images", "reference.html#panes"),
+    ("Language servers", "setup.html#language-servers"),
+    ("Diff review", "guide.html#reviewing-diffs"),
+    ("Scripting", "scripting.html"),
+    ("Themes", "themes.html"),
+  ),
   terminal: [In a terminal],
   window: [In its own window],
   start: (
@@ -152,7 +162,7 @@
   // "</" may not appear inside a script element
   let data = json.encode(list, pretty: false).replace("</", "<\\/")
   el("script", (src: "player/asciinema-player.min.js"))[]
-  el("script")[#("for (const c of " + data + ") { const el = document.getElementById(c.id); el.player = AsciinemaPlayer.create({data: c.data}, el, {cols: c.cols, rows: c.rows, autoPlay: true, loop: true, fit: 'width'}); }")]
+  el("script")[#("for (const c of " + data + ") { const el = document.getElementById(c.id); el.player = AsciinemaPlayer.create({data: c.data}, el, {cols: c.cols, rows: c.rows, autoPlay: true, loop: true, fit: 'width', poster: 'npt:0:2'}); }")]
 }
 
 /// Plays a recording while it is on screen and pauses it once it leaves.
@@ -173,6 +183,9 @@
 #document(href("index"), title: "pardes", shell("index", "pardes")[
   #el("h1", (class: "masthead"))[pardes]
   #el("p", (class: "lead"))[#landing.lead]
+  #el("ul", (class: "inside", "aria-label": "What's in it"))[
+    #for (name, to) in landing.inside { el("li")[#el("a", (href: to))[#name]] }
+  ]
   #el("p", (class: "credit"))[#landing.credit]
   #el("p", (class: "runs"))[#landing.status]
   #el("div", (class: "start"))[
@@ -189,7 +202,7 @@
   #el("div", (class: "casts"))[#for (i, c) in casts.enumerate() { cast(c, i) }]
   #el("h2", (class: "shelf"))[#landing.window]
   #el("div", (class: "clips"))[
-    #for c in clips {
+    #for c in clips.filter(c => c.at("landing", default: true)) {
       el("figure", (class: "clip"))[
         #if c.ready { video(c) } else { placeholder }
         #el("figcaption")[#c.caption]