@openbooknetwork/kitap 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Can Bascil
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,104 @@
-# Temporary Holding Version
+# Kitap
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The book under the Open Book Network sites. A book is a set of stories, a story is a run of pages, and a page is a
+text beside a picture that changes as the reader steps. Kitap reads the stories, builds a static site with a page
+per step in every language, and hands the picture to an engine: [harita](https://github.com/openbooknetwork/harita)
+draws maps, [beden](https://github.com/openbooknetwork/beden) bodies, [makina](https://github.com/openbooknetwork/makina)
+mechanisms, [hesap](https://github.com/openbooknetwork/hesap) algorithms.
+
+## A content project
+
+```
+site.yaml                       the main page, the engine, the languages, the theme, the store
+content/<story>/story.yaml      id, title, summary, span, cover, languages, and the engine's fields under its key
+content/<story>/pages/          a folder per page or group, numbered to order them
+  010-<group>/group.yaml        the group's title
+  010-<group>/010-<page>/page.yaml, text/<lang>.md
+content/<story>/shared/images/<name>-<six hex digits>/   image.yaml, the original, i18n/<lang>.yaml
+content/<story>/shared/<kind>s/<id>/                     the engine's items: battles, zones, models, ...
+content/shared/images/, content/shared/<kind>s/          what several stories share
+content/<story>/i18n/<lang>.yaml, i18n/<lang>.yaml       the translations; the default language is inline
+```
+
+```yaml
+# site.yaml
+title: Open Body Book
+engine: beden
+languages: [en, tr]
+assets: { url: https://assets.example.org/, bucket: body-assets, endpoint: https://... }
+```
+
+```yaml
+# page.yaml: the book's fields, then the engine's under its key
+title: "The aorta"
+date: "1628"                       # optional, shown above the title and in the contents
+sources: ["Gray's Anatomy, ch. 58."]
+beden:
+  look: aorta
+  parts: { highlight: [aorta] }
+```
+
+A text is Markdown. `@image <id>` on a line of its own shows an image folder, and `[word](@id)` links a word to
+something the engine shows on the page, a marker on a map or a part of a model.
+
+## Commands
+
+```
+kitap build [--strict] [--local-assets] [--only <story>] [--story <id>] [--out <dir>]
+kitap check <story> [page id ...] [--places]
+kitap dev [--story <id>] [--out <dir>] [--port <n>]
+kitap i18n <lang> [--story <id>]
+kitap image <file or url> <name> --caption <text> [--credit <text>] [--source <url>] [--story <id>]
+kitap rehash | kitap upload [--story <id>] [--dry-run] | kitap deploy [--dry-run]
+```
+
+An engine's own binary runs the same commands with its engine, `harita build` for instance, and adds its own.
+`--strict` fails on a missing translation or an object the store lacks; `--local-assets` shows the files on this
+machine before they are uploaded.
+
+## An engine
+
+An engine is a package whose default export is a module with an id and hooks. Kitap resolves `engine: <id>` of
+site.yaml to `@openbooknetwork/<id>` in the project's packages, else to `plugins/engines/<id>.mjs`.
+
+```js
+export default {
+  id: 'beden',
+  dir: PKG,                                        // the package folder, where its libraries resolve from
+  schemas: { story: StoryBody, page: PageBody },   // zod objects for the fields under the engine's key
+  ui: new URL('./i18n/', import.meta.url),         // strings laid over kitap's: hint, tab_map, map_data, ...
+  client: { script: URL, styles: URL, module: true, libraries: [[pkg, file]], imports: { three: [pkg, folder, file] } },
+  read: {
+    story(story, ctx) {},              // the story's own files; returns the state the other hooks read as ctx.state
+    folder(dir, scope, ctx) {},        // files in shared/ and in a page's folder
+    include(dir, scope, ctx) {},       // an include.yaml in the page tree: returns a page or group node, or null
+    prepare(ctx) {},                   // after every folder is read, before the pages
+    page(fields, { dir, at, own, pid, scope, core }, ctx) {}, // returns { data, links, credits }
+    finish({ story, pages, texts, images, coverImage }, ctx) {}, // returns { images, warnings, folders }
+  },
+  bundle(content, ctx) {},             // returns { data, families, credits }: data goes to the viewport under the id
+  objects(content, ctx) {},            // returns { groups: { dir: [keys] }, ... }: what the store must hold
+  make({ stories, cache, out, log }) {}, // writes each object to out/<key>, for --local-assets and upload
+  site({ root, cache, strict, log, stories, fail }) {}, // checks across the stories before the build
+  describeObjects(keys) {},            // the objects in words, for messages
+};
+```
+
+`ctx` carries the project's readers (`readYaml`, `readJson`, `library`, `resolveImage`, `translatorFor`), the
+story's translator `T`, `fail`, `attempt`, `warn`, the `scope` factory and the `storyScope`, and for an engine that
+includes pages, `walk`, `pagesIn` and `readPage`. A `links` object answers the text's `[word](@id)` links:
+`has(id)`, `attr(id)`, `missing(name, id)` and `names(lang)`.
+
+The client script sets `window.KITAP_ENGINE = host => ({ show, lang, theme, resize, escape, point, highlight })`
+and, as a module, dispatches `kitap-engine` once set. `host` carries the bundle `B`, the stage's elements under
+`el`, `here()`, `lang()`, `L`, `T`, `css`, `pref` and the shell's other helpers. The engine owns everything inside
+`el.map`, the legend and the view group; the shell owns the contents, the text, the tabs and the lightbox.
+
+The test engine in `test/engines/plain.mjs` shows the least an engine needs.
+
+## Work on it
+
+```
+npm install
+npm test
+```

package/bin/kitap.mjs

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+// kitap build | check | dev | i18n | image | rehash | upload | deploy, run from a content project folder. An engine's
+// own binary runs the same commands with its engine, and adds its own.
+import { run } from '../src/cli.mjs';
+await run(process.argv.slice(2));

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@openbooknetwork/kitap",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "The book under the Open Book Network sites: stories of pages with a text beside a picture an engine draws, built to a static site in every language",
+  "keywords": [
+    "static-site",
+    "book",
+    "timeline",
+    "i18n"
+  ],
+  "license": "MIT",
+  "author": "Can Bascil",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openbooknetwork/kitap.git"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=22.12"
+  },
+  "bin": {
+    "kitap": "bin/kitap.mjs"
+  },
+  "exports": {
+    ".": "./src/index.mjs",
+    "./schema": "./src/schema.mjs",
+    "./worker": "./src/worker.mjs",
+    "./package.json": "./package.json",
+    "./cli": "./src/cli.mjs",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "bin",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.mjs",
+    "prepublishOnly": "npm test"
+  },
+  "dependencies": {
+    "@fontsource-variable/fraunces": "^5.3.0",
+    "@fontsource-variable/public-sans": "^5.3.0",
+    "aws4fetch": "^1.0.20",
+    "js-yaml": "^4.1.0",
+    "lucide-static": "^1.49.0",
+    "marked": "^15.0.0",
+    "sharp": "^0.35.5",
+    "zod": "^4.6.5"
+  },
+  "homepage": "https://github.com/openbooknetwork/kitap#readme",
+  "bugs": {
+    "url": "https://github.com/openbooknetwork/kitap/issues"
+  }
+}

package/src/app.html

@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<!--__HEAD__-->
+<link rel="stylesheet" href="../vendor/fonts.css">
+<style>
+:root{
+  /*__FAMILY_CSS__*/
+  --display:"Fraunces",Georgia,"Times New Roman",serif;
+  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
+}
+@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ /*__FAMILY_CSS_DARK__*/ } }
+:root[data-theme="dark"]{ /*__FAMILY_CSS_DARK__*/ }
+/*__THEMES_CSS__*/
+/* one root size: 14px up to about 1500px wide, 19px from about 2600px, growing in between; everything else is in rem of it */
+html{font-size:clamp(14px, 0.4545vw + 7.2px, 19px)}
+html,body{height:100%}
+body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.5;
+  display:flex;flex-direction:column;gap:.857rem;padding-inline:1.143rem;padding-block:.857rem;box-sizing:border-box}
+*{box-sizing:border-box}
+[hidden]{display:none!important}
+h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance}
+header{display:flex;align-items:center;gap:1.143rem;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:.714rem}
+header h1{font-size:1.571rem}
+header a.back{color:var(--ink-2);text-decoration:none;font-size:.929rem;display:inline-flex;align-items:center;gap:.286rem}
+header a.back::before{content:"";width:0;height:0;border:5px solid transparent;border-inline-end:6px solid var(--ink-2)}
+header a.back:hover{color:var(--ink)}
+header a.back:focus-visible{outline:2px solid var(--accent)}
+header .note{color:var(--ink-2);font-size:.857rem}
+header .tools{margin-inline-start:auto;display:flex;align-items:center;gap:.571rem}
+header a.src{color:var(--ink-2);font-size:.857rem;text-decoration:none;display:inline-flex;align-items:center;gap:.286rem;border:1px solid var(--rule);border-radius:4px;padding:.286rem .571rem}
+header a.src svg{width:.929rem;height:.929rem}
+header a.src:hover{color:var(--ink)}
+header a.src:focus-visible{outline:2px solid var(--accent)}
+/* controls: one bar, pinned under the text on wide screens, fixed to the screen bottom on phones; 44px targets for touch */
+.ctl{display:grid;grid-template-columns:1fr auto 1fr;gap:.571rem .714rem;align-items:center;padding-top:.714rem;border-top:1px solid var(--rule);background:var(--paper)}
+.ctl button{min-height:max(3.143rem,3.15rem);background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:0 1rem;font:inherit;font-size:1.071rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.429rem}
+.ctl button svg{width:1.286rem;height:1.286rem}
+:root[dir="rtl"] :is(#prev,#next,.bc .pic .nav button) svg{transform:scaleX(-1)} /* the chevrons point the way the text reads */
+.ctl button:disabled{opacity:.35;cursor:default}
+.ctl button:focus-visible{outline:2px solid var(--accent)}
+.ctl #stepno{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:.929rem;text-align:center;white-space:nowrap}
+/* the language, beside the settings on every screen, so a reader who cannot read the current one still finds it */
+.langpick{display:inline-flex;align-items:center;gap:.143rem;background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding-inline-start:.571rem;font-size:.857rem}
+.langpick svg{width:.929rem;height:.929rem;flex:none}
+.langpick select{background:var(--panel);color:inherit;border:0;border-radius:4px;font:inherit;padding:.286rem .429rem;cursor:pointer}
+.langpick:focus-within{outline:2px solid var(--accent)}
+.langpick select:focus{outline:none}
+/* settings: the layout and the theme, in a panel under its button at the header's end on every screen */
+.prefs{position:relative}
+#settings-btn{background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:.286rem .571rem;font:inherit;font-size:.857rem;cursor:pointer;display:inline-flex;align-items:center;gap:.286rem}
+#settings-btn svg{width:.929rem;height:.929rem}
+#settings-btn:focus-visible{outline:2px solid var(--accent)}
+.settings{position:absolute;top:calc(100% + .429rem);inset-inline-end:0;z-index:25;width:min(24rem,calc(100vw - 2.286rem));display:grid;gap:.857rem;
+  background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:.857rem;box-shadow:0 4px 16px rgba(0,0,0,.25)}
+.settings[hidden]{display:none}
+.settings .group{display:grid;gap:.357rem}
+.settings .group > span{font-size:.786rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
+.settings select{width:100%;min-height:max(2.857rem,2.85rem);background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:0 .571rem;font:inherit;cursor:pointer}
+.settings select:focus-visible,.layouts button:focus-visible{outline:2px solid var(--accent)}
+.layouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.429rem}
+.layouts button{display:grid;justify-items:center;align-content:start;gap:.286rem;padding:.429rem;font:inherit;font-size:.786rem;line-height:1.25;text-align:center;
+  background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:6px;cursor:pointer}
+.layouts button svg{width:100%;height:auto;max-width:4.6rem}
+.layouts button[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
+/* the layout: the map in the middle, or the chronology and the text together on the screen's left or right edge,
+   for a large touch screen where the reader stands at one side; left and right hold in any writing direction */
+@media (min-width:901px){
+  :root[data-layout="left"] .app{grid-template-columns:clamp(220px,15vw,300px) clamp(320px,23vw,520px) minmax(0,1fr)}
+  :root[data-layout="right"] .app{grid-template-columns:minmax(0,1fr) clamp(320px,23vw,520px) clamp(220px,15vw,300px)}
+  :root[data-layout="left"] nav.pages,:root[data-layout="right"] .stage{grid-area:1/1}
+  :root[data-layout="left"] aside.story,:root[data-layout="right"] aside.story{grid-area:1/2}
+  :root[data-layout="left"] .stage,:root[data-layout="right"] nav.pages{grid-area:1/3}
+  :root:is([data-layout="left"],[data-layout="right"]) .app{direction:ltr}
+  :root[dir="rtl"]:is([data-layout="left"],[data-layout="right"]) .app > *{direction:rtl}
+}
+.app{display:grid;grid-template-columns:clamp(220px,15vw,300px) minmax(0,1fr) clamp(320px,23vw,520px);gap:1.143rem;flex:1;min-height:0}
+nav.pages{overflow:auto;min-height:0}
+.where,nav.pages .sheet-head,.ctl .tabs{display:none}
+.peek,.legend-btn{display:none}
+aside.story{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
+aside.story .text{overflow:auto;min-height:0;padding-inline-end:.286rem}
+nav.pages .toggle-all{display:block;width:auto;margin-block:0 .429rem;margin-inline:auto 0;background:none;border:1px solid var(--rule);border-radius:4px;color:var(--ink-2);font:inherit;font-size:.786rem;padding:3px .571rem;cursor:pointer}
+nav.pages .toggle-all:hover{color:var(--ink)}
+nav.pages .toggle-all:focus-visible{outline:2px solid var(--accent)}
+nav.pages summary{font-family:var(--display);font-size:.929rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:.571rem 0 2px;padding-inline-start:calc(var(--depth,0)*.857rem);cursor:pointer;list-style:none;display:flex;align-items:center;gap:.429rem}
+nav.pages summary::before{content:"";width:0;height:0;border:4px solid transparent;border-inline-start:5px solid var(--ink-2);transition:transform .15s}
+nav.pages details[open]>summary::before{transform:rotate(90deg)}
+:root[dir="rtl"] nav.pages details[open]>summary::before{transform:rotate(-90deg)}
+nav.pages summary:focus-visible{outline:2px solid var(--accent)}
+nav.pages button,nav.pages a.pg{display:block;width:100%;text-align:start;background:none;border:0;border-inline-start:2px solid transparent;color:var(--ink);text-decoration:none;
+  font:inherit;padding-block:.429rem;padding-inline:calc(.714rem + var(--depth,0)*.857rem) .714rem;cursor:pointer;line-height:1.3}
+nav.pages .pg .d{display:block;font-size:.786rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
+nav.pages .pg[aria-current="page"]{border-inline-start-color:var(--accent);background:var(--panel)}
+nav.pages button:focus-visible,nav.pages a.pg:focus-visible{outline:2px solid var(--accent)}
+.stage{position:relative;min-height:30rem;border:1px solid var(--rule);background:var(--sea);overflow:hidden}
+.map{position:absolute;inset:0;width:100%;height:100%}
+.legend{position:absolute;inset-inline-start:.714rem;bottom:.714rem;background:var(--panel);border:1px solid var(--rule);padding:.571rem .714rem;font-size:.786rem;
+  display:grid;gap:.286rem;max-width:15.714rem}
+.legend .lg{display:flex;align-items:center;gap:.429rem;background:none;border:0;border-radius:3px;padding:.143rem .214rem;margin:-.143rem -.214rem;
+  color:inherit;font:inherit;text-align:start;cursor:pointer}
+.legend .lg:hover,.legend .lg[aria-pressed="true"]{background:var(--paper-2)}
+.legend .lg:focus-visible{outline:2px solid var(--accent)}
+/* the name of the highlighted zone or route: beside the pointer, or pinned at the top of the map after a tap */
+.hl-label{position:absolute;z-index:4;pointer-events:none;background:var(--ink);color:var(--paper);font-size:.857rem;line-height:1.3;
+  padding:.286rem .571rem;border-radius:4px;max-width:18rem;box-shadow:0 1px 4px rgba(0,0,0,.3)}
+.hl-label.pinned{top:calc(.714rem + max(40px,2.857rem) + .429rem);left:50%;transform:translateX(-50%);max-width:calc(100% - 1.143rem);text-align:center} /* below the 2D | 3D switch */
+.legend i{width:1rem;height:.714rem;display:inline-block;border:1px solid var(--ink-2);flex:none}
+.legend .r{width:1rem;height:0;border:0;border-top:2px solid var(--rc);position:relative}
+.legend .r.arrow::after{content:"";position:absolute;inset-inline-end:-2px;top:-5px;border:4px solid transparent;border-inline-start:5px solid var(--rc)}
+.legend .r.dashed{border-top-style:dashed}
+.credit{position:absolute;inset-inline-end:.714rem;bottom:.714rem;background:var(--panel);border:1px solid var(--rule);padding:3px .571rem;font-size:.786rem;color:var(--ink-2);pointer-events:auto;
+  display:flex;align-items:center;gap:.571rem}
+.credit a{color:inherit}
+.credit :is(#mapdata,#othersrc){background:none;border:0;border-inline-start:1px solid var(--rule);padding:0;padding-inline-start:.571rem;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
+.credit :is(#mapdata,#othersrc) svg{display:none;width:1.143rem;height:1.143rem}
+.credit :is(#mapdata,#othersrc):focus-visible{outline:2px solid var(--accent)}
+/* the sources of the borders and the relief, opened from the credit */
+.credits{position:absolute;inset-inline-end:-1px;bottom:calc(100% + .429rem);width:max-content;max-width:min(28rem,calc(100vw - 3rem));background:var(--panel);
+  border:1px solid var(--rule);border-radius:4px;padding:.571rem .714rem;box-shadow:0 2px 10px rgba(0,0,0,.2);line-height:1.4}
+.credits h4{margin:0 0 .286rem;font-size:.786rem;letter-spacing:.06em;text-transform:uppercase}
+.credits ul{margin:0;padding-inline-start:1rem;display:grid;gap:.286rem}
+.credit #othersrc[hidden]{display:none}
+.credits .made{display:none;margin:0 0 .429rem}
+/* map tools: the 2D | 3D switch at the top of the map, joined on phones by the Legend button */
+.maptools{position:absolute;top:.714rem;inset-inline-end:.714rem;z-index:3;display:flex;gap:.429rem;align-items:flex-start}
+.view{display:flex;background:var(--panel);border:1px solid var(--rule);border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15)}
+.view button{min-width:max(44px,3.143rem);min-height:calc(max(40px,2.857rem) - 2px);padding:0 .571rem;border:0;background:none;color:var(--ink);font:inherit;font-size:.929rem;font-weight:600;cursor:pointer}
+.view button + button{border-inline-start:1px solid var(--rule)}
+.view button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
+.view button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+.fail{position:absolute;inset:0;display:grid;place-items:center;padding:1.714rem;text-align:center;color:var(--ink-2)}
+aside.story .date{font-size:.857rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-variant-numeric:tabular-nums}
+aside.story h2{font-size:1.714rem;margin:.286rem 0 .714rem;line-height:1.15}
+aside.story p{margin:0 0 .714rem;max-width:62ch}
+aside.story .start{display:inline-flex;align-items:center;gap:.286rem;margin-top:.429rem;background:var(--ink);color:var(--paper);text-decoration:none;padding:.5rem 1rem;border-radius:4px;font-weight:600}
+aside.story .start svg{width:1rem;height:1rem}
+aside.story .steps{display:flex;justify-content:space-between;gap:.857rem;margin-top:1.286rem}
+aside.story h3{font-size:.929rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:1.286rem;border-top:1px solid var(--rule);padding-top:.714rem}
+aside.story ol{padding-inline-start:1.286rem;margin:.429rem 0;color:var(--ink-2);font-size:.857rem}
+aside.story li{margin-bottom:.286rem}
+aside.story figure{margin:1rem 0;max-width:62ch}
+aside.story figure img{display:block;width:100%;border:1px solid var(--rule);cursor:zoom-in}
+aside.story figcaption{font-size:.857rem;color:var(--ink-2);margin-top:.429rem;line-height:1.4}
+/* a place the text names: pointing at it pops its marker on the map, pointing at the marker tints it */
+aside.story .place{text-decoration:underline dotted var(--c,var(--ink-2));text-decoration-thickness:1.5px;text-underline-offset:.2em;border-radius:2px;cursor:default}
+aside.story .place:hover,aside.story .place:focus-visible,aside.story .place.on{text-decoration-style:solid;background:color-mix(in srgb,var(--c,var(--accent)) 18%,transparent);outline:none}
+aside.story figcaption small{display:block;font-size:.786rem;color:var(--ink-2);opacity:.8}
+/* markers */
+.mk{display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;transform:translate(0,-50%)}
+.mk .wrap{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;transition:transform .15s}
+.mk.named .wrap{pointer-events:auto}
+/* the marker of the place the reader points at in the text: larger, above the others, with a ring in its colour */
+.mk.pop{z-index:1}
+.mk.pop .wrap{transform:scale(1.25)}
+.mk.pop .ph:hover{transform:none}
+.mk.pop .wrap>.ic:not(.badge),.mk.pop .ph{box-shadow:0 0 0 .286rem color-mix(in srgb,var(--c,var(--accent)) 40%,transparent),0 1px 4px rgba(0,0,0,.35)}
+.mk .ic{width:2rem;height:2rem;border-radius:50%;background:var(--panel);border:2px solid var(--c,var(--accent));color:var(--c,var(--accent));
+  display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
+.mk .ic svg{width:1.143rem;height:1.143rem}
+.mk.battle{pointer-events:auto;cursor:pointer}
+.mk.battle .ic{width:2.714rem;height:2.714rem;background:var(--accent);color:var(--paper);border-color:var(--paper);box-shadow:0 1px 5px rgba(0,0,0,.4)}
+.mk.battle .ic svg{width:1.571rem;height:1.571rem}
+.mk.battle b{font-size:.929rem}
+.mk.battle:hover .ic{transform:scale(1.08)}
+.mk .ph{width:max(3.143rem,3.15rem);height:max(3.143rem,3.15rem);border-radius:50%;object-fit:cover;border:2px solid var(--c,var(--accent));background:var(--panel);
+  box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:auto;cursor:zoom-in;display:block}
+.mk .ph:hover{transform:scale(1.08)}
+.mk .ph:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.mk .ic.badge{position:absolute;right:-0.429rem;bottom:-2px;width:1.429rem;height:1.429rem;border-width:1.5px;box-shadow:none}
+.mk .ic.badge svg{width:.786rem;height:.786rem}
+.mk b{font-family:var(--display);font-weight:700;font-size:.857rem;color:var(--ink);background:var(--paper);padding:0 .286rem;border-radius:2px;white-space:nowrap}
+.mk small{font-size:.714rem;color:var(--ink-2);background:var(--paper);padding:0 .286rem;border-radius:2px;white-space:nowrap}
+.maplibregl-marker{opacity:0;transition:opacity .6s}
+/* the number of a leg, when one family has more than one route on the page: on the map at the middle of the leg, and in the legend */
+.legno{min-width:1.286rem;height:1.286rem;padding:0 .214rem;border-radius:999px;display:inline-grid;place-items:center;flex:none;background:var(--rc);color:var(--paper);
+  border:2px solid var(--paper);font-size:.714rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;pointer-events:none}
+.maplibregl-marker.in{opacity:1}
+/* battle card */
+.maplibregl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none;z-index:4}
+.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}
+.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}
+.maplibregl-popup-anchor-left{flex-direction:row}
+.maplibregl-popup-anchor-right{flex-direction:row-reverse}
+.maplibregl-popup-tip{width:0;height:0;border:10px solid transparent;z-index:1;align-self:center}
+.maplibregl-popup-anchor-top .maplibregl-popup-tip,.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-top:none;border-bottom-color:var(--panel)}
+.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-bottom:none;border-top-color:var(--panel)}
+.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-left:none;border-right-color:var(--panel)}
+.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-right:none;border-left-color:var(--panel)}
+.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-start;margin-left:1rem}
+.maplibregl-popup-anchor-top-right .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-end;margin-right:1rem}
+.maplibregl-popup-content{position:relative;pointer-events:auto;background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:4px;box-shadow:0 4px 18px rgba(0,0,0,.3);padding:0;width:min(28.5rem,calc(100vw - 3.429rem))}
+.maplibregl-popup-close-button{position:absolute;inset-inline-end:.429rem;top:.429rem;width:1.857rem;height:1.857rem;border:0;border-radius:3px;background:none;color:var(--ink-2);font:18px/1 var(--body);cursor:pointer}
+.maplibregl-popup-close-button:hover{color:var(--ink);background:var(--paper-2)}
+.maplibregl-popup-close-button:focus-visible{outline:2px solid var(--accent)}
+.bc{font-size:.929rem;line-height:1.4;max-height:min(40rem,70vh);overflow:auto}
+.bc header{display:flex;gap:.714rem;align-items:center;padding-block:.857rem .714rem;padding-inline:1rem 2.571rem;border-bottom:1px solid var(--rule)}
+.bc header .ic{flex:none;width:2.143rem;height:2.143rem;border-radius:50%;background:var(--accent);color:var(--paper);display:grid;place-items:center}
+.bc header .ic svg{width:1.286rem;height:1.286rem}
+.bc header h4{font-family:var(--display);font-weight:500;font-size:1.214rem;margin:0;line-height:1.2}
+.bc header small{display:block;color:var(--ink-2);font-size:.857rem}
+.bc .result{padding:.571rem 1rem;border-bottom:1px solid var(--rule);display:flex;gap:.571rem;align-items:baseline}
+.bc .result b{font-size:.786rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
+.bc .sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-bottom:1px solid var(--rule)}
+.bc .side{padding:.714rem 1rem;border-inline-start:3px solid var(--c,var(--rule))}
+.bc .side + .side{border-top:0;box-shadow:-1px 0 0 var(--rule)}
+:root[dir="rtl"] .bc .side + .side{box-shadow:1px 0 0 var(--rule)}
+.bc .side h5{margin:0 0 .429rem;font-size:.929rem;font-weight:600}
+.bc .side dl{margin:0;display:grid;gap:.286rem}
+.bc .side dt{font-size:.786rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
+.bc .side dd{margin:0}
+.bc .side ul{margin:0;padding-inline-start:1.143rem}
+.bc .pic{margin:0;border-bottom:1px solid var(--rule)}
+.bc .pic .slide{height:15rem;background:var(--paper-2)}
+.bc .pic img{display:block;width:100%;height:100%;object-fit:contain;cursor:zoom-in}
+.bc .pic figcaption{padding:.429rem 1rem;font-size:.786rem;color:var(--ink-2);line-height:1.3;min-height:2.9em}
+.bc .pic .nav{display:flex;align-items:center;justify-content:center;gap:.714rem;padding:2px 0 .429rem;font-size:.786rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
+.bc .pic .nav button{width:max(2.571rem,2.6rem);height:max(2.571rem,2.6rem);border:1px solid var(--rule);border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
+.bc .pic .nav button svg{width:.929rem;height:.929rem}
+.bc .pic .nav button:hover{background:var(--paper-2)}
+.bc .pic .nav button:focus-visible{outline:2px solid var(--accent)}
+.bc footer{display:flex;justify-content:flex-end;padding:.571rem 1rem}
+.bc footer a{color:var(--ink-2);font-size:.857rem;display:inline-flex;gap:.286rem;align-items:center;text-decoration:none}
+.bc footer a svg{width:.929rem;height:.929rem}
+.bc footer a:hover{color:var(--ink)}
+@media (max-width:640px){ .bc .sides{grid-template-columns:1fr} .bc .side + .side{box-shadow:none;border-top:1px solid var(--rule)} }
+/* lightbox */
+.lightbox{position:absolute;inset:0;background:rgba(20,18,14,.78);display:grid;place-items:center;padding:1.714rem;z-index:5}
+.lightbox figure{margin:0;max-width:min(45.714rem,100%);max-height:100%;display:flex;flex-direction:column;gap:.571rem}
+.lightbox img{max-width:100%;max-height:70vh;object-fit:contain;border:4px solid var(--panel);background:var(--panel)}
+.lightbox figcaption{color:#efe9da;font-size:.929rem;line-height:1.4}
+.lightbox figcaption small{display:block;color:#b8b09c;font-size:.786rem}
+.lightbox button{position:absolute;top:.714rem;inset-inline-end:.714rem;background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:4px;padding:.286rem .714rem;font:inherit;cursor:pointer}
+.lightbox button:focus-visible{outline:2px solid var(--accent)}
+/* minimal maplibre css */
+.maplibregl-map{font:12px/20px sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}
+.maplibregl-canvas{position:absolute;left:0;top:0}
+.maplibregl-canvas-container.maplibregl-interactive{cursor:grab;user-select:none}
+.maplibregl-canvas-container.maplibregl-interactive:active{cursor:grabbing}
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}
+.maplibregl-marker{position:absolute;top:0;left:0;will-change:transform}
+.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{display:none}
+@media (max-width:900px){
+  /* one screen, no page scroll: header, where-you-are line, then the map or the text, then the bar */
+  html,body{height:100%}
+  body{height:100dvh;overflow:hidden;padding-bottom:calc(7.1rem + env(safe-area-inset-bottom, 0px))}
+  header .note{display:none}
+  .app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);min-height:0}
+  .stage{grid-row:2;grid-column:1;min-height:0}
+  aside.story{display:contents}
+  aside.story .text{grid-row:2;grid-column:1;z-index:2;background:var(--paper);overflow:auto;padding:.571rem .143rem 1.143rem}
+  body[data-tab="map"] aside.story .text{display:none}
+  /* in the text view the map's own overlays step aside; they sit above the text in the stacking order otherwise */
+  body[data-tab="text"] :is(.peek,.maptools,.legend,.credit,.maplibregl-popup,.hl-label){display:none}
+  .hl-label.pinned{top:calc(.571rem + max(40px,2.857rem) + .429rem)} /* below the map tools and the credit */
+  /* the peek card: the first two lines of the page's text over the bottom of the map; a tap opens the text */
+  .peek{display:block;position:absolute;inset-inline:.571rem;bottom:.571rem;z-index:3;background:var(--panel);border:1px solid var(--rule);border-radius:8px;
+    box-shadow:0 2px 10px rgba(0,0,0,.25);padding-block:.714rem;padding-inline:.857rem 2.857rem;cursor:pointer}
+  .peek[hidden]{display:none}
+  /* the text and the map take turns, so a place reads as plain text */
+  aside.story .place,aside.story .place:is(:hover,:focus-visible,.on){text-decoration:none;background:none}
+  .peek p{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.45}
+  .peek .more{display:inline-block;margin-top:.286rem;color:var(--accent);font-weight:600;font-size:.929rem}
+  .peek .close{position:absolute;top:.286rem;inset-inline-end:.286rem;width:max(44px,3.143rem);height:max(44px,3.143rem);border:0;background:none;color:var(--ink-2);font-size:1.429rem;line-height:1;cursor:pointer}
+  .peek:focus-visible,.peek .close:focus-visible{outline:2px solid var(--accent)}
+  /* the legend folds into a button at the top of the map with the 2D | 3D switch beside it; the credit shrinks to a button */
+  .maptools{top:.571rem;inset-inline:.571rem auto}
+  .legend-btn{display:inline-flex;min-height:max(40px,2.857rem);align-items:center;padding:0 .857rem;
+    background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:6px;font:inherit;font-size:.929rem;cursor:pointer}
+  .legend-btn[hidden]{display:none}
+  .legend{top:calc(.571rem + max(40px,2.857rem) + .429rem);bottom:auto;inset-inline-start:.571rem;z-index:3;max-width:calc(100% - 1.143rem)}
+  body:not(.legend-open) .legend{display:none}
+  .credit{top:.571rem;bottom:auto;inset-inline-end:.571rem;padding:0;border:0;background:none}
+  .credit #made{display:none}
+  .credit :is(#mapdata,#othersrc){display:grid;place-items:center;width:max(44px,3.143rem);height:max(40px,2.857rem);padding:0;background:var(--panel);border:1px solid var(--rule);border-radius:6px;color:var(--ink-2)}
+  .credit :is(#mapdata,#othersrc) svg{display:block} .credit :is(#mapdata,#othersrc) span{display:none}
+  .credits{top:calc(100% + .429rem);bottom:auto;inset-inline-end:0}
+  .credits .made{display:block}
+  .lightbox{position:fixed;z-index:30}
+  /* the bar: Prev, the Map | Text switch, Next; then the page count. A phone has one layout. */
+  .ctl{grid-template-areas:"prev tabs next" ". no .";grid-template-columns:1fr auto 1fr}
+  .ctl #prev{grid-area:prev} .ctl #next{grid-area:next} .ctl #stepno{grid-area:no}
+  .settings .layout-group{display:none}
+  .ctl .tabs{grid-area:tabs;display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
+  .ctl .tabs button{border:0;border-radius:0;min-width:4.6rem;padding:0 .714rem}
+  .ctl .tabs button + button{border-inline-start:1px solid var(--rule)}
+  .ctl .tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
+  .ctl{position:fixed;inset-inline:0;bottom:0;z-index:6;padding:.571rem 1.143rem calc(.571rem + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--rule);box-shadow:0 -2px 10px rgba(0,0,0,.12)}
+  /* the chronology gives way to one line: where in the story you are, and a button for the full contents */
+  .where{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.143rem .857rem;align-items:center;padding-bottom:.571rem;border-bottom:1px solid var(--rule)}
+  .where .crumbs{grid-column:1;font-size:.786rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+  .where .here{grid-column:1;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .where .here small{font-weight:400;color:var(--ink-2);margin-inline-end:.429rem;font-variant-numeric:tabular-nums}
+  .where button{grid-column:2;grid-row:1/3;min-height:max(44px,3.143rem);background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:0 .857rem;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.429rem}
+  .where button svg{width:1.143rem;height:1.143rem}
+  .where button:focus-visible{outline:2px solid var(--accent)}
+  nav.pages{display:none}
+  body.sheet{overflow:hidden}
+  body.sheet nav.pages{display:block;position:fixed;inset:0;z-index:20;background:var(--paper);overflow:auto;
+    padding:calc(.857rem + env(safe-area-inset-top, 0px)) 1.143rem calc(1.143rem + env(safe-area-inset-bottom, 0px))}
+  body.sheet nav.pages .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:.857rem;margin-bottom:.571rem;
+    position:sticky;top:calc(-.857rem - env(safe-area-inset-top, 0px));z-index:1;background:var(--paper);padding-block:.571rem;border-bottom:1px solid var(--rule)} /* title and Close stay put while the list scrolls */
+  nav.pages .sheet-head h2{font-size:1.429rem}
+  nav.pages .sheet-close{width:auto;flex:none;text-align:center;min-height:max(44px,3.143rem);background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:0 .857rem;font:inherit;cursor:pointer}
+  nav.pages button,nav.pages a.pg{min-height:max(44px,3.143rem)}
+}
+@media (prefers-reduced-motion: reduce){ *{transition:none!important} .mk.pop .wrap{transform:none} }
+</style>
+<!-- the saved layout before the first paint, so the page does not move once the script runs -->
+<script>try { const l = localStorage.getItem('layout'); if (l === 'left' || l === 'right') document.documentElement.dataset.layout = l; } catch {}</script>
+</head>
+<body>
+
+<header>
+  <a class="back" id="back" href="../"></a>
+  <h1 id="title"></h1>
+  <span class="note" id="hint"></span>
+  <div class="tools">
+    <a class="src" id="src" target="_blank" rel="noopener" hidden></a>
+    <label class="langpick" id="langpick"><span id="lang-icon" aria-hidden="true"></span><select id="lang"></select></label>
+    <div class="prefs">
+      <button type="button" id="settings-btn" aria-expanded="false" aria-controls="settings"></button>
+      <div class="settings" id="settings" hidden>
+        <div class="group layout-group"><span id="layout-label"></span><div class="layouts" id="layouts" role="radiogroup"></div></div>
+        <label class="group"><span id="theme-label"></span><select id="theme"></select></label>
+      </div>
+    </div>
+  </div>
+</header>
+
+<main class="app">
+  <div class="where" id="where"><div class="crumbs" id="crumbs"></div><div class="here" id="here"></div><button type="button" id="contents"></button></div>
+  <nav class="pages" id="nav"></nav>
+  <section class="stage">
+    <div id="map" class="map"></div>
+    <div class="maptools"><button type="button" class="legend-btn" id="legend-btn"></button><div class="view" id="view" role="group"><button type="button" data-view="2d" aria-pressed="true"></button><button type="button" data-view="3d" aria-pressed="false"></button></div></div>
+    <div class="legend" id="legend"></div>
+    <div class="hl-label" id="hl-label" hidden></div>
+    <div class="credit" id="credit"><span id="made"></span><button type="button" id="mapdata" aria-expanded="false" aria-controls="credits"></button><div class="credits" id="credits" hidden></div><button type="button" id="othersrc" aria-expanded="false" aria-controls="othercredits" hidden></button><div class="credits" id="othercredits" hidden></div></div>
+    <div class="peek" id="peek" role="button" tabindex="0"><p id="peek-text"></p><span class="more" id="peek-more"></span><button type="button" class="close" id="peek-close">×</button></div>
+    <div class="lightbox" id="lightbox" hidden>
+      <figure><img id="lb-img" alt=""><figcaption id="lb-cap"></figcaption></figure>
+      <button type="button" id="lb-close"></button>
+    </div>
+  </section>
+  <aside class="story">
+    <div class="text" id="story"></div>
+    <footer class="ctl">
+      <button id="prev" type="button"></button>
+      <span id="stepno"></span>
+      <div class="tabs" role="tablist"><button type="button" role="tab" id="tab-map"></button><button type="button" role="tab" id="tab-text"></button></div>
+      <button id="next" type="button"></button>
+    </footer>
+  </aside>
+</main>
+
+
+<!--__SCRIPTS__-->
+<script>const ROUTE = null;</script>
+<script src="story.js"></script>
+<script src="../kitap.js"></script>
+</body>
+</html>