1 files changed, 16 insertions, 1 deletions
diff --git a/docs/site/site.css b/docs/site/site.css
index 2435841b..bab762d0 100644
--- a/docs/site/site.css
+++ b/docs/site/site.css
@@ -107,7 +107,7 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 .toc ol { padding:8px 14px 10px 2.4em; columns:2 14em; font-size:18px; }
 .masthead { font:clamp(56px, 12vw, 104px)/1 var(--pixel) !important; text-shadow:5px 5px 0 var(--amber) !important; margin:.1em 0 .1em !important; }
 .pitch { font-style:italic; font-size:22px; color:var(--dim); margin-top:0; }
-.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:18px; margin:1.4em 0; }
+.clips { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:18px; margin:1em 0 1.4em; }
 .clip { margin:0; border:2px solid var(--leaf); background:var(--deep); box-shadow:5px 5px 0 var(--shadow); }
 .clip video, .clip img { display:block; width:100%; height:auto; aspect-ratio:960/700; background:var(--deep); }
 .clip figcaption { padding:8px 12px; font-size:18px; color:var(--dim); border-top:2px solid var(--leaf); }
@@ -142,3 +142,18 @@ body { margin:0; min-height:100vh; background:var(--field) radial-gradient(color
 }
 /* a shell line wraps on a phone rather than hide its end */
 @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; }
+.cast .player { background:#121314; }
+.cast figcaption strong { color:var(--leaf); }
+.content h2.shelf { font-size:26px; margin:1.2em 0 .4em; }
+
+/* the Themes page gallery: thumbnails that open the full picture */
+.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap:12px; margin:1em 0 1.6em; }
+.shot { margin:0; border:2px solid var(--leaf); background:var(--deep); box-shadow:4px 4px 0 var(--shadow); }
+.shot img { display:block; width:100%; height:auto; aspect-ratio:960/700; object-fit:cover; }
+.shot figcaption { padding:3px 8px; font:16px var(--pixel); color:var(--dim); border-top:2px solid var(--leaf); }
+.shot.light figcaption::after { content:" · light"; color:var(--amber); }
+.shot .pending { aspect-ratio:960/700; display:flex; align-items:center; justify-content:center; font:15px var(--pixel); color:var(--dim); }