mosaic-headless 1.5.1 → 1.7.0

package/sites/_moksa.py

@@ -323,6 +323,17 @@ STACK = [
 
 # the clause index, fixed to the left margin. One entry per section, and the entry
 # lights up while its section is on screen - see the named view timelines below.
+# What the boot screen reports while it works. Real steps in this page's own
+# construction rather than decoration: the faces it loads, the tokens it resolves,
+# the breakpoints it compiles, the clauses it mounts.
+BOOT_LOG = [
+    "LOADING TYPEFACES — IBM PLEX MONO / SPACE GROTESK / NOTO SANS TC",
+    "RESOLVING DESIGN TOKENS — 8 COLLECTION VARIABLES",
+    "COMPILING BREAKPOINTS — 1440 / 1079 / 767",
+    "MOUNTING CLAUSES §01–§07",
+]
+RULER_TICKS = 13
+
 CLAUSES = [
     ("01", "SERVICES", "#services", "--mk-s1"),
     ("02", "PROCESS", "#process", "--mk-s2"),
@@ -346,6 +357,15 @@ REVEALS = [
     ("mk-work-0", 1), ("mk-work-1", 1), ("mk-work-2", 2), ("mk-work-3", 2),
     ("mk-work-4", 3), ("mk-work-5", 3), ("mk-work-6", 4), ("mk-work-7", 4),
     ("mk-work-8", 5),
+    ("mk-plate-num", 0), ("mk-plate-t", 1),
+    ("mk-mx-head", 0), ("mk-mx-cols", 1),
+    ("mk-mx-r-0", 1), ("mk-mx-r-1", 2), ("mk-mx-r-2", 2), ("mk-mx-r-3", 3),
+    ("mk-mx-r-4", 3), ("mk-mx-r-5", 4), ("mk-mx-r-6", 4), ("mk-mx-r-7", 5),
+    ("mk-fig2-head", 0), ("mk-fl-a-0", 1), ("mk-fl-b-0", 2), ("mk-fl-c-0", 3),
+    ("mk-fl-a-1", 2), ("mk-fl-b-1", 3), ("mk-fl-c-1", 4),
+    ("mk-fl-a-2", 3), ("mk-fl-b-2", 4), ("mk-fl-c-2", 5),
+    ("mk-spec2-head", 0), ("mk-spec2-r-0", 1), ("mk-spec2-r-1", 2),
+    ("mk-spec2-r-2", 3), ("mk-spec2-r-3", 4),
     ("mk-stack-head", 0), ("mk-stack-0", 1), ("mk-stack-1", 2), ("mk-stack-2", 3),
     ("mk-stack-3", 4), ("mk-stack-4", 5),
     ("mk-prod-head", 0), ("mk-prod-0", 1), ("mk-prod-1", 2),
@@ -376,10 +396,17 @@ def motion_css():
                           for i, (_g, items) in enumerate(STACK)
                           for j in range(len(items)))
     marks = ",".join("#mk-mark-%d" % i for i in range(4))
-    # the boot list lights one clause at a time
+    # the boot sequence, phase by phase: the clauses report in, the log writes
+    # itself out a line at a time, and the ruler ticks up the left margin
     boot_stagger = "\n".join(
-        "  #mk-boot-c%d{animation-delay:%dms}" % (i, 260 + i * 120)
+        "  #mk-boot-c%d{animation-delay:%dms}" % (i, 700 + i * 200)
         for i in range(len(CLAUSES)))
+    log_stagger = "\n".join(
+        "  #mk-boot-l%d{animation-delay:%dms}" % (i, 550 + i * 380)
+        for i in range(len(BOOT_LOG)))
+    ruler_stagger = "\n".join(
+        "  #mk-boot-t%d{animation-delay:%dms}" % (i, 120 + i * 26)
+        for i in range(RULER_TICKS))
     # a named view timeline per section, declared on the section and consumed by its
     # index entry - `timeline-scope` on #mk-doc is what lets the name cross between
     # two elements that are not ancestor and descendant
@@ -472,6 +499,7 @@ def motion_css():
         # the blinking caret under the headline: the one piece of ornament, and it
         # belongs to a page set in a terminal face
         "#mk-caret{width:13px;height:19px;background:rgb(255,90,54)}",
+        "#mk-plate-dash{width:34px;height:1px;background:rgb(191,68,40)}",
         "#mk-mast-rule,#mk-spec-rule{height:1px;background:" + RULE + ";"
         "transform:scaleX(0);transform-origin:0 50%}",
         digits + "{display:block;transform:translateY(105%)}",
@@ -559,23 +587,35 @@ def motion_css():
         "@keyframes mk-boot-scan{from{transform:translateY(0)}"
         "to{transform:translateY(100vh)}}",
         "@keyframes mk-boot-fade{from{opacity:0}to{opacity:1}}",
+        # a log line arriving: clipped from the left, like a terminal writing it
+        "@keyframes mk-boot-type{from{clip-path:inset(0 100% 0 0);opacity:.3}"
+        "to{clip-path:inset(0 0 0 0);opacity:1}}",
+        "@keyframes mk-boot-caret{0%,49%{opacity:1}50%,99%{opacity:0}}",
+        # the corner crosshairs draw themselves in
+        "@keyframes mk-boot-cross{from{opacity:0;transform:scale(.55)}"
+        "to{opacity:1;transform:scale(1)}}",
+        "@keyframes mk-boot-tick{from{opacity:0;transform:scaleX(.2)}"
+        "to{opacity:1;transform:scaleX(1)}}",
+        # the stamp lands hard, the way a stamp does
+        "@keyframes mk-boot-stamp{0%{opacity:0;transform:scale(1.35)}"
+        "55%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:scale(1)}}",
 
         # ── motion, all of it opt-out-able ───────────────────────────────────
         "@media (prefers-reduced-motion:no-preference){",
         "  #mk-boot{display:grid;position:fixed;inset:0;z-index:999;"
         "background:rgb(250,250,247);align-content:center;justify-items:center;"
-        "row-gap:22px;overflow:hidden;"
-        "animation:mk-boot-out .5s cubic-bezier(.7,0,.3,1) 1.55s forwards}",
+        "row-gap:20px;overflow:hidden;"
+        "animation:mk-boot-out .62s cubic-bezier(.7,0,.3,1) 2.95s forwards}",
         "  #mk-boot-head,#mk-boot-foot{position:absolute;left:40px;right:40px;"
         "display:flex;justify-content:space-between;font-family:" + MONO + ";"
         "font-size:10px;letter-spacing:.2em;color:rgb(107,109,113);"
         "animation:mk-boot-fade .4s ease both}",
         "  #mk-boot-head{top:34px}",
         "  #mk-boot-foot{bottom:30px;animation-delay:.1s}",
-        "  #mk-boot-num{font-family:" + MONO + ";font-size:96px;font-weight:500;"
+        "  #mk-boot-num{font-family:" + MONO + ";font-size:104px;font-weight:500;"
         "line-height:1;letter-spacing:-.04em;color:rgb(22,24,28);"
         "font-variant-numeric:tabular-nums;min-width:3ch;text-align:right;"
-        "animation:mk-count 1.2s cubic-bezier(.3,0,0,1) .12s both}",
+        "animation:mk-count 2.05s linear .3s both}",
         '  #mk-boot-num::after{counter-reset:n var(--mk-n);content:counter(n)}',
         "  #mk-boot-row{display:flex;align-items:flex-end;column-gap:8px;"
         "line-height:1}",
@@ -588,12 +628,17 @@ def motion_css():
         "background:rgba(22,24,28,.14);position:relative}",
         "  #mk-boot-fill{position:absolute;inset:0;background:rgb(255,90,54);"
         "transform-origin:0 50%;"
-        "animation:mk-boot-fill 1.2s cubic-bezier(.3,0,0,1) .12s both}",
+        "animation:mk-boot-fill 2.05s linear .3s both}",
+        # ticks along the rule, so the bar reads as a measure rather than a bar
+        '  #mk-boot-track::after{content:"";position:absolute;left:0;right:0;'
+        "top:-3px;height:3px;background:repeating-linear-gradient(90deg,"
+        "rgba(22,24,28,.22) 0 1px,transparent 1px 42px);"
+        "animation:mk-boot-fade .5s ease .15s both}",
         "  #mk-boot-list{display:flex;column-gap:18px;row-gap:8px;"
         "flex-wrap:wrap;justify-content:center;font-family:" + MONO + ";"
         "font-size:10px;letter-spacing:.18em}",
         "  #mk-boot-list>*{opacity:.14;"
-        "animation:mk-boot-line .5s ease both}",
+        "animation:mk-boot-line .62s ease both}",
         boot_stagger,
         "  #mk-boot::before{content:\"\";position:absolute;inset:0;"
         "background:"
@@ -604,22 +649,59 @@ def motion_css():
         "animation:mk-boot-fade .5s ease both}",
         "  #mk-boot-scan{position:absolute;left:0;right:0;top:0;height:1px;"
         "background:linear-gradient(90deg,rgba(255,90,54,0),rgba(255,90,54,.55),"
-        "rgba(255,90,54,0));animation:mk-boot-scan 1.6s linear .1s both}",
+        "rgba(255,90,54,0));"
+        "animation:mk-boot-scan 1.45s linear .15s 2 both}",
+
+        # corner crosshairs: the veil is a plate, and a plate has trim marks
+        "  #mk-boot .mk-x,#mk-boot-x0,#mk-boot-x1,#mk-boot-x2,#mk-boot-x3{"
+        "position:absolute;width:14px;height:14px;"
+        "animation:mk-boot-cross .5s cubic-bezier(.16,1,.3,1) both}",
+        "  #mk-boot-x0{top:64px;left:40px;border-left:1px solid " + RULE_INK
+        + ";border-top:1px solid " + RULE_INK + ";animation-delay:.08s}",
+        "  #mk-boot-x1{top:64px;right:40px;border-right:1px solid " + RULE_INK
+        + ";border-top:1px solid " + RULE_INK + ";animation-delay:.16s}",
+        "  #mk-boot-x2{bottom:56px;left:40px;border-left:1px solid " + RULE_INK
+        + ";border-bottom:1px solid " + RULE_INK + ";animation-delay:.24s}",
+        "  #mk-boot-x3{bottom:56px;right:40px;border-right:1px solid " + RULE_INK
+        + ";border-bottom:1px solid " + RULE_INK + ";animation-delay:.32s}",
+
+        # a ruler down the left margin, because this is a measured object
+        "  #mk-boot-ruler{position:absolute;left:40px;top:50%;"
+        "transform:translateY(-50%);display:grid;row-gap:9px}",
+        "  #mk-boot-ruler>*{width:9px;height:1px;background:" + RULE_INK + ";"
+        "transform-origin:0 50%;animation:mk-boot-tick .3s ease both}",
+        ruler_stagger,
+        "  @media (max-width:1023px){#mk-boot-ruler{display:none}}",
+
+        # the log: four lines, each written out left to right
+        "  #mk-boot-log{display:grid;row-gap:7px;justify-items:start;"
+        "font-family:" + MONO + ";font-size:10px;letter-spacing:.16em;"
+        "color:rgb(107,109,113);min-height:64px}",
+        "  #mk-boot-log>*{animation:mk-boot-type .42s steps(24,end) both}",
+        log_stagger,
+        "  #mk-boot-cursor{width:7px;height:11px;background:rgb(255,90,54);"
+        "animation:mk-boot-caret .62s steps(1,end) .5s infinite}",
+
+        # the stamp that says the document is complete
+        "  #mk-boot-ready{border:1px solid rgb(191,68,40);padding:5px 12px;"
+        "font-family:" + MONO + ";font-size:10px;letter-spacing:.24em;"
+        "color:rgb(191,68,40);opacity:0;"
+        "animation:mk-boot-stamp .42s cubic-bezier(.16,1,.3,1) 2.42s both}",
         "  @media (max-width:767px){#mk-boot-num{font-size:62px}"
         "#mk-boot-head,#mk-boot-foot{left:18px;right:18px}}",
         "  #mk-hl1-mask>*,#mk-hl2-mask>*{transform:translateY(112%);"
         "animation:mk-linein .95s cubic-bezier(.16,1,.3,1) forwards}",
-        "  #mk-hl1-mask>*{animation-delay:1.72s}",
-        "  #mk-hl2-mask>*{animation-delay:1.84s}",
+        "  #mk-hl1-mask>*{animation-delay:3.16s}",
+        "  #mk-hl2-mask>*{animation-delay:3.28s}",
         "  #mk-mast-meta,#mk-mast-lede,#mk-mast-cta{opacity:0;"
         "animation:mk-softin .8s cubic-bezier(.16,1,.3,1) forwards}",
-        "  #mk-mast-meta{animation-delay:1.62s}",
-        "  #mk-mast-lede{animation-delay:2.10s}",
-        "  #mk-mast-cta{animation-delay:2.22s}",
+        "  #mk-mast-meta{animation-delay:3.06s}",
+        "  #mk-mast-lede{animation-delay:3.54s}",
+        "  #mk-mast-cta{animation-delay:3.66s}",
         "  #mk-caret{animation:mk-caret 1.15s steps(1,end) infinite;"
-        "animation-delay:2.4s}",
+        "animation-delay:3.84s}",
         "  #mk-mast-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;"
-        "animation-delay:1.96s}",
+        "animation-delay:3.40s}",
         "  #mk-spec-rule{animation:mk-drawx .9s cubic-bezier(.2,.7,.3,1) forwards;"
         "animation-delay:.9s}",
         "  #mk-cue{opacity:0;animation:mk-softin .8s ease forwards;"
@@ -1261,6 +1343,245 @@ CONTACT = section("contact", [wrap("mk-contact-in", [
         ]),
 ])])
 
+# ── the capability matrix ─────────────────────────────────────────────────────
+# The page could tell you what the studio does; a specification SHOWS you, in a form
+# you can read across. Filled, half and hollow marks carry the whole answer without
+# a sentence, and the density is the point - this is the one block on the page that
+# rewards being read as a grid rather than as a line.
+MATRIX_COLS = ["網站", "電商", "自動化"]
+MATRIX = [
+    ("客製化設計", "BESPOKE DESIGN", "●", "●", "◐"),
+    ("RWD 三段點", "RESPONSIVE", "●", "●", "○"),
+    ("SEO 結構化資料", "STRUCTURED DATA", "●", "●", "○"),
+    ("金流／物流串接", "PAYMENT / LOGISTICS", "○", "●", "◐"),
+    ("會員與訂單系統", "ACCOUNTS / ORDERS", "○", "●", "◐"),
+    ("n8n 流程自動化", "WORKFLOW AUTOMATION", "◐", "◐", "●"),
+    ("AI 內容與判讀", "AI CONTENT / REASONING", "◐", "◐", "●"),
+    ("上線後維運", "MAINTENANCE", "●", "●", "●"),
+]
+
+
+def mark(sym, i, j):
+    """One cell of the matrix. The symbol carries the meaning; the colour only
+    reinforces it, so it still reads if the colour is gone."""
+    colour = "--mk-ink" if sym == "●" else (
+        "--mk-accent-ink" if sym == "◐" else "--mk-faint")
+    return box("mk-mx-c-%d-%d" % (i, j),
+               {"display": "flex", "justifyContent": "center"},
+               [T("p", sym, color={"token": colour}, fontSize="13px",
+                  fontFamily=MONO, lineHeight="1")])
+
+
+MATRIX_SEC = section("matrix", [wrap("mk-mx-in", [
+    box("mk-mx-pad", {"paddingTop": "78px", "paddingBottom": "78px"},
+        _m={"paddingTop": "52px", "paddingBottom": "52px"},
+        children=[
+            box("mk-mx-head",
+                {"display": "flex", "justifyContent": "space-between",
+                 "columnGap": "20px", "rowGap": "8px", "alignItems": "baseline",
+                 "customStyles": "flex-wrap:wrap;"},
+                [mono("TABLE 01 — CAPABILITY", size="10px",
+                      color="--mk-accent-ink", track="0.22em"),
+                 mono("● 標準   ◐ 選配   ○ 不含", size="10px",
+                      color="--mk-faint", track="0.12em")]),
+            # the column header, then one row per capability
+            box("mk-mx-cols",
+                {"display": "grid", "gridCols": "1fr repeat(3, 78px)",
+                 "columnGap": "10px", "alignItems": "end", "marginTop": "26px",
+                 "paddingBottom": "10px",
+                 "customStyles": "border-bottom:1px solid " + RULE_INK + ";"},
+                _m={"gridCols": "1fr repeat(3, 46px)", "columnGap": "6px"},
+                children=[mono("CAPABILITY", size="10px", color="--mk-faint",
+                               track="0.18em")]
+                + [box("mk-mx-h-%d" % j,
+                       {"display": "flex", "justifyContent": "center"},
+                       [mono(c, size="11px", color="--mk-ink", track="0.06em")])
+                   for j, c in enumerate(MATRIX_COLS)]),
+            box("mk-mx-rows", {}, [
+                box("mk-mx-r-%d" % i,
+                    {"display": "grid", "gridCols": "1fr repeat(3, 78px)",
+                     "columnGap": "10px", "alignItems": "center",
+                     "paddingTop": "13px", "paddingBottom": "13px",
+                     "customStyles": "border-bottom:1px solid " + RULE + ";"},
+                    _m={"gridCols": "1fr repeat(3, 46px)", "columnGap": "6px",
+                        "paddingTop": "11px", "paddingBottom": "11px"},
+                    children=[
+                        box("mk-mx-n-%d" % i,
+                            {"display": "flex", "columnGap": "12px",
+                             "alignItems": "baseline", "rowGap": "2px",
+                             "customStyles": "flex-wrap:wrap;"},
+                            [T("p", zh, color={"token": "--mk-ink"},
+                               fontSize="14px", _m={"fontSize": "12.5px"}),
+                             mono(en, size="9px", color="--mk-faint",
+                                  track="0.16em", _m={"display": "none"})]),
+                    ] + [mark(sym, i, j) for j, sym in enumerate(marks)])
+                for i, (zh, en, *marks) in enumerate(MATRIX)
+            ]),
+        ]),
+])], bg="--mk-panel")
+
+
+# ── FIGURE 01: what a workflow actually looks like ────────────────────────────
+# The page had no graphic on it at all - every section was type and rules, which is
+# austere for eleven screens. A diagram is the one element that says something no
+# sentence here can, and drawn in hairline boxes it belongs to the same document
+# rather than arriving from a different one.
+FLOW = [
+    ("網站表單", "FORM", "n8n 節點", "WORKFLOW", "ERP 建單", "ERP"),
+    ("電商訂單", "ORDER", "Claude 判讀", "REASONING", "通知／報表", "NOTIFY"),
+    ("客服訊息", "INBOX", "分類與派工", "TRIAGE", "CRM 紀錄", "CRM"),
+]
+
+
+def flow_cell(attr, zh, en):
+    return box(attr,
+               {"paddingTop": "14px", "paddingBottom": "14px",
+                "paddingLeft": "16px", "paddingRight": "16px",
+                "customStyles": "border:1px solid " + RULE + ";"},
+               [mono(en, size="9px", color="--mk-faint", track="0.18em"),
+                T("p", zh, color={"token": "--mk-ink"}, fontSize="14px",
+                  marginTop="6px", _m={"fontSize": "13px"})])
+
+
+def arrow(attr):
+    return box(attr, {"display": "flex", "justifyContent": "center",
+                      "alignItems": "center"},
+               [T("p", "→", color={"token": "--mk-accent-ink"}, fontSize="15px",
+                  fontFamily=MONO)],
+               _m={"customStyles": "transform:rotate(90deg);"})
+
+
+FIGURE_SEC = section("figure", [wrap("mk-fig2-in", [
+    box("mk-fig2-pad", {"paddingTop": "82px", "paddingBottom": "82px"},
+        _m={"paddingTop": "54px", "paddingBottom": "54px"},
+        children=[
+            box("mk-fig2-head",
+                {"display": "flex", "justifyContent": "space-between",
+                 "columnGap": "20px", "rowGap": "8px",
+                 "customStyles": "flex-wrap:wrap;"},
+                [mono("FIGURE 01 — A WORKFLOW", size="10px",
+                      color="--mk-accent-ink", track="0.22em"),
+                 mono("INPUT → PROCESS → OUTPUT", size="10px",
+                      color="--mk-faint", track="0.18em")]),
+            box("mk-fig2-grid",
+                {"display": "grid", "gridCols": "1fr 44px 1fr 44px 1fr",
+                 "columnGap": "0px", "rowGap": "16px", "marginTop": "34px"},
+                _t={"gridCols": "1fr 34px 1fr 34px 1fr"},
+                _m={"gridCols": "repeat(1, 1fr)", "rowGap": "8px",
+                    "marginTop": "24px"},
+                children=[
+                    node for i, row in enumerate(FLOW) for node in (
+                        flow_cell("mk-fl-a-%d" % i, row[0], row[1]),
+                        arrow("mk-ar-a-%d" % i),
+                        flow_cell("mk-fl-b-%d" % i, row[2], row[3]),
+                        arrow("mk-ar-b-%d" % i),
+                        flow_cell("mk-fl-c-%d" % i, row[4], row[5]),
+                    )
+                ]),
+            T("p", "同一條線可以接任何一端：表單、訂單、訊息進來，"
+                   "判斷與轉換在中間，結果送到你本來就在用的系統裡。",
+              color={"token": "--mk-muted"}, fontSize="13px", lineHeight="1.95",
+              marginTop="26px", maxWidth="42em", _m={"fontSize": "12.5px"}),
+        ]),
+])])
+
+
+# ── PLATE 01: a statement ─────────────────────────────────────────────────────
+# Every clause on this page has the same rhythm - a numbered head, then hairline
+# rows. That is correct for a specification and monotonous for a page. A document
+# also has PLATES: unnumbered, full-bleed, one idea at a scale nothing else gets.
+# This one changes the ground, the measure and the type size all at once, so the
+# reader feels a chapter break rather than another row.
+PLATE = section("plate", [wrap("mk-plate-in", [
+    box("mk-plate-pad",
+        {"paddingTop": "104px", "paddingBottom": "104px",
+         "display": "grid", "gridCols": "auto 1fr", "columnGap": "56px",
+         "alignItems": "start"},
+        _t={"columnGap": "36px"},
+        _m={"gridCols": "repeat(1, 1fr)", "rowGap": "22px",
+            "paddingTop": "62px", "paddingBottom": "62px"},
+        children=[
+            # the plate number, set as a hollow numeral - the one place on the page
+            # where type is used as a shape rather than as reading matter
+            box("mk-plate-num", {},
+                [T("p", "01", fontFamily=DISPLAY, fontSize="132px",
+                   fontWeight="600", lineHeight=".82", letterSpacing="-0.05em",
+                   color="rgba(0,0,0,0)",
+                   customStyles="-webkit-text-stroke:1px " + RULE_INK + ";",
+                   _t={"fontSize": "104px"}, _m={"fontSize": "68px"})]),
+            box("mk-plate-t", {}, [
+                mono("PLATE 01 — POSITION", size="10px", color="--mk-accent-ink",
+                     track="0.22em"),
+                ml("h2", "技術是拿來解決問題的，\n不是拿來炫耀的。",
+                   color={"token": "--mk-ink"}, fontSize="46px", fontWeight="600",
+                   letterSpacing="0.01em", lineHeight="1.42", fontFamily=DISPLAY,
+                   marginTop="22px",
+                   _t={"fontSize": "38px"}, _m={"fontSize": "26px"}),
+                T("p", "每一個決定都要能被說明：為什麼用這個工具、"
+                       "為什麼是這個結構、為什麼值這個價錢。說不清楚的，就不做。",
+                  color={"token": "--mk-muted"}, fontSize="15px", lineHeight="2",
+                  marginTop="26px", maxWidth="34em", _m={"fontSize": "13.5px"}),
+                box("mk-plate-sig",
+                    {"marginTop": "34px", "display": "flex", "columnGap": "12px",
+                     "alignItems": "center"},
+                    [box("mk-plate-dash", {}, []),
+                     mono("MOKSA WEB — TAICHUNG", size="10px", color="--mk-faint",
+                          track="0.2em")]),
+            ]),
+        ]),
+])], bg="--mk-panel")
+
+
+# ── the type specimen ─────────────────────────────────────────────────────────
+# A studio that sets type should be willing to show the type. This is the system
+# itself on display - the scale it uses, the faces it pairs, the numerals it relies
+# on - inverted onto the ink ground so it reads as a plate rather than a section.
+SPECIMEN_ROWS = [
+    ("Aa", "72 / SPACE GROTESK 600", "72px", "54px", "40px", DISPLAY, "600"),
+    ("網站開發", "46 / NOTO SANS TC 500", "46px", "38px", "27px", CJK, "500"),
+    ("0123456789", "34 / IBM PLEX MONO 500", "34px", "27px", "20px", MONO, "500"),
+    ("automation", "22 / SPACE GROTESK 500", "22px", "19px", "16px", DISPLAY,
+     "500"),
+]
+
+SPECIMEN = section("specimen", [wrap("mk-spec2-in", [
+    box("mk-spec2-pad", {"paddingTop": "88px", "paddingBottom": "88px"},
+        _m={"paddingTop": "58px", "paddingBottom": "58px"},
+        children=[
+            box("mk-spec2-head",
+                {"display": "flex", "justifyContent": "space-between",
+                 "columnGap": "20px", "rowGap": "8px",
+                 "customStyles": "flex-wrap:wrap;"},
+                [mono("TYPE SPECIMEN", size="10px", color="--mk-accent",
+                      track="0.22em"),
+                 mono("THREE FACES / ONE SCALE", size="10px",
+                      color="rgb(140,142,150)", track="0.2em")]),
+            box("mk-spec2-rows", {"marginTop": "40px"},
+                _m={"marginTop": "26px"},
+                children=[
+                    box("mk-spec2-r-%d" % i,
+                        {"display": "grid", "gridCols": "1fr auto",
+                         "columnGap": "28px", "alignItems": "baseline",
+                         "paddingTop": "20px", "paddingBottom": "20px",
+                         "customStyles":
+                             "border-top:1px solid " + RULE_DARK + ";"},
+                        _m={"gridCols": "1fr", "rowGap": "6px",
+                            "paddingTop": "14px", "paddingBottom": "14px"},
+                        children=[
+                            T("p", glyphs, color={"token": "--mk-paper"},
+                              fontSize=size, fontFamily=face, fontWeight=weight,
+                              lineHeight="1.1", letterSpacing="0.01em",
+                              _t={"fontSize": tsize}, _m={"fontSize": msize}),
+                            mono(label, size="10px", color="rgb(140,142,150)",
+                                 track="0.16em"),
+                        ])
+                    for i, (glyphs, label, size, tsize, msize, face, weight)
+                    in enumerate(SPECIMEN_ROWS)
+                ]),
+        ]),
+])], bg="--mk-ink")
+
+
 # ── the entrance sequence ─────────────────────────────────────────────────────
 # A boot screen, because the page is a specification document and this is what one
 # looks like while it is being read off a machine. It is CSS only: a counter that is
@@ -1272,6 +1593,11 @@ CONTACT = section("contact", [wrap("mk-contact-in", [
 # of the page's life, which is the only window in which any of this exists.
 BOOT = box("mk-boot", {}, [
     box("mk-boot-scan", {}, []),
+    # trim marks on the plate itself, drawn corner by corner
+    *[box("mk-boot-x%d" % i, {}, []) for i in range(4)],
+    # a ruler up the left margin: the veil is a measured object, not a splash
+    box("mk-boot-ruler", {}, [box("mk-boot-t%d" % i, {}, [])
+                              for i in range(RULER_TICKS)]),
     box("mk-boot-head", {}, [
         mono("MOKSA WEB — STUDIO PROFILE", size="10px", color="--mk-faint",
              track="0.2em"),
@@ -1282,6 +1608,13 @@ BOOT = box("mk-boot", {}, [
         box("mk-boot-pct", {}, [T("p", "%")]),
     ]),
     box("mk-boot-track", {}, [box("mk-boot-fill", {}, [])]),
+    # the log writes itself out a line at a time, with a cursor still blinking
+    box("mk-boot-log", {},
+        [box("mk-boot-l%d" % i, {}, [mono(line, size="10px", color="--mk-faint",
+                                          track="0.16em")])
+         for i, line in enumerate(BOOT_LOG)]
+        + [box("mk-boot-l%d" % len(BOOT_LOG), {},
+               [box("mk-boot-cursor", {}, [])])]),
     box("mk-boot-list", {},
         # each clause gets its own box because the id is what the stagger
         # targets, and `mono()` puts everything it is given into the style
@@ -1289,6 +1622,7 @@ BOOT = box("mk-boot", {}, [
              [mono("§" + num + " " + name, size="10px", color="--mk-faint",
                    track="0.18em")])
          for i, (num, name, _h, _t) in enumerate(CLAUSES)]),
+    box("mk-boot-ready", {}, [T("p", "PROFILE READY")]),
     box("mk-boot-foot", {}, [
         mono("INITIALISING", size="10px", color="--mk-faint", track="0.2em"),
         mono("TAICHUNG, TW", size="10px", color="--mk-faint", track="0.2em"),
@@ -1324,8 +1658,11 @@ CUE = box("mk-cue", {}, [
 HOME_TREE = {"type": "div", "data": {"attrID": "mk-home"},
              "children": [BOOT, box("mk-doc", {}, [
                  MARKS, INDEX, CUE,
-                 MASTHEAD, TICKER_BAND, SERVICE_SEC, PROCESS_SEC, WORK_SEC,
-                 STACK_SEC, PRODUCT_SEC, VOICE_SEC, CONTACT,
+                 # paper, panel, paper, ink, paper, ink, paper - the page
+                 # changes ground five times so it reads as chapters
+                 MASTHEAD, TICKER_BAND, PLATE, SERVICE_SEC, MATRIX_SEC,
+                 PROCESS_SEC, FIGURE_SEC, WORK_SEC, SPECIMEN, STACK_SEC,
+                 PRODUCT_SEC, VOICE_SEC, CONTACT,
              ])]}
 
 SITE = {