Upload 165 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+images/screenshot.png filter=lfs diff=lfs merge=lfs -text

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: [foxihd] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/hugo.yml

@@ -0,0 +1,78 @@
+# Workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo Site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - main
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.148.1
+    steps:
+      - name: Install Hugo CLI
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          submodules: recursive
+          fetch-depth: 0
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      - name: Install Node.js dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc \
+            --minify \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
+      - name: Index pagefind
+        run: npx pagefind --site "./public"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3.0.1
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4.0.5

.github/workflows/hugo_exampleSite.yml

@@ -0,0 +1,80 @@
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo exampleSite to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - main
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.148.1
+    steps:
+      - name: Install Hugo CLI
+        run: |
+          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
+          && sudo dpkg -i ${{ runner.temp }}/hugo.deb
+      - name: Checkout
+        uses: actions/checkout@v4.2.2
+        with:
+          submodules: recursive
+          fetch-depth: 0
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      - name: Install Node.js dependencies
+        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+      - name: Build with Hugo
+        env:
+          # For maximum backward compatibility with Hugo modules
+          HUGO_ENVIRONMENT: production
+          HUGO_ENV: production
+        run: |
+          hugo \
+            --gc \
+            --minify \
+            --themesDir ../.. \
+            --source exampleSite \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
+      - name: Index pagefind
+        run: npx pagefind --site "./exampleSite/public"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3.0.1
+        with:
+          path: ./exampleSite/public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4.0.5

.gitignore

@@ -0,0 +1,2 @@
+.hugo_build.lock
+public

.gitlab-ci.yml

@@ -0,0 +1,45 @@
+# Use this template if you want to build your site with Gitlab pages.
+
+image:
+  name: golang:1.23.4-bookworm
+
+variables:
+  GIT_DEPTH: 0
+  GIT_STRATEGY: clone
+  GIT_SUBMODULE_STRATEGY: recursive
+  HUGO_VERSION: 0.148.1
+  NODE_VERSION: 23.x
+
+pages:
+  script:
+    # Install brotli
+    - apt-get update
+    - apt-get install -y brotli
+    # Install Dart Sass
+    # hugo-brewm don't use Dart Sass at the moment.
+    # - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+    # - tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
+    # - cp -r dart-sass/ /usr/local/bin
+    # - rm -rf dart-sass*
+    # - export PATH=/usr/local/bin/dart-sass:$PATH
+    # Install Hugo
+    - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+    - apt-get install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+    - rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb
+    # Install Node.js
+    - curl -fsSL https://deb.nodesource.com/setup_${NODE_VERSION} | bash -
+    - apt-get install -y nodejs
+    # Install Node.js dependencies
+    - "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
+    # Build
+    - hugo --gc --minify --baseURL ${CI_PAGES_URL}
+    # Index with PageFind
+    - npx pagefind --site "public"
+    # Compress
+    - find public -type f -regex '.*\.\(css\|html\|js\|txt\|xml\)$' -exec gzip -f -k {} \;
+    - find public -type f -regex '.*\.\(css\|html\|js\|txt\|xml\)$' -exec brotli -f -k {} \;
+  artifacts:
+    paths:
+      - public
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 foxihd @ github.com
+
+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.

archetypes/default.md

@@ -0,0 +1,5 @@
++++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
++++

assets/css/component/a11y.css

@@ -0,0 +1,488 @@
+/* this style is used inline in accessibility.js */
+
+/*  focus mode */
+
+body.focus > header,
+body.focus > main > header,
+body.focus #contentinfo,
+body.focus #discussion-starter,
+body.focus #main-footer,
+body.focus #background-footer {
+    display:none;
+}
+
+body.focus > footer {
+    position: unset;
+}
+
+body.focus #dwclock {
+    opacity: 0.1;
+}
+
+/* a11y button */
+#has-a11y {
+    margin-right: auto;
+}
+
+#has-a11y-summary {
+    padding: .6ex 1ex;
+    font-weight: 550;
+}
+
+#has-a11y-summary::before{
+    font-family: 'base-ui';
+    font-weight: 400;
+    content: '\e900';
+}
+
+#has-a11y[open] #a11y {
+    --anm: expand 99ms forwards;
+    --tso: bottom;
+}
+
+/* a11y container */
+#a11y {
+    display: flex;
+    position: fixed;
+    bottom: calc(1rem + var(--vfoot));
+    flex-direction: column;
+    margin: 0;
+    border: var(--border);
+    border-radius: 1ex;
+    background: var(--bg);
+    padding: 1rem;
+    max-height: calc(100vh - var(--vhead) - var(--vfoot) - 2rem );
+    overflow-y: auto;
+    gap: var(--medskip);
+}
+
+/* order */
+#optimizeSR {
+    order: 6;
+}
+
+#setFontSize {
+    order: 3;
+}
+
+#setBaselineStretch {
+    display: none;
+    order: 4;
+}
+
+main#page + footer #setBaselineStretch,
+main#page + footer #useBionRead {
+    display: block;
+}
+
+#setOpenDyslexic {
+    order: 5;
+}
+
+/* hide input checkbox */
+#a11y input[type=checkbox],
+#a11y input[type=radio],
+#bionReadSwitch,
+#defocusAuxElement {
+    position: absolute;
+    top: -100vh;
+}
+
+#a11y select,
+#a11y input[type=range],
+#setColorScheme label,
+#setOpenDyslexic,
+button {
+    cursor: pointer;
+}
+
+/* range */
+label.range {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+label.range > input {
+    flex: 1;
+    accent-color: var(--ac);
+}
+
+label.range > output {
+    width: 4rem;
+    text-align: center;
+    color: var(--ac);
+    font: 700 var(--large) var(--sf), sans-serif;
+}
+
+#setColorScheme {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    order: 1;
+    margin-bottom: 1ex;
+}
+
+/* lightswitch */
+#lightSwitch + label {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    border-radius: 0.5ex;
+    padding: 1ex;
+    width: 4rem;
+    gap: 1ex;
+}
+
+#lightSwitch + label:hover,
+#lightSwitch:focus + label,
+#setContrast input:hover + label {
+    background: var(--g18s);
+    color: var(--ac);
+}
+
+/* credit to @mrozilla on codepen https://codepen.io/mrozilla/pen/OJJNjRb */
+#lightSwitch + label::before {
+    --ray-size: calc(var(--size) * -0.4);
+    --offset-orthogonal: calc(var(--size) * 0.65);
+    --offset-diagonal: calc(var(--size) * 0.45);
+    --tsf: scale(0.75);
+    --size: 1.414em;
+    display: block;
+    outline: none;
+    border-radius: 999px;
+    box-shadow: inset 0 0 0 var(--size),
+        calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+        var(--offset-orthogonal) 0 0 var(--ray-size),
+        0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+        0 var(--offset-orthogonal) 0 var(--ray-size),
+        calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
+        var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
+        calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
+        var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
+    width: var(--size);
+    height: var(--size);
+    color: #ffaa00;
+    content: '';
+}
+
+#lightSwitch:checked + label::before {
+    --tsf: scale(1);
+    box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+}
+
+#lightSwitch + label::after {
+    color: var(--fg);
+    font-size: inherit;
+    font-weight: 550;
+}
+
+/* contrast */
+#setContrast {
+    display: flex;
+    position: relative;
+    justify-content: center;
+    margin: 0 0 0 1ex;
+    border: none;
+    border-left: var(--bound);
+    padding: 2em 0 0 1ex;
+}
+
+#setContrast legend {
+    position: absolute;
+    top: 0.2em;
+}
+
+#setContrast > div {
+    display: flex;
+    padding: 2pt;
+    gap: 2pt;
+}
+
+#setContrast label {
+    --tst: 99ms;
+    border-radius: 1rem;
+    padding: 1pt 5pt;
+    font-size: 0.84em !important;
+}
+
+#setContrast input:checked + label {
+    background: var(--fg);
+    color: var(--bg);
+    box-shadow: var(--box-shadow);
+}
+
+#setContrast input + label::before {
+    font-family:'base-ui';
+    content: '\e904\a0';
+}
+
+#setContrast input:checked + label::before {
+    content: '\e903\a0';
+}
+
+/* color palette */
+#setColorPalette {
+    align-items: baseline;
+    order: 2;
+}
+
+#setColorPalette > *,
+#setOpenDyslexic > * {
+    padding: 1ex 0;
+}
+
+#colorPalette {
+    flex: 1;
+    margin-left: 0.5ex;
+    border: unset;
+    border-radius: 1rem;
+    background: var(--bg);
+    padding: 0.5ex 1.25ex;
+    color: var(--fg);
+    font: inherit !important;
+}
+
+/* font */
+#baselineStretchState::after {
+    font-size: 0.8em;
+    content: '×';
+}
+
+#fontSizeState::after {
+    font-size: 0.8em;
+    content: 'pt';
+}
+
+input.toggle + label {
+    display: flex;
+    position: relative;
+    padding-right: 3.6rem;
+    align-items: center;
+    font-weight: bold;
+}
+
+input.toggle:focus + label::after {
+    background: var(--ac);
+}
+
+input.toggle + label::before,
+input.toggle + label::after {
+    position: absolute;
+    right: 0;
+    border-radius: 2rem;
+    box-shadow: var(--box-shadow-inset);
+    background: #80808080;
+    width: 2.4rem;
+    height: 0.8rem;
+    content: "";
+}
+
+input.toggle + label::after {
+    --tst: 0.5s ease-out;
+    right: 1.2rem;
+    border: 1pt solid #80808008;
+    box-shadow: var(--box-shadow);
+    background: #fff;
+    width: 1.2rem;
+    height: 1.2rem;
+}
+
+input.toggle:checked + label::after {
+    right: 0;
+}
+
+input.toggle:checked + label::before {
+    opacity: 0.8;
+    background: var(--ac);
+}
+
+/* menu */
+#a11y-menu {
+    display: inline-flex;
+    align-items: center;
+    order: 7;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    gap: 1ex;
+}
+
+#a11y-menu > button {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    border: unset;
+}
+
+#a11y-menu > .has-aria-label {
+    background: unset;
+    color: var(--fg);
+}
+
+#a11y-menu > .has-aria-label::before {
+    margin: auto;
+    padding: 0.25rem 0.5rem;
+}
+
+#a11y-menu .has-aria-label:after {
+    font-size: 0.7em;
+}
+
+#resetButton::before {
+    font-family: 'base-ui';
+    content: '\e90f';
+}
+
+#closeButton::before {
+    font-family: 'base-ui';
+    content: '\e913';
+}
+
+#bionReadButton,
+#saveButton {
+    flex: 1;
+    margin-left: auto;
+    cursor: pointer;
+}
+
+/* bionRead */
+b.k {
+    vertical-align: baseline;
+    letter-spacing: var(--bion);
+    color: var(--off);
+    font-weight: 400 !important;
+    -webkit-text-stroke: var(--bion) var(--off);
+    font-synthesis: weight;
+}
+
+#useBionRead {
+    display: none;
+    margin: auto;
+    letter-spacing: 0.1em;
+    font-size: var(--footnotesize);
+}
+
+legend,
+.has-aria-label-top:before,
+#setColorPalette > label,
+input + label > span {
+    font-weight: 550;
+}
+
+#setContrast input + label > span {
+    font-weight: 400;
+}
+
+#bionReadButton > span {
+    font-weight: 400;
+    text-transform: uppercase;
+}
+
+#noLocalStorage {
+    order: 7;
+    margin: auto;
+    border-top: var(--bound);
+    padding-top: 1rem;
+    max-width: 20rem;
+}
+
+#focusMode {
+    position: fixed;
+    bottom: calc(var(--vfoot) + 1rem);
+    padding: 3pt 6pt;
+    display: flex;
+}
+
+#focusModeButton {
+    opacity: 0.7;
+    position: relative;
+}
+
+label:hover .t,
+label:focus .t {
+    position: unset;
+    visibility: visible;
+    margin-left: 2rem;
+}
+
+input:checked + #focusModeButton {
+    opacity: 0.5;
+}
+
+/* optimize */
+
+#setContrast input:checked:focus + label,
+#OpenDyslexic:checked + label #OpenDyslexicState,
+#saveButton:hover,
+#saveButton:focus,
+#bionReadSwitch:hover + label,
+#bionReadSwitch:focus + label,
+#bionReadSwitch:active + label,
+#bionReadSwitch:checked + label {
+    background: var(--ac);
+}
+
+#has-a11y[open] > #has-a11y-summary,
+#lightSwitch:hover + label span::after,
+#lightSwitch:focus + label span::after,
+#a11y-menu > .has-aria-label:focus,
+#a11y-menu > .has-aria-label:hover {
+    color: var(--ac);
+}
+
+/* sr user */
+
+body.sr-user {
+    --rm: monospace;
+    --sf: monospace;
+    --tt: monospace;
+}
+
+menu.srm--a a::before {
+    display: none;
+}
+
+menu.srm--a .srt,
+.share.srm--a .srt {
+    padding: 1ex;
+    margin: 2pt;
+}
+
+.srm--a + #back::before {
+    content: unset;
+}
+
+menu.srm--a + #back {
+    padding: 6pt;
+}
+
+#has-search > summary.srm--a,
+#has-more-menu > summary.srm--a {
+    width: unset;
+    padding: 0 5pt;
+}
+
+#to-top .t,
+#has-search > summary.srm--a::before {
+    display: none;
+}
+
+menu.srm--a a,
+#to-top.srm--a {
+    width: unset;
+    font-size: 1rem;
+    line-height: 1;
+}
+
+img[data-src],
+.srs[data-style] {
+    border: var(--bound);
+}
+
+@media (max-width: 640px) {
+
+    #has-a11y > summary > span {
+        display: none;
+    }
+
+}

assets/css/component/background.css

@@ -0,0 +1,50 @@
+#background-footer,
+#background-header,
+#background-body {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -2;
+    width: 100vw;
+    height: 100vh;
+}
+
+#background-footer,
+#background-header,
+#background-body,
+#a11y,
+#lightSwitch + label::before,
+#setContrast,
+#colorPalette,
+ul.carousel__viewport > li > a > span::before,
+ul.carousel__viewport > li > a > span::after,
+ul.carousel__viewport > li > a > span,
+#list-categories a:hover::after,
+.letterine > i {
+    -webkit-transition: var(--flashGuard);
+       -moz-transition: var(--flashGuard);
+         -o-transition: var(--flashGuard);
+            transition: var(--flashGuard);
+}
+
+#background-body,
+.background {
+    background-color: var(--bg);
+}
+
+#background-header {
+    border-bottom: var(--opt-border);
+    height: var(--vhead);
+}
+
+#background-footer {
+    top: unset;
+    bottom: 0;
+    border-top: var(--opt-border);
+    height: var(--vfoot);
+}
+
+.has-border {
+    --opt-border: var(--border);
+}

assets/css/component/breadcrumb.css

@@ -0,0 +1,144 @@
+main > header.pagewidth {
+    margin-top: var(--medskip);
+    height: 2.5rem;
+}
+
+main > header > menu {
+    float: right;
+    visibility: hidden;
+    margin: 0 0 0 auto;
+    padding: 0;
+}
+
+main#term > header > menu,
+main#page > header > menu {
+    visibility: visible;
+}
+
+#back,
+menu button,
+menu a {
+    border: unset;
+    background: unset;
+    padding: 1ex;
+    color: inherit;
+}
+
+#back::before,
+header menu button,
+header menu a,
+#join-discussion-bluesky,
+#menu-footer a {
+    display: inline-block;
+    position: relative;
+    padding: 5pt 0;
+    width: 2.25em;
+    text-align: center;
+    font-size: var(--normalsize);
+}
+
+#back::before {
+    width: 2rem;
+}
+
+#bionReadSwitch + label,
+#join-discussion,
+#saveButton,
+#share {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 2em;
+    background: var(--fg);
+    padding: 1ex 12pt;
+    text-align: center;
+    color: var(--bg);
+    font-weight: 550;
+}
+
+#back .t,
+menu button .t,
+menu a .t,
+#menu-footer a .t,
+#join-discussion-bluesky > .t {
+    --tsf: translate(-4.65em);
+}
+
+#rss-button::before {
+    font-family: 'base-ui';
+    content: '\e910';
+}
+
+#print-button::before {
+    font-family: 'base-ui';
+    content: '\e90c';
+}
+
+#navigatorShare::before {
+    font-family: 'base-ui';
+    content: '\e912';
+}
+
+#copyPermalink::before {
+    font-family: base-ui;
+    content: '\e905';
+}
+
+label .t::after,
+main#term #print-button {
+    visibility: hidden;
+}
+
+#back {
+    position: relative;
+    top: 3pt;
+    float: left;
+    padding: 0;
+}
+
+.pagination .rfill a::before,
+.carousel__viewport__slide:last-child > nav a::before,
+#back::before {
+    --tsf: rotate(-90deg) translateX(1pt);
+    font-family: base-ui;
+    content: '\e902';
+}
+
+main > header > menu > li,
+ul.breadcrumb > li {
+    display: inline;
+}
+
+#has-breadcrumb a {
+    margin: 2pt;
+    padding: 0.5ex;
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+    color: var(--fg);
+    font-size: var(--small);
+}
+
+ul.breadcrumb {
+    display: block;
+    padding: 5pt 0;
+    overflow: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+ul.breadcrumb > li:last-child a {
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    -webkit-touch-callout: none;
+}
+
+ul.breadcrumb > li + li:before {
+    color: var(--mid);
+    content: '/';
+}

assets/css/component/card.css

@@ -0,0 +1,181 @@
+.feed-item {
+    position: relative;
+    transition: 99ms;
+    margin: var(--medskip) auto var(--medskip) 0;
+    padding: 1rem;
+    width: var(--golden-ratio);
+    font-size: var(--small);
+}
+
+.feed-item:hover,
+.feed-item:focus-within {
+    --tsf: scale(1.01);
+}
+
+.feed-item * {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.feed-item h1 {
+    margin: 8pt 0 0 0;
+    color: var(--fg);
+    font-size: var(--Large);
+    font-weight: 550;
+}
+
+.feed-item img {
+    width: auto;
+    height: auto;
+    max-height: 68.8vw;
+    aspect-ratio: 10/8;
+    object-fit: cover;
+}
+
+.feed-item .par {
+    --grd: linear-gradient(var(--off) 50%, transparent 100%);
+    opacity: 0.86;
+    margin-right: auto;
+    -webkit-mask-image: var(--grd);
+            mask-image: var(--grd);
+    clip-path: text;
+}
+
+.feed-item img + .par {
+    width: var(--golden-ratio);
+}
+
+.feed-item > a {
+    position: absolute;
+    top: 2.5rem;
+    right: 0;
+    bottom: 3rem;
+    left: 0;
+    transition: 0.2s;
+    z-index: 1;
+}
+
+.feed-item > a:hover,
+.feed-item > a:focus {
+    top: 0;
+    bottom: 0;
+    background-color: #80808008;
+}
+
+.feed-item > hgroup {
+    display: flex;
+    flex-direction: column;
+}
+
+.feed-item > section {
+    display: flex;
+    flex-direction: row-reverse;
+    margin: 8pt 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    gap: 1rem;
+}
+
+.feed-item > section.has-cover {
+    aspect-ratio: 10/3;
+}
+
+.feed-item > footer,
+.feed-item > hgroup > div {
+    display: flex;
+    flex-flow: nowrap;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.feed-item > footer > ul,
+.feed-item > hgroup > div > span {
+    display: block;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.feed-item > hgroup > div > div {
+    margin-left: auto;
+    padding-left: 1rem;
+}
+
+.feed-item > footer > ul {
+    text-align: right;
+    font-size: var(--scriptsize);
+}
+
+.emoji.emoji--stage {
+    padding: 0 2.4pt 2.4pt 0;
+}
+
+.stage-indicator {
+    margin-right: 1ex;
+    height: 1.3em !important;
+}
+
+.readingTime {
+    margin-right: auto;
+    padding-right: 1rem;
+}
+
+.readingTime + .baselineskip {
+    height: 1em;
+}
+
+.flowlines {
+    border: var(--border);
+    object-fit: none !important;
+}
+
+ul.pagination {
+    display: flex;
+    margin: var(--medskip) 1ex;
+}
+
+.pagination a {
+    display: flex;
+    padding: 1ex 1em;
+    text-transform: uppercase;
+    letter-spacing: 0.2ex;
+    color: var(--ac);
+    gap: 1ex;
+}
+
+@media (max-width: 640px) {
+
+    .feed-item {
+        width: unset;
+    }
+
+    aside + #list-posts .feed-item {
+        width: var(--golden-ratio);
+    }
+
+    aside + #list-posts .feed-item .par {
+        max-height: 25vh;
+        width: unset;
+    }
+
+}
+
+@media (max-width: 480px) {
+
+    .feed-item > section {
+        flex-direction: column;
+        aspect-ratio: unset !important;
+    }
+
+    .feed-item img {
+        max-height: unset;
+        aspect-ratio: unset;
+    }
+
+    .feed-item img.flowlines {
+        max-height: 68.8vw;
+        aspect-ratio: 10/8;
+    }
+
+}

assets/css/component/carousel.css

@@ -0,0 +1,155 @@
+/*
+<!----- V container ----->
+<div class='has-carousel'>
+    <!--- H container --->
+    <div class='carousel'>
+        <div>----  <div>----  <div>----  <div>---- <div>----
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        ---</div>  |       |  ---</div>  |       |  ---</div>
+                   ---</div>             ---</div>
+    </div>
+<div>
+*/
+.carousel {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.carousel__viewport {
+    display: flex;
+    height: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+}
+
+ul.carousel__viewport {
+    border: none;
+    padding: 0;
+}
+
+.carousel__viewport > div,
+.carousel__viewport > section,
+ul.carousel__viewport > li,
+.carousel__viewport__slide {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    scroll-snap-align: start;
+}
+
+ul.carousel__viewport > li {
+    position: relative;
+    margin: 1ex;
+    border-radius: 1ex;
+    background: var(--img) center/cover;
+    width: 16rem;
+    height: 12.8rem;
+}
+
+ul.carousel__viewport > li > a {
+    position: absolute;
+    top: -1px;
+    right: 0;
+    bottom: 0;
+    left: -1px;
+    border-radius: 0.82ex;
+    overflow: clip;
+    color: var(--fg);
+    font-size: var(--small);
+    font-weight: bold;
+    border: none;
+}
+
+ul.carousel__viewport > li:hover,
+ul.carousel__viewport > li:focus-within {
+    --tsf: scale(0.96);
+    opacity: 0.86;
+}
+
+ul.carousel__viewport > li > a > span {
+    position: relative;
+    border-radius: 0 1ex 1ex 0;
+    background-color: var(--bg);
+    padding: 0.7ex 1ex;
+    max-width: 12.8rem;
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+}
+
+ul.carousel__viewport > li > a > span::before,
+ul.carousel__viewport > li > a > span::after {
+    position: absolute;
+    border-top-left-radius: 1ex;
+    box-shadow: 0 -1ex 0 0 var(--bg);
+    background-color: transparent;
+    width: 1ex;
+    height: 2ex;
+    content: '';
+}
+
+ul.carousel__viewport > li > a > span::before {
+    bottom: -2ex;
+    left: 0;
+}
+
+ul.carousel__viewport > li > a > span::after {
+    top: 0.5ex;
+    right: -0.9ex;
+}
+
+.tr,
+.carousel__viewport__slide > nav a {
+    display: inline-flex;
+    padding: 1ex;
+    gap: 1ex;
+}
+
+
+.pagination .lfill a::after,
+.tr::after,
+.carousel__viewport__slide:first-child > nav a::after {
+    /* -> */
+    --tsf: rotate(90deg);
+    font-family: base-ui;
+    content: '\e902';
+}
+
+#list-taxonomy > .carousel__viewport {
+    flex-direction: column;
+    height: 14.75rem;
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+}
+
+#list-taxonomy {
+    margin: 1rem 0;
+}
+
+#list-taxonomy ul.carousel__viewport {
+    scrollbar-width: thin;
+}
+
+#list-taxonomy ul.carousel__viewport a:hover::after {
+    position: absolute;
+    right: 1ex;
+    bottom: 1ex;
+    border-radius: 0.7ex;
+    background: var(--bg);
+    padding: 0.7ex 0;
+    width: calc(3.2rem - 2ex);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    content: attr(data-post-counter);
+}

assets/css/component/clock.css

@@ -0,0 +1,49 @@
+/* this style is used inline in extras.js */
+
+/* grain for dither */
+
+.grain {
+    position: absolute;
+    mix-blend-mode: difference;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' version='1.1' width='256' height='256' viewBox='0 0 256 256'><defs><filter id='grain' x='0' y='0' width='1' height='1' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'><feTurbulence type='turbulence' baseFrequency='0.7' numOctaves='7' seed='42' stitchTiles='stitch' x='-1%' y='-1%' width='102%' height='102%' result='turbulence' id='feTurbulence2' /><feSpecularLighting surfaceScale='7' specularConstant='3' specularExponent='10' lighting-color='%23ffffff' x='-1%' y='-1%' width='102%' height='102%' in='turbulence' result='specularLighting' id='feSpecularLighting'><feDistantLight azimuth='3' elevation='163' id='feDistantLight' /></feSpecularLighting></filter></defs><rect width='320' height='320' fill='%23000000' id='blackbody' x='-32' y='-32' opacity='0.03' /><rect width='320' height='320' fill='%23ffffff' filter='url(%23grain)' id='noise' x='-32' y='-32' opacity='0.03' /></svg>");
+    width: 100%;
+    height: 100%;
+}
+
+/* distraction */
+
+#dwclock {
+    opacity: 0.33;
+    margin: auto;
+    width: 100vmin;
+    height: 100vmin;
+    filter: blur(2vmin) saturate(2);
+}
+
+#hour,
+#min {
+    position: absolute;
+    width: 100vmin;
+    height: 100vmin;
+}
+
+.hand {
+    --min: 40vmin;
+    --hour: 28vmin;
+    --tsf: translateY(calc(50vmin - var(--min)));
+    margin: 0 auto auto ;
+    border-right: 2vmin solid transparent;
+    border-bottom: var(--min) solid #60f;
+    border-left: 2vmin solid transparent;
+    border-radius: 2vmin;
+    background-image: linear-gradient(0deg, var(--bg) 0%, #60f 100%);
+    width: 3vmin;
+    height: var(--min);
+}
+
+#hour .hand {
+    --tsf: translateY(calc(50vmin - var(--hour)));
+    border-bottom: var(--hour) solid #20f;
+    background-image: linear-gradient(0deg, var(--bg) 0%, #20f 100%);
+    height: var(--hour);
+}

assets/css/component/column.css

@@ -0,0 +1,91 @@
+.column {
+    /* auto column count */
+    --col: 16rem;
+    display: block;
+    -webkit-column-gap: 1.618rem;
+       -moz-column-gap: 1.618rem;
+            column-gap: 1.618rem;
+    column-fill: balance;
+    -webkit-column-width: var(--col);
+       -moz-column-width: var(--col);
+            column-width: var(--col);
+}
+
+.column--multicols {
+    /* modify column count on element inline:
+        <e class='column column--multicols' style='--multicols:2'></e> */
+    --col: unset;
+    --multicols: 3;
+    -webkit-column-count: var(--multicols);
+       -moz-column-count: var(--multicols);
+            column-count: var(--multicols);
+}
+
+.column__span {
+    column-span: all;
+}
+
+.column > *,
+.column__item {
+    break-after: auto;
+    break-before: auto;
+    break-inside: avoid;
+}
+
+div + #menu-footer,
+.column > div + div,
+.column__item + .column__item {
+    margin-top: 1.618rem;
+}
+
+.column img {
+    width: 100%;
+    height: auto;
+}
+
+.column.pin {
+    --col: 13rem;
+}
+
+.column.pin > * {
+    margin-bottom: 1em;
+    font-size: var(--small);
+}
+
+.has-quote {
+    display: flex;
+    flex-direction: column-reverse;
+    color: var(--fg);
+}
+
+.has-quote::after {
+    margin: unset;
+}
+
+.has-quote > div {
+    margin-left: auto;
+}
+
+@media screen and (min-width: 2560px) {
+
+    .column {
+        --col: 20rem;
+    }
+
+}
+
+@media screen and (min-width: 1920px) {
+
+    .column.pin {
+        --col: 16rem;
+    }
+
+}
+
+@media screen and (max-width: 640px) {
+
+    .column.pin {
+        --col: 10rem;
+    }
+
+}

assets/css/component/contentinfo.css

@@ -0,0 +1,137 @@
+#contentinfo {
+    display: grid;
+    grid-template-columns: 6fr 4fr;
+    font-size: var(--small);
+    gap: var(--medskip);
+}
+
+
+#colophon {
+    grid-column: 1;
+}
+
+#colophon > div {
+    display: flex;
+    margin-top: 1ex;
+    gap: 1rem;
+}
+
+#qr {
+    padding-top: 4pt;
+}
+
+#contribute {
+    grid-column: 2;
+    border-radius: 1ex;
+    background-color: var(--g18s);
+    padding: 1.4rem 1.4rem 1rem;
+    height: fit-content;
+    line-height: 1.618;
+}
+
+#contrib-menu li {
+    margin: 1ex 1ex 1ex 0;
+}
+
+#contrib-menu a {
+    display: inline-block;
+    border: none;
+    border-radius: 1ex;
+    background: var(--ac);
+    padding: 4pt 9pt 3pt 7pt;
+    width: 100%;
+    text-align: center;
+    color: var(--bg);
+}
+
+#contrib-menu a:hover,
+#contrib-menu a:focus {
+    --anm: none;
+    opacity: 0.86;
+    color: var(--bg);
+}
+
+#has-contrib-menu {
+    padding: .4rem 0;
+}
+
+#contentinfo ol {
+    position: relative;
+    margin-bottom: 0;
+    padding-left: 2.5rem;
+    list-style: none;
+    counter-reset: li;
+}
+
+#contentinfo ol li {
+    margin-bottom: 1ex;
+    padding-bottom: 1ex;
+}
+
+#contentinfo ol li::before {
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    border-radius: 2rem;
+    background: var(--g18s);
+    padding: 4pt 7pt;
+    color: var(--mid);
+    font: 0.7em monospace;
+    content: counter(li);
+    counter-increment: li;
+}
+
+#contentinfo ol li.see-more::before {
+    content: '>';
+}
+
+#related a {
+    position: relative;
+    top: 0.25ex;
+}
+
+#has-timeline {
+    grid-column-start: 2;
+    grid-row-start: 1;
+}
+
+#has-timeline summary {
+    display: flex;
+}
+
+#has-timeline ol {
+    margin: 1ex 0 0 1rem;
+    border-left: 2.5pt solid var(--g18s);
+    padding: 1ex 0 0 1rem;
+}
+
+#has-timeline ol li::before {
+    left: -8pt;
+    border: 4pt solid var(--bg);
+    background: var(--mid);
+    padding: 0;
+    content: '\a0';
+    height: 6pt;
+    width: 6pt;
+}
+
+#has-timeline .has-aria-label-top {
+    margin: 5pt 0;
+}
+
+#has-timeline .emoji--stage {
+    position: absolute;
+    left: -8pt;
+}
+
+@media screen and (max-width: 640px) {
+
+    #contentinfo {
+        display: block;
+    }
+
+    #contentinfo > * {
+        margin-bottom: var(--bigskip) ;
+    }
+
+}

assets/css/component/fediverse.css

@@ -0,0 +1,147 @@
+#comments noscript {
+    margin: var(--medskip) 0;
+}
+
+#discussion-starter {
+    margin-bottom: var(--medskip);
+}
+
+#mastodon-stats {
+    margin-left: auto;
+}
+
+#mastodon-comments,
+#bsky-comments,
+#fediverse-comments {
+    padding: 0;
+    list-style: none;
+    width: var(--golden-ratio);
+}
+
+#comments li,
+#comments li > ul {
+    margin-top: 1rem;
+    list-style: none;
+}
+
+.fediverse-comment {
+    margin: 1rem 0 1rem calc(var(--mul) * var(--indent));
+    border-left: 3pt solid var(--ac);
+    background: #80808008;
+    padding: 1rem 1rem 1ex;
+    overflow: auto;
+}
+
+.fediverse-comment.bsky {
+    --ac: #1185fe;
+}
+
+.fediverse-comment.mstd {
+    --ac: #563acc;
+}
+
+.fediverse-comment > .author > img {
+    margin-right: 12pt;
+}
+
+.fediverse-comment .content {
+    margin-left: 4rem;
+    line-height: calc(var(--baselineStretch) * 1.272);
+}
+
+.fediverse-comment .par a {
+    max-width: 100%;
+    vertical-align: bottom;
+    white-space: break-spaces;
+}
+
+.fediverse-comment > footer {
+    display: flex;
+    align-items: center;
+    margin-top: 1rem;
+    margin-left: 3.5rem;
+    white-space: nowrap;
+}
+
+.fediverse-comment > footer .stat {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 5pt;
+}
+
+.attachments,
+#comments > summary {
+    display: flex;
+    overflow: auto;
+}
+
+.attachments > * {
+    flex-shrink: 0;
+    width: 100%;
+    height: auto;
+}
+
+.attachments img {
+    width: 100%;
+    height: auto;
+}
+
+.stat > * {
+    display: inline-flex;
+    align-items: center;
+    padding: 2pt;
+    color: var(--mid);
+    gap: 2pt;
+}
+
+.stat > *::before {
+    vertical-align: text-top;
+    font-family: "base-ui";
+}
+
+.stat > * > span {
+    font-size: 0.8em;
+}
+
+a.replies.active,
+a.reblogs.active {
+    color: var(--ac);
+}
+
+a.favourites.active {
+    color: var(--i3i);
+}
+
+.fediverse-comment .date {
+    margin-left: auto;
+    padding-left: 1rem;
+    color: var(--mid);
+    font-size: calc(10pt * var(--fontScale));
+}
+
+@media (max-width: 960px) {
+    .fediverse-comment .content,
+    .fediverse-comment > footer {
+        margin-left: 0;
+    }
+
+}
+
+@media print {
+    .fediverse-comment {
+        position: relative;
+        background: none;
+        padding-bottom: 0;
+    }
+
+    .fediverse-comment .date {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .fediverse-comment .stat {
+        display: none !important;
+    }
+
+}

assets/css/component/garden.css

@@ -0,0 +1,20 @@
+.st {
+    display: inline-block;
+    margin: 0 1ex 0 0;
+    background: var(--svg) 50% / cover;
+    padding: 0.5em;
+    width: 1.5em;
+    height: 1.5em;
+}
+
+.budding {
+    --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' version='1.1' width='1em' height='1em' viewBox='0 0 60 60'><defs><style type='text/css'>path{stroke:gray;stroke-width:3;stroke-linecap:round;fill:none} %23lf>g{transform-origin:top center} %23lfr{animation:lfr 5s infinite} %23lfl{animation:lfl 5s infinite} @keyframes lfr{ 0%, 100%{transform:unset} 25%, 75%{transform:rotate(45deg) translateX(calc(100% / 6))} 50%{transform:translateX(calc(100% / -3))}} @keyframes lfl{ 0%, 100%{transform:unset} 25%, 75%{transform:rotate(-45deg) translateX(calc(100% / -6))} 50%{transform:translateX(calc(100% / 3))}} </style></defs><g id='lf'><g id='lfl'><path d='M30 50c-11,0 -20,-9 -20,-20 M10 30c11,0 20,9 20,20'/><path d='M10 30c0,-11 9,-20 20,-20 M30 10c0,11 -9,20 -20,20'/></g><g id='lfr'><path d='M30 10c11,0 20,9 20,20 M50 30c-11,0 -20,-9 -20,-20'/><path d='M50 30c0,11 -9,20 -20,20 M30 50c0,-11 9,-20 20,-20'/></g></g></svg>");
+}
+
+.evergreen {
+    --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' version='1.1' width='1em' height='1em' viewBox='0 0 60 60'><defs><style type='text/css'>path{stroke:gray;stroke-width:3;stroke-linecap:round;fill:none} %23lf{animation:rot 2.5s linear infinite;transform-origin:center} %23lfr{transform:translateX(calc(100% / -3))} %23lfl{transform:translateX(calc(100% / 3))} @keyframes rot{0%{transform:unset}100%{transform:rotate(360deg)}} </style></defs><g id='lf'><g id='lfl'><path d='M30 50c-11,0 -20,-9 -20,-20 M10 30c11,0 20,9 20,20'/><path d='M10 30c0,-11 9,-20 20,-20 M30 10c0,11 -9,20 -20,20'/></g><g id='lfr'><path d='M30 10c11,0 20,9 20,20 M50 30c-11,0 -20,-9 -20,-20'/><path d='M50 30c0,11 -9,20 -20,20 M30 50c0,-11 9,-20 20,-20'/></g></g></svg>");
+}
+
+.seedling {
+    --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' version='1.1' width='1em' height='1em' viewBox='0 0 60 60'><defs><style type='text/css'>path{stroke:gray;stroke-width:3;stroke-linecap:round;fill:none} %23lf{animation:rot 2.5s infinite alternate;transform-origin:center} @keyframes rot{ 0%{transform:rotate(0deg) scale(16%)} 100%{transform:rotate(360deg) scale(100%)}} </style></defs><g id='lf'><g id='lfl'><path d='M30 50c-11,0 -20,-9 -20,-20 M10 30c11,0 20,9 20,20'/><path d='M10 30c0,-11 9,-20 20,-20 M30 10c0,11 -9,20 -20,20'/></g><g id='lfr'><path d='M30 10c11,0 20,9 20,20 M50 30c-11,0 -20,-9 -20,-20'/><path d='M50 30c0,11 -9,20 -20,20 M30 50c0,-11 9,-20 20,-20'/></g></g></svg>");
+}

assets/css/component/hero.css

@@ -0,0 +1,116 @@
+/*
+<!----- V container ----->
+<div class='has-carousel'>
+    <!--- H container --->
+    <div class='carousel'>
+        <div>----  <div>----  <div>----  <div>---- <div>----
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        |       |  |       |  |       |  |       |  |       |
+        ---</div>  |       |  ---</div>  |       |  ---</div>
+                   ---</div>             ---</div>
+    </div>
+<div>
+*/
+.hero {
+    display: flex;
+    position: relative;
+}
+
+.hero__image {
+    display: flex;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    width: 50%;
+    height: fit-content;
+}
+
+.hero__image.auto {
+    height: auto;
+    max-height: 1024px;
+}
+
+.hero__image img {
+    margin-left: auto;
+    padding: 2rem;
+    max-width: 100%;
+    max-height: calc(var(--vbody) - 14.8rem - 1rem - 2ex);
+    object-fit: contain;
+}
+
+.hero__image.auto img {
+    object-fit: cover;
+}
+
+.hero__content {
+    padding: 2rem 0;
+    width: 100%;
+    font-size: var(--small);
+}
+
+.hero__image + .hero__content {
+    width: 50%;
+    max-width: 27rem;
+}
+
+.hero__content h1,
+.hero__content h2,
+.hero__content h3 {
+    margin: 4pt 0;
+    line-height: 1.2;
+    font-size: var(--LARGE);
+    font-weight: bold;
+    font-style: normal;
+}
+
+.hero__content p {
+    --col: 27rem;
+    max-width: var(--col);
+}
+
+@media (max-width: 960px) {
+
+    .hero {
+        width: 100%;
+    }
+
+}
+
+@media (max-width: 640px) {
+
+    .hero {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .hero > *,
+    .hero__image + .hero__content {
+        align-self: center;
+        width: 86%;
+    }
+
+    .hero__image {
+        position: inherit;
+        width: unset;
+        height: unset;
+    }
+
+}
+
+@media (max-width: 480px) {
+
+    .hero__image.auto {
+        max-height: calc(var(--vbody) - 15.8rem - 2ex);
+    }
+
+}
+
+@media (max-width: 480px) {
+
+    .hero img {
+        padding: 1rem;
+    }
+
+}

assets/css/component/keyframe.css

@@ -0,0 +1,85 @@
+@keyframes ellipsis {
+    0% {content: '...';}
+    25% {content: '';}
+    50% {content: '.';}
+    100% {content: '..';}
+}
+
+@-webkit-keyframes ellipsis {
+    0% {content: '...';}
+    25% {content: '';}
+    50% {content: '.';}
+    100% {content: '..';}
+}
+
+@-webkit-keyframes idle {
+    from, to {border-color: var(--paper);}
+    50% {border-color: transparent;}
+}
+
+@keyframes idle {
+    from, to {border-color: var(--paper);}
+    50% {border-color: transparent;}
+}
+
+@-webkit-keyframes blinking {
+    from, to {opacity: 1;;}
+    50% {opacity: 0;}
+}
+
+@keyframes blinking {
+    from, to {opacity: 1;;}
+    50% {opacity: 0;}
+}
+
+@keyframes expand {
+    from {
+        -webkit-transform: scale(1 , 0);
+           -moz-transform: scale(1 , 0);
+            -ms-transform: scale(1 , 0);
+             -o-transform: scale(1 , 0);
+                transform: scale(1 , 0);
+    }
+    to {
+        -webkit-transform: scale(1 , 1);
+           -moz-transform: scale(1 , 1);
+            -ms-transform: scale(1 , 1);
+             -o-transform: scale(1 , 1);
+                transform: scale(1 , 1);
+    }
+}
+
+@-webkit-keyframes expand {
+    from {
+        -webkit-transform: scale(1 , 0);
+                transform: scale(1 , 0);
+    }
+    to {
+        -webkit-transform: scale(1 , 1);
+                transform: scale(1 , 1);
+    }
+}
+
+@media (prefers-reduced-motion) {
+
+    @keyframes expand {
+        from {
+            -webkit-transform: unset;
+               -moz-transform: unset;
+                -ms-transform: unset;
+                 -o-transform: unset;
+                    transform: unset;
+        }
+    }
+
+    @-webkit-keyframes expand {
+        from {
+            -webkit-transform: unset;
+               -moz-transform: unset;
+                -ms-transform: unset;
+                 -o-transform: unset;
+                    transform: unset;
+        }
+    }
+
+}

assets/css/component/link.css

@@ -0,0 +1,155 @@
+@-webkit-keyframes underline {
+    from {
+        border-image: linear-gradient(to right, transparent, transparent) 1;
+    }
+
+    50% {
+        border-image: linear-gradient(to right, var(--ac), transparent) 1;
+    }
+
+    to {
+        border-image: linear-gradient(to right, var(--ac), var(--ac)) 1;
+    }
+}
+
+@-moz-keyframes underline {
+    from {
+        border-image: linear-gradient(to right, transparent, transparent) 1;
+    }
+
+    50% {
+        border-image: linear-gradient(to right, var(--ac), transparent) 1;
+    }
+
+    to {
+        border-image: linear-gradient(to right, var(--ac), var(--ac)) 1;
+    }
+}
+
+@keyframes underline {
+    from {
+        border-image: linear-gradient(to right, transparent, transparent) 1;
+    }
+
+    50% {
+        border-image: linear-gradient(to right, var(--ac), transparent) 1;
+    }
+
+    to {
+        border-image: linear-gradient(to right, var(--ac), var(--ac)) 1;
+    }
+}
+
+a {
+    text-decoration: none;
+}
+
+a,
+.anchor,
+.list-day a span,
+#has-l10n summary,
+#has-a11y-summary {
+    --anm: none;
+    border-bottom: 2pt solid transparent;
+}
+
+a:hover,
+a:focus,
+.anchor:hover,
+.anchor:focus,
+.list-day a:hover span,
+.list-day a:focus span,
+#has-l10n summary:hover,
+#has-l10n summary:focus,
+#has-l10n[open] summary,
+#has-a11y-summary:hover,
+#has-a11y-summary:focus,
+#has-a11y[open] #has-a11y-summary {
+    --anm: underline 127ms;
+    border-color: var(--ac);
+}
+
+a.cta {
+    margin: 1ex;
+    border: 2pt solid var(--fg);
+    border-radius: 1ex;
+    background: var(--fg);
+    padding: 6pt 16pt;
+    text-align: center;
+    color: var(--bg);
+    font-weight: 550;
+}
+
+a.cta.s {
+    background: var(--bg);
+    color: var(--fg);
+}
+
+a.cta:hover,
+a.cta:focus {
+    --anm: none;
+    outline: 2pt solid var(--fg);
+    border-color: var(--bg);
+    background: var(--fg);
+    color: var(--bg);
+}
+
+.rounded li {
+    margin: 0.5ex;
+    display: inline-block;
+}
+
+.rounded a {
+    display: inline-flex;
+    border: var(--border);
+    border-radius: 2rem;
+    background: #80808008;
+    padding: 0.5ex 1em;
+    color: var(--fg);
+    gap: 1pt;
+}
+
+.rounded a:hover,
+.rounded a:focus {
+    --anm: none;
+    border: 1pt solid var(--fg);
+}
+
+.invert a {
+    background: var(--fg) !important;
+    color: var(--bg) !important;
+}
+
+.invert a:visited {
+    color: var(--bg);
+}
+
+.invert a:hover,
+.invert a:focus {
+    --anm: none;
+    background: var(--bg) !important;
+    color: var(--fg) !important;
+}
+
+.has-hash a {
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+    font-size: var(--footnotesize);
+}
+
+.has-hash a:hover,
+.has-hash a:focus {
+    --anm: none;
+}
+
+#term .section-title .tag::before,
+.has-hash a::before {
+    content: '#';
+}
+
+@media (max-width: 480px) {
+    a.cta {
+        display: block;
+        width: 100%;
+    }
+}

assets/css/component/logotype.css

@@ -0,0 +1,107 @@
+/*  _____     _      _   _    ____  __   __
+    |  ___|  / \    | \ | |  / ___| \ \ / /
+    | |_    / _ \   |  \| | | |      \ V /
+    |  _|  / ___ \  | |\  | | |___    | |
+    |_|   /_/   \_\ |_| \_|  \____|   |_|
+
+    <svg id='logotype__svg'
+        xmlns...
+        width='<!--estimated width-->'
+        >
+        <text id='logotype__svg__text'y='74%'>
+         FANCY LOGOTYPE
+        </text>
+    </svg>
+
+    simplified from :
+    https://codepen.io/alvarotrigo/pen/rNbxNWg */
+
+#logo {
+    --h: calc(3.33rem - 10pt);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 5pt 0;
+    border: none;
+    max-width: calc(100% - 5rem);
+    height: var(--h);
+}
+
+#logo > * {
+    height: var(--h);
+}
+
+#logo #logotype__text {
+    --anm: dash 30s infinite alternate;
+    text-transform: uppercase;
+    letter-spacing: 0.2ex;
+    font-family: var(--sf), sans-serif;
+    font-size: calc(27pt * var(--fontScale));
+    font-weight: 550;
+    stroke: var(--off);
+    stroke-width: 1px;
+}
+
+#logo:focus #logotype__text {
+    --anm: none;
+    outline-color: var(--off);
+    stroke: none;
+}
+
+@-webkit-keyframes dash {
+    0% {
+        fill:var(--off);
+        stroke-dasharray: 0 50%;
+        stroke-dashoffset: 20%;
+    }
+
+    100% {
+        fill: #0000;
+        stroke-dasharray: 50% 0;
+        stroke-dashoffset: -20%;
+    }
+}
+
+@keyframes dash {
+    0% {
+        fill: var(--off);
+        stroke-dasharray: 0 50%;
+        stroke-dashoffset: 20%;
+    }
+
+    100% {
+        fill: #0000;
+        stroke-dasharray: 50% 0;
+        stroke-dashoffset: -20%;
+    }
+}
+
+/* logomark default */
+
+#logomark--dark + #logomark {
+    display: inline-block;
+}
+
+@media (prefers-color-scheme: light) {
+
+    #logomark--dark {
+        display: none;
+    }
+
+    #logomark--dark + #logomark {
+        display: inline-block;
+    }
+
+}
+
+@media (prefers-color-scheme: dark) {
+
+    #logomark--dark {
+        display: inline-block;
+    }
+
+    #logomark--dark + #logomark {
+        display: none;
+    }
+
+}

assets/css/component/mainfooter.css

@@ -0,0 +1,11 @@
+/* main footer bar */
+
+#main-footer {
+    border-radius: 1ex;
+    background: #000;
+    color: #fff;
+}
+
+#main-footer a {
+    color: #fff;
+}

assets/css/component/marginpar.css

@@ -0,0 +1,79 @@
+.marginpar {
+    left: var(--golden-ratio);
+    margin-right: 0;
+    margin-left: calc(var(--marginparwidth) * -1);
+    font-size: var(--small);
+    font-style: italic;
+}
+
+.marginpar.abs {
+    /* will ignore clear attribute */
+    position: absolute;
+    right: var(--void);
+    left: unset;
+}
+
+.marginpar-ctrl,
+.marginpar-ctrl + label::before {
+    position: absolute;
+    top: -100vh;
+}
+
+.marginpar-ctrl + .has-counter::before {
+    counter-increment: marginnote;
+    position: unset;
+}
+
+.marginpar-ctrl + .has-counter::before,
+.has-counter + .marginpar::before {
+    --anm: unset !important;
+    display: inline-block !important;
+    vertical-align: super;
+    color: inherit !important;
+    font: .7rem normal inherit;
+    content: '[' counter(marginnote) ']' !important;
+}
+
+.has-counter + .marginpar::before {
+    position: absolute;
+    left: 0;
+    width: var(--indent);
+    text-align: center;
+    padding-top: 1ex;
+}
+
+.marginpar-ctrl + label.has-counter {
+    display: unset;
+    padding: 0;
+}
+
+@media screen and (max-width: 640px) {
+
+    .marginpar-ctrl + label {
+        display: inline-flex;
+        padding: 2pt;
+    }
+
+    .marginpar-ctrl + label::before {
+        position: unset;
+        display: block !important;
+        left: 0;
+    }
+
+    .marginpar-ctrl:checked + label::before {
+        --anm: unset;
+        color: var(--ac);
+    }
+
+    .marginpar {
+        display: none;
+        float: unset;
+    }
+
+    .marginpar-ctrl:checked + label + .marginpar {
+        display: block;
+        position: unset;
+        margin: 1ex 0;
+    }
+
+}

assets/css/component/menu.css

@@ -0,0 +1,553 @@
+ul.delimiter,
+ul.breadcrumb,
+nav > ul,
+ul[role=presentation] {
+    margin: 0;
+    list-style: none;
+    font-size: inherit;
+}
+
+ul.delimiter,
+ul.delimiter li,
+ul.inline,
+ul.inline li,
+nav > ul,
+nav > ul > li {
+    display: inline;
+    padding: 0;
+}
+
+/* container */
+
+body > header,
+body > header > nav {
+    display: flex;
+    z-index: 2;
+}
+
+#top-nav {
+    margin-left: auto;
+    font-weight: bold;
+}
+
+#top-nav[open],
+#has-main-menu {
+    flex: 1;
+}
+
+#top-nav > nav {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1ex;
+}
+
+#logo + #top-nav #main-menu,
+#logo + #top-nav #main-menu .l1 {
+    /* flush item to right-end when logotype on the left */
+    justify-content: flex-end;
+}
+
+#main-menu .l1 {
+    display: flex;
+    gap: 1ex;
+}
+
+/* menu icon */
+
+#top-nav .icon {
+    position: relative;
+    top: -0.05em;
+    margin-right: 0.3em;
+}
+
+.menu-icon::before {
+    padding: 1pt;
+    font-family: 'base-ui';
+    content: '\e90b';
+}
+
+#has-more-menu > summary {
+    width: 43pt;
+}
+
+#has-i18n > summary::before,
+#has-i18n a::before,
+#has-l10n a::before {
+    background: var(--flag) center/cover;
+    content: '';
+    width: 1em;
+    height: 0.75em;
+    border-radius: 2pt;
+}
+
+#has-a11y[open] > summary .icon::before,
+#has-search[open] .icon::before,
+details[open] > summary > .menu-icon::before {
+    --anm: blinking 2s step-end infinite;
+    color: var(--ac);
+}
+
+/* on 'hull' viewport */
+
+#i18n-menu,
+#more-menu,
+.on-hull,
+.screening {
+    /* 'hull' --vbody container */
+    position: fixed;
+    top: var(--vhead);
+    left: 0;
+    width: 100vw;
+    height: var(--vbody);
+}
+
+.screening {
+    /* obscure main body  */
+    --blur: blur(0.2vmin);
+    --dim: brightness(0.96);
+    z-index: -1;
+    background-color: #80808008;
+    -webkit-backdrop-filter: var(--blur) var(--dim);
+            backdrop-filter: var(--blur) var(--dim);
+}
+
+/* item on 'deck' */
+
+.on-deck,
+a#has-i18n {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto 0;
+    padding: unset;
+    min-width: var(--vhead);
+    height: calc(var(--vhead) - 12pt);
+    max-height: 4.2rem;
+}
+
+#has-i18n > .on-deck {
+    padding: 0 1ex;
+    width: unset;
+}
+
+/* item on 'plank' */
+
+.on-plank {
+    /* add on-plank */
+    display: flex;
+    flex-direction: column;
+    border: var(--border);
+    border-radius: 1ex;
+    background: var(--bg);
+    padding: 1.414ex;
+    width: fit-content;
+    max-height: calc(var(--vbody) - 2rem);
+    overflow-y: auto;
+    gap: 1ex;
+}
+
+.on-plank ul {
+    display: flex;
+    flex-direction: column;
+    margin: 0 1ex;
+    border-right: var(--bound);
+    padding: 1ex;
+    gap: 1ex;
+}
+
+details[open] .on-plank,
+.l1 details[open] > ul,
+.marginpar-ctrl:checked + label + .marginpar {
+    --anm: expand 99ms forwards;
+    --tso: top;
+}
+
+#main-menu .on-plank {
+    position: fixed;
+    top: calc(var(--vhead) + 1rem);
+    max-width: 21rem;
+    translate: -1.414ex;
+}
+
+#i18n-menu > .on-plank,
+#more-menu > .on-plank {
+    /* .on-hull > .on-plank */
+    margin: 1rem var(--void) 1rem auto;
+    max-width: var(--max-width);
+}
+
+/* visible menu item */
+
+#has-l10n a,
+#top-nav a,
+.anchor {
+    display: flex;
+    padding: 1ex;
+    width: 100%;
+    color: var(--fg);
+}
+
+#top-nav a.has-desc {
+    flex-direction: column;
+}
+
+summary.anchor .has-aria-label::after {
+    color: var(--mid);
+    font-size: 0.9em;
+    font-weight: normal;
+}
+
+.marginpar-ctrl + label::before,
+.anchor:after {
+    /* add indicator [v] */
+    --tst: 200ms ease-out;
+    position: relative;
+    top: 0.23em;
+    left: 0.43em;
+    align-self: center;
+    margin-left: auto;
+    background: linear-gradient(to top, transparent 49%, var(--g18) 51%);
+    -webkit-background-clip: text;
+            background-clip: text;
+    color: transparent;
+    font: 8pt 'base-ui';
+    content: '\e913';
+}
+
+.anchor:hover::after {
+    background: linear-gradient(to top, transparent 49%, var(--ac) 51%);
+    -webkit-background-clip: text;
+            background-clip: text;
+    color: transparent;
+}
+
+#has-i18n .anchor::after {
+    left: unset;
+}
+
+.marginpar-ctrl:checked + label::before,
+details[open] > .anchor:after {
+    /* change indicator state [x] */
+    --anm: blinking 3s step-end infinite;
+    background: unset;
+    top: 0;
+    color: var(--g18);
+}
+
+details[open] > .anchor.on-deck:after {
+    /* make opened <details> element more prominent */
+    color: red;
+}
+
+/* bilingual */
+
+a#has-i18n {
+    align-items: end;
+    width: auto;
+    font-size: .9em;
+    font-weight: 550;
+    gap: 3pt;
+}
+
+a#has-i18n > .alt,
+a#has-i18n:hover > .act,
+a#has-i18n:focus > .act,
+a#has-i18n:active > .act {
+    /* active/current language */
+    color: var(--g18);
+}
+
+a#has-i18n:hover > .alt,
+a#has-i18n:focus > .alt,
+a#has-i18n:active > .alt {
+    /* alternate language */
+    color: var(--fg);
+}
+
+/* multilingual */
+
+#has-i18n .on-deck {
+    gap: 3pt;
+}
+
+#has-l10n {
+    display: inline-block;
+}
+
+#has-l10n summary {
+    display: block !important;
+    padding: 0 1.4ex 0 4pt;
+    font-size: 0.9em;
+}
+
+#has-l10n > summary::before {
+    font-family: 'base-ui';
+    content: '\e90a\a0';
+}
+
+#has-l10n a,
+#i18n-menu a {
+    align-items: center;
+    gap: 1ex;
+}
+
+.iso639 {
+    padding-top: 1pt;
+}
+
+#has-l10n .on-plank {
+    position: absolute;
+    z-index: 1;
+    margin-top: 1ex;
+    border: var(--border);
+    background: var(--bg);
+    width: auto;
+}
+
+#main-footer a::after,
+.parent-anchor a::after,
+#i18n-menu a::after,
+#content a::after {
+    --tsf: rotate(45deg);
+    display: inline-block;
+    margin-top: 0.3em;
+    margin-left: auto;
+    font: 0.7em 'base-ui';
+    content: '\e902';
+}
+
+.parent-anchor a::after,
+#i18n-menu a::after {
+    color: var(--g18);
+}
+
+.hero nav a {
+    display: inline-block;
+    position: relative;
+    color: var(--fg);
+}
+
+.hero nav .t {
+    top: 150%;
+}
+
+.hero nav a .icon {
+    display: inline-flex;
+    margin: 2pt;
+    padding: 6pt;
+    font-size: var(--large);
+}
+
+@media (max-width: 640px) {
+
+    /* container behaviour */
+
+    #top-nav * {
+        outline: none !important;
+    }
+
+    #top-nav[open] > nav {
+        --anm: expand 99ms forwards;
+        --tso: top;
+    }
+
+    li.lfill {
+        margin-left: unset;
+    }
+
+    .has-childfree li,
+    .has-childfree li.lfill {
+        margin: auto;
+    }
+
+    #main-menu {
+        display: unset;
+    }
+
+    #main-menu .l1 {
+        flex-direction: column;
+    }
+
+    /* swap menu-icon */
+
+    #top-nav > summary,
+    #top-nav[open] > summary  {
+        display: flex !important;
+        margin-left: auto;
+        width: 43pt;
+    }
+
+    #has-more-menu > summary {
+        width: 100%;
+    }
+
+    #has-more-menu .t,
+    #has-search .t {
+        display: initial;
+        position: unset;
+        visibility: unset;
+        background: unset;
+        width: 100%;
+        color: inherit;
+        font: inherit;
+    }
+
+    /* swap screen element */
+
+    #top-nav-screen.screening {
+        display: block;
+        background-color: var(--bg);
+        height: calc(100vh - var(--vhead));
+    }
+
+    /* swap hull element */
+
+    #top-nav > nav {
+        position: fixed;
+        top: var(--vhead);
+        left: 0;
+        flex-direction: column;
+        justify-content: unset;
+        z-index: 3;
+        padding: 1.414ex;
+        width: 101vw;
+        height: var(--vbody);
+        overflow-y: auto;
+    }
+
+    #i18n-menu,
+    #more-menu,
+    #has-search-fallback,
+    #main-menu .on-plank {
+        /* also unset main menu plank */
+        position: unset;
+        width: unset;
+        max-width: unset;
+        height: unset;
+    }
+
+    /* reorder hull item */
+
+    #has-search {
+        order: 1;
+    }
+
+    #has-main-menu {
+        flex: unset;
+        order: 2;
+    }
+
+    #has-more-menu {
+        order: 3;
+    }
+
+    #has-i18n,
+    #bi18n {
+        order: 4;
+        margin: auto 1ex 2rem;
+    }
+
+    /* redefine deck element */
+
+    #top-nav > nav .on-deck {
+        justify-content: unset;
+        height: unset;
+    }
+
+    #top-nav > nav #has-i18n .on-deck {
+        padding: 1ex;
+    }
+
+    /* swap plank element */
+
+    .on-plank {
+        border: unset;
+        background: unset;
+        min-width: unset;
+        max-height: unset;
+    }
+
+    #main-menu .on-plank {
+        margin: 0 1ex;
+        border-right: var(--bound);
+        border-radius: 0;
+        padding: 1ex;
+        translate: unset;
+    }
+
+    #i18n-menu > .on-plank ,
+    #more-menu > .on-plank {
+        /* .on-hull > .on-plank */
+        margin: unset;
+        padding: 0;
+        width: 100%;
+    }
+
+    #has-main-menu,
+    #has-more-menu,
+    #has-search {
+        /* make as plank */
+        margin: 1ex;
+        padding: 1ex;
+    }
+
+    #has-more-menu {
+        border: var(--border);
+        border-radius: 1ex;
+    }
+
+    #has-more-menu[open],
+    #author-name-menu {
+        border: none;
+    }
+
+    details[open] > .anchor.on-deck:after {
+        color: var(--g18);
+    }
+
+    /* bilingual */
+
+    #bi18n .t {
+        display: block !important;
+        position: unset;
+        visibility: unset;
+        background: unset;
+        width: unset;
+        color: unset;
+        font: unset;
+    }
+
+    a#has-i18n::before {
+        margin: auto 0;
+        border-radius: 2pt;
+        background: var(--flag) center/cover;
+        width: 1em;
+        height: 0.75em;
+        content: '';
+    }
+
+    /* multilingual */
+
+    #i18n-menu {
+        margin-top: 1ex;
+    }
+
+    .languangeName {
+        display: block !important;
+        margin-left: 0.5ex;
+    }
+
+    /* hide desktop element */
+
+    a#has-i18n > .t,
+    #top-nav > nav .screening,
+    #top-nav > summary > .t,
+    #has-search[open] > summary,
+    #has-more-menu[open] > summary,
+    #has-more-menu .menu-icon,
+    #has-search .icon,
+    .iso639 {
+        display: none;
+    }
+
+}

assets/css/component/search.css

@@ -0,0 +1,210 @@
+#has-search > summary::before {
+    padding: 0 1ex;
+    font-family: 'base-ui';
+    font-weight: 400;
+    content: '\e911';
+}
+
+.form.on-plank,
+.pagefind-ui {
+    margin: 1rem var(--void) 1rem auto;
+    width: calc(var(--marginparwidth) - 1rem);
+    min-width: 17rem;
+    max-height: calc(var(--vbody) - 2rem);
+    font-weight: normal;
+}
+
+.pagefind-ui {
+    display: flex;
+    flex-direction: column;
+    border: var(--border);
+    border-radius: 1ex;
+    background: var(--bg);
+    padding: 1.414ex;
+    overflow-y: auto;
+    gap: 1ex;
+}
+
+#has-search[open] > summary > .t,
+.pagefind-ui__search-clear {
+    display: none;
+}
+
+.pagefind-ui__drawer p {
+    margin: 0;
+}
+
+.form.on-plank {
+    flex-direction: row;
+}
+
+.form {
+    align-items: center;
+}
+
+/* the search box */
+
+.form__input {
+    flex: 1;
+    border: none;
+    border-radius: 2rem 0 0 2rem;
+    background: none;
+    padding: 0;
+    padding-left: 1em;
+    color: var(--fg);
+    font-family: var(--sf), sans-serif;
+}
+
+.form.on-plank .form__input {
+    flex: 1;
+    border-bottom: 2pt solid var(--g18s);
+    border-radius: 0.25ex;
+    padding: 1ex;
+}
+
+#duckduckgo .form__input {
+    --ac: #de5833;
+}
+
+#mojeek .form__input {
+    --ac: #7ab93c;
+}
+
+.pagefind-ui__search-input:hover,
+.pagefind-ui__search-input:focus,
+.form.on-plank .form__input:hover,
+.form.on-plank .form__input:focus {
+    --anm: underline 127ms ease-in;
+    outline: none !important;
+    border-color: var(--ac);
+    -webkit-animation: var(--anm);
+       -moz-animation: var(--anm);
+         -o-animation: var(--anm);
+            animation: var(--anm);
+}
+
+/* the search button */
+
+.pagefind-ui__button,
+.form__reset,
+.form__button {
+    display: inline-flex;
+    position: relative;
+    border: none;
+    border-radius: 0 50% 50% 0;
+    background: none;
+    padding: 0;
+}
+
+.form.on-plank .form__button,
+.form.on-plank .form__button > img {
+    width: 2rem;
+    height: 2rem;
+    object-fit: contain;
+}
+
+#duckduckgo .form__input:hover + .form__button,
+#duckduckgo .form__input:focus + .form__button {
+    --tsf: scaleX(-1);
+}
+
+.form.on-plank .form__button:hover,
+.form.on-plank .form__button:focus {
+    --tsf: scale(1.1);
+}
+
+.form:invalid .form__reset {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.form:valid .form__reset {
+    opacity: 1;
+    pointer-events: all;
+}
+
+/* additional pagefind styles */
+
+.pagefind-ui__form {
+    display: flex;
+    flex-direction: column;
+    gap: 1ex;
+}
+
+.pagefind-ui__search-input {
+    margin: 1ex 1ex 0.5ex;
+    border: 0;
+    border-bottom: 2pt solid var(--g18s);
+    background: none;
+    padding: 1ex !important;
+    color: var(--fg);
+}
+
+.pagefind-ui__drawer {
+    margin: 0 1ex;
+    padding: 0 1ex;
+}
+
+p.pagefind-ui__message {
+    margin: 1ex 0;
+}
+
+.pagefind-ui__result-excerpt {
+    color: var(--mid);
+    font-size: var(--small);
+}
+
+ol.pagefind-ui__results {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.pagefind-ui__result {
+    margin-bottom: 1rem;
+}
+
+a.pagefind-ui__result-link {
+    border-bottom: 0 !important;
+    padding: 1ex 1ex 0.5ex !important;
+    font-weight: 550;
+}
+
+.pagefind-ui__result-excerpt {
+    padding: 0 1ex;
+    font-size: 0.9em;
+}
+
+@media (max-width: 640px) {
+
+    #has-search .on-deck {
+        flex-direction: row-reverse;
+    }
+
+    #has-search .t {
+        padding: 1ex;
+        text-align: unset;
+    }
+
+    #search,
+    #has-search-fallback {
+        position: unset;
+        padding: 0;
+        width: unset;
+        height: unset;
+    }
+
+    .pagefind-ui,
+    .form.on-plank {
+        margin: 0;
+        border: unset;
+        background: unset;
+        padding: 0;
+        width: 100%;
+    }
+
+    #duckduckgo {
+        padding: 1ex;
+    }
+
+}

assets/css/component/share.css

@@ -0,0 +1,148 @@
+.form#mastodon {
+    display: inline-flex;
+    width: 100%;
+}
+
+#mastodonInstance {
+    /* passive mode; display as button */
+    display: none;
+    height: 2.654rem;
+}
+
+#has-mastodon.active {
+    /* active mode display as form */
+    flex: 1;
+}
+
+#has-mastodon.active #mastodonInstance {
+    display: initial !important;
+}
+
+#has-mastodon.active #mastodon {
+    border: 3pt solid #563acc02;
+    border-radius: 2rem;
+    background: #563acc22;
+}
+
+#mastodonInstance ~ button:focus .mastodon,
+#mastodonInstance:focus ~ button .mastodon {
+    background: #4f36b5;
+    color: #fff;
+}
+
+#has-share {
+    margin:var(--vskip);
+    padding-bottom: 2pt; 
+}
+
+#has-share[open] {
+    /* strut */
+    padding: 0;
+}
+
+#share {
+    float: left;
+    margin: 5pt 0;
+}
+
+#has-share[open] #share {
+    background: unset;
+    color: unset;
+}
+
+#has-share[open] #share::after {
+    content: ':';
+}
+
+#has-share ul {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#has-share a {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    border: none;
+}
+
+#has-share i {
+    border-radius: 2rem;
+    padding: 0.62rem;
+    font-size: var(--Large);
+}
+
+#has-share i:hover {
+    --tst: 200ms ease-in;
+    opacity: 1;
+}
+
+#has-share a:focus i,
+#has-share i:hover {
+    color: #fff !important;
+}
+
+/* Social sharing button */
+#has-share .email {color: var(--mid)}
+#has-share a:focus .email,
+#has-share .email:hover {background: var(--mid)}
+#has-share .bluesky {color: #1185fe}
+#has-share a:focus .bluesky,
+#has-share .bluesky:hover {background: #0072ce}
+#has-share .facebook {color: #3b5998}
+#has-share a:focus .facebook,
+#has-share .facebook:hover {background: #2d4373}
+#has-share .hackernews {color: #FF6600}
+#has-share a:focus .hackernews,
+#has-share .hackernews:hover {background: #FB6200}
+#has-share .linkedin {color: #0077b5}
+#has-share a:focus .linkedin,
+#has-share .linkedin:hover {background: #046293}
+#has-share .mastodon {color: #563acc}
+#has-share a:focus .mastodon,
+#has-share .mastodon:hover {background: #4f36b5}
+#has-share .pinterest {color: #bd081c}
+#has-share a:focus .pinterest,
+#has-share .pinterest:hover {background: #8c0615}
+#has-share .reddit {color: #5f99cf}
+#has-share a:focus .reddit,
+#has-share .reddit:hover {background: #3a80c1}
+#has-share .telegram {color: #54A9EB}
+#has-share a:focus .telegram,
+#has-share .telegram:hover {background: #4B97D1}
+#has-share .tumblr {color: #35465C}
+#has-share a:focus .tumblr,
+#has-share .tumblr:hover {background: #222d3c}
+#has-share .twitter {color: #55acee}
+#has-share a:focus .twitter,
+#has-share .twitter:hover {background: #2795e9}
+#has-share .vk {color: #507299}
+#has-share a:focus .vk,
+#has-share .vk:hover {background: #43648c}
+#has-share .whatsapp {color: #25D366}
+#has-share a:focus .whatsapp,
+#has-share .whatsapp:hover {background: #1DA851}
+#has-share .xing {color: #1a7576}
+#has-share a:focus .xing,
+#has-share .xing:hover {background: #114C4C}
+
+@media (max-width: 844px) {
+
+    #share {
+        float: unset;
+    }
+
+    #has-mastodon.active {
+        flex: 0 0 100%;
+    }
+
+    #has-mastodon.active #mastodon {
+        margin-bottom: 1ex;
+        max-width: 27em;
+    }
+
+}

assets/css/component/skipper.css

@@ -0,0 +1,54 @@
+#to-content {
+    /* displayed to screen reader,
+        but visually removed to oustide canvas */
+    --tsf: translateY(-100vmax);
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    outline: none !important;
+    background: var(--bg) !important;
+    width: 100vw;
+    height: var(--vhead);
+    }
+
+#to-content:focus {
+    /* replace top nav on focus */
+    --tsf: translate(0);
+}
+
+body > footer > nav {
+    margin-left: auto;
+}
+
+#to-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 2rem;
+    background: var(--bg);
+    width: 2.7rem;
+    height: 2.7rem;
+    color: var(--fg);
+}
+
+#to-top::before {
+    --tsf: rotate(-45deg);
+    display: inline-flex;
+    transition: 0.2s;
+    font-family: 'base-ui';
+    content: '\e902';
+}
+
+#to-top:hover::before,
+#to-top:focus::before {
+    --tsf: unset;
+}
+
+.to-content-top#to-top::before {
+    --tsf: rotate(180deg)
+}

assets/css/component/slide.css

@@ -0,0 +1,179 @@
+/* this style is used inline in list.html */
+
+.carousel__nav {
+    display: flex;
+    position: absolute;
+    right: 2rem;
+    bottom: 1rem;
+    justify-content: flex-end;
+    z-index: 1;
+    width: calc(100% - 4rem);
+    font-size: var(--small);
+}
+
+.carousel__viewport__slide > .carousel__nav {
+    bottom: 0;
+}
+
+.carousel__nav > ul {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.carousel__viewport nav a {
+    display: flex;
+    z-index: 2;
+    font-size: var(--small);
+}
+
+.carousel__viewport__slide__cover {
+    flex: 1 1 40%;
+    padding: 1.5rem 0 3.6rem 1.5rem;
+    height: 100%;
+    max-height: 1024px;
+}
+
+.carousel__viewport__slide__content {
+    margin-bottom: auto;
+    padding: 0 2rem;
+    width: 100%;
+    max-height: calc(100% - 3.6rem);
+    overflow-y: auto;
+}
+
+.carousel__viewport__slide__content h1.section-title {
+    margin: 0 !important;
+    padding: var(--smallskip) 0 1ex;
+    font-size: var(--Large);
+}
+
+.carousel__viewport__slide__content h2 {
+    font-size: var(--large);
+}
+
+.carousel__viewport__slide__content h3 {
+    font-size: var(--normalsize);
+}
+
+.carousel__viewport__slide__content p {
+    max-width: var(--canonic);
+}
+
+
+.carousel__viewport__slide__content .footnotes p,
+.carousel__viewport__slide__cover + .carousel__viewport__slide__content p {
+    max-width: unset;
+}
+
+.carousel__viewport__slide__cover + .carousel__viewport__slide__content {
+    flex: 1 1 60%;
+    margin-bottom: 5rem;
+    height: unset;
+}
+
+.carousel__viewport__slide__cover img {
+    border-radius: 1ex;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* 2 item */
+
+.carousel__viewport__slide > nav a {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--fg);
+}
+
+@media (max-width: 960px) {
+
+    aside.carousel {
+        width: unset;
+    }
+
+}
+
+@media (max-width: 640px) {
+
+    .carousel__nav {
+        right: 0;
+        bottom: 0;
+        width: 100%;
+    }
+
+    .carousel__viewport__slide__cover img,
+    .carousel__nav + .carousel__viewport,
+    .carousel__viewport__slide__content {
+        height: calc(100% - 3rem);
+    }
+
+    .carousel__viewport__slide > .carousel__nav {
+        position: sticky;
+        position: -webkit-sticky;
+        padding-right: 2ex;
+    }
+
+    aside .carousel__viewport > div,
+    aside .carousel__viewport > section,
+    aside .carousel__viewport__slide {
+        flex-direction: column;
+        justify-content: end;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .carousel__viewport__slide__cover {
+        padding: unset;
+        height: unset;
+    }
+
+    .carousel__viewport__slide__cover img {
+        position: absolute;
+        left: 0;
+        border-radius: 1ex;
+        padding: 1rem;
+        max-width: 100%;
+    }
+
+    .carousel__nav + .carousel__viewport .carousel__viewport__slide__cover img {
+        height: 100%;
+    }
+
+    .carousel__viewport__slide__content {
+        padding: 1rem 2rem;
+        max-height: unset;
+    }
+
+    .carousel__nav + .carousel__viewport .carousel__viewport__slide__content:first-child {
+        margin-bottom: 1rem;
+    }
+
+    .carousel__viewport__slide__cover + .carousel__viewport__slide__content {
+        flex: unset;
+        z-index: 0;
+        margin: 1rem 2rem 2rem;
+        border-radius: 1ex;
+        background: var(--bg);
+        padding: 1rem;
+        width: auto;
+    }
+
+    .carousel__viewport__slide__cover + .carousel__viewport__slide__content.white {
+        background: none;
+        color: #fff;
+    }
+
+    .carousel__viewport__slide__cover + .carousel__viewport__slide__content.black {
+        background: none;
+        color: #000;
+    }
+
+    .carousel__nav > ul.rounded {
+        padding: 1ex;
+        width: 100%;
+        text-align: right;
+    }
+
+}

assets/css/custom.css

@@ -0,0 +1,31 @@
+:root {
+    /* default contrast */
+    --ac-light: #36c;
+    --fg-light: #111;
+    --bg-light: #f9f9fb;
+    --midtone: gray;
+    --fg-dark: #f9f9fb;
+    --bg-dark: #111;
+    --ac-dark: #fa0;
+
+    /* less contrast */
+    --ac-light-less: #36c;
+    --fg-light-less: #13253d;
+    --bg-light-less: #e7e2e2;
+    --midtone-less: #7d8490;
+    --fg-dark-less: #e7e2e2;
+    --bg-dark-less: #13253d;
+    --ac-dark-less: #fa0;
+
+    /* more contrast */
+    --ac-light-more: #36c;
+    --fg-light-more: #000;
+    --bg-light-more: #fff;
+    --midtone-more: gray;
+    --fg-dark-more: #fff;
+    --bg-dark-more: #000;
+    --ac-dark-more: #fa0;
+
+    /* mark & selector highlight color */
+    --hl: yellow;
+}

assets/css/layout/_default/baseof.css

@@ -0,0 +1,332 @@
+/*
+    <body
+        id='$layout'
+        class='$colorpalette'
+        >
+        <header>=====[sticky]======</header>
+        <main id='$kind'>
+            <footer id=main-footer></footer>
+        </main>
+        <footer>=====[sticky]======<</footer>
+    </body>
+*/
+
+:root {
+    --golden-ratio: 61.803398%;
+    --canonic: 70.710678%;
+    --max-width: 67rem;
+    --void: calc((29.289322vw - 1rem) / 2); /* 100vw - 70.710678vw */
+    --vhead: 4.2rem;
+    --vfoot: 3.33rem;
+    --vbody: calc(100vh - var(--vhead) - var(--vfoot));
+    --marginparwidth: 27vw; /* --canonic - ( --canonic * --golden-ratio) */
+    --g18: #80808080;
+    --g18s: #80808022;
+    --bound: 1pt dotted var(--g18);
+    --border: 1pt solid var(--g18s);
+    --box-shadow: 0 1px 0.5px var(--g18);
+    --box-shadow-inset: inset 0 1px 5px #0001, 0 1px 0 #fff5, 0 -1px 0 #0005;
+    font-size: calc(var(--fontScale) * 10pt);
+}
+
+::-webkit-scrollbar {
+    /* width: 8pt;
+    height: 8pt; */
+    scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 9pt !important;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--g18);
+    opacity: 0.86;
+    border-radius: 9pt !important;
+}
+
+* {
+    box-sizing: border-box;
+    scrollbar-color: var(--g18) transparent;
+    scrollbar-width: thin;
+    text-rendering: optimizeLegibility;
+    kerning: auto;
+    font-kerning: auto;
+    -webkit-font-feature-settings: 'kern' 1;
+       -moz-font-feature-settings: 'kern' 1;
+            font-feature-settings: 'kern' 1;
+    -webkit-hyphens: auto;
+       -moz-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-after: 3;
+            hyphenate-after: 3;
+    -webkit-hyphenate-before: 3;
+            hyphenate-before: 3;
+    -webkit-hyphenate-lines: 2;
+            hyphenate-lines: 2;
+    orphans: 2;
+    widows: 2;
+}
+
+html {
+    scroll-behavior: smooth;
+    scroll-padding-block-start: var(--vhead);
+}
+
+body {
+    --y6a: #af7c9d; --w8u: #628618; --s8i: #ed7495; --n8e: #6c80b3;
+    --m4i: #355240; --y4i: #921823; --f8a: #7972b6; --s4n: #018ace;
+    --d3u: #654b3c; --r6a: #534b1a; --y4a: #13355b; --k8i: #ee850f;
+    --y6i: #00728c; --o5a: #8d2f4a; --c3u: #5b516a; --s5o: #365b75;
+    --s5e: #493280; --y7i: #00b1dd; --i3i: #e9142a; --t9u: #014d1f;
+    min-height: var(--vbody);
+    line-height: calc(var(--baselineStretch) * 1.414);
+    color: var(--fg);
+    font-family: var(--sf), sans-serif;
+    font-size: var(--normalsize);
+}
+
+body > header {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--vhead);
+}
+
+.marginpar,
+body > main > aside {
+    position: relative;
+    float: right;
+    clear: right;
+    padding-left: var(--indent);
+    width: var(--marginparwidth);
+}
+
+body > footer {
+    display: flex !important;
+    position: -webkit-sticky;
+    position: sticky;
+    bottom: 0;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 2;
+    height: var(--vfoot);
+    font-size: var(--small);
+}
+
+#top,
+.pagewidth {
+    padding-right: var(--void);
+    padding-left: var(--void);
+    /* width: var(--canonic);
+    max-width: var(--max-width); */
+}
+
+.textwidth {
+    width: var(--golden-ratio);
+}
+
+#main-footer {
+    position: relative;
+    margin: 1in 1em 1em;
+    padding: 1.618rem;
+    width: calc(100% - 2em);
+    font-size: var(--small);
+}
+
+#main-footer > div {
+    padding: 0 calc(var(--void) - 1em - 1.618rem);
+}
+
+#main-footer strong,
+#main-footer b,
+#main-footer .section-title,
+#menu-footer::before {
+    padding-bottom: 1ex;
+}
+
+#main-footer ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    line-height: 2;
+}
+
+#main-footer a {
+    margin: 1pt 0;
+    padding: 2pt 0;
+}
+
+#main-footer-primary,
+#main-footer-secondary > *  {
+    border: 0.1pt solid transparent;
+    break-inside: avoid-column;
+}
+
+#main-footer p {
+    margin: 0;
+}
+
+#menu-footer:first-child {
+    column-span: all;
+    text-align: center;
+}
+
+#license + #menu-footer::before,
+#menu-footer a::after {
+    content: unset !important;
+}
+
+div + #unified-footer {
+    margin-top: 1.618rem;
+    border-top: var(--bound);
+    padding-top: 1.618rem !important;
+}
+
+#unified-footer {
+    text-align: center;
+}
+
+#unified-footer p {
+    padding: 1ex 1em;
+    font-size: var(--footnotesize);
+}
+
+@media screen {
+
+    body {
+        /* exit graceful degradation mode inline css */
+        margin: 0 !important;
+        padding: unset !important;
+        max-width: unset !important;
+    }
+
+}
+
+@media (min-width: 1440px) {
+
+    :root {
+        --void: calc((100vw - var(--max-width) - 1rem) / 2) !important;
+        --marginparwidth: calc(var(--max-width) * 0.38196602) !important;
+        /* --max-width - (100% - --golden-ratio) */
+    }
+
+}
+
+@media (max-width: 960px) {
+
+    :root {
+        --void: calc(29.289322vw - var(--vfoot) - var(--vhead)) / 2);
+    }
+
+}
+
+@media (max-width: 640px) {
+
+    :root {
+        --void: var(--vfoot) !important;
+        --marginparwidth: 100% !important;
+        --canonic: 86%;
+        --golden-ratio: 100%;
+    }
+
+    .katex-display {
+        overflow-x: auto;
+    }
+
+}
+
+@media (max-width: 540px) {
+
+    :root {
+        --void: calc(var(--vfoot) / 1.414) !important;
+    }
+
+    #main-footer-primary,
+    #main-footer-secondary {
+        column-span: all;
+    }
+
+}
+
+@media (max-width: 480px) {
+
+    header.pagewidth,
+    footer.pagewidth {
+        --void: calc(var(--vfoot) / 2) !important;
+    }
+
+}
+
+@media (prefers-color-scheme: light) {
+
+    body {
+        --bg: var(--bg-light);
+        --mid: var(--midtone);
+        --fg: var(--fg-light);
+        --ac: var(--ac-light);
+        --off: #000;
+    }
+
+    @media (prefers-contrast: more),
+    (-ms-high-contrast: active) {
+
+        body {
+            --bg: var(--bg-light-more);
+            --mid: var(--midtone-more);
+            --fg: var(--fg-light-more);
+            --ac: var(--ac-light-more);
+        }
+
+    }
+
+    @media (prefers-contrast: less) {
+
+        body {
+            --bg: var(--bg-light-less);
+            --mid: var(--midtone-less);
+            --fg: var(--fg-light-less);
+            --ac: var(--ac-light-less);
+        }
+
+    }
+
+}
+
+@media (prefers-color-scheme: dark) {
+
+    body {
+        --bg: var(--bg-dark);
+        --mid: var(--midtone);
+        --fg: var(--fg-dark);
+        --ac: var(--ac-dark);
+        --off: #fff;
+    }
+
+    @media (prefers-contrast: more),
+    (-ms-high-contrast: active) {
+
+        body {
+            --bg: var(--bg-dark-more);
+            --mid: var(--midtone-more);
+            --fg: var(--fg-dark-more);
+            --ac: var(--ac-dark-more);
+        }
+
+    }
+
+    @media (prefers-contrast: less) {
+
+        body {
+            --bg: var(--bg-dark-less);
+            --mid: var(--midtone-less);
+            --fg: var(--fg-dark-less);
+            --ac: var(--ac-dark-less);
+        }
+
+    }
+
+}

assets/css/layout/_default/home.css

@@ -0,0 +1,116 @@
+/* this style is used inline in list.html */
+
+body {
+    margin: auto !important;
+    max-width: 2560px !important;
+}
+
+body > footer.pagewidth,
+body > header.pagewidth {
+    padding: 0 calc(1.5rem + 1ex);
+}
+
+body > aside.carousel {
+    position: sticky;
+    position: -webkit-sticky;
+    left: 0;
+    float: left;
+    /* border: var(--border);
+    border-radius: 1ex; */
+    padding: 1rem;
+    width: 38vw;
+    height: var(--vbody);
+}
+
+body > main#home {
+    height: var(--vbody);
+    min-height: unset;
+    overflow-y: auto;
+}
+
+body > main#home > aside#list-tags {
+    top: 0;
+    right: 0;
+    margin: 1rem auto;
+    width: calc(100% - var(--golden-ratio));
+}
+
+#home #top {
+    padding: 0 1rem;
+}
+
+#home #list-posts {
+    padding: 1rem;
+    width: var(--golden-ratio);
+}
+
+div[role="feed"] {
+    padding: 0 1ex;
+}
+
+.carousel .feed-item,
+#home .feed-item,
+hr.ldots {
+    width: unset;
+}
+
+#main-footer > .pagewidth {
+    padding: 0;
+}
+
+#i18n-menu > .on-plank,
+#more-menu > .on-plank,
+#duckduckgo,
+.pagefind-ui {
+    margin-right: 1rem;
+}
+
+#has-search-fallback.pagewidth {
+    padding-right: 1rem;
+}
+
+#grain {
+    display: none;
+}
+
+@media (max-width: 960px) {
+    body > aside.carousel {
+        float: unset;
+        padding: 0;
+        width: unset;
+    }
+
+    body > main#home {
+        height: unset;
+        overflow-y: unset;
+    }
+
+    aside + main#home {
+        margin-top: var(--vhead);
+    }
+
+    body > main#home > aside#list-tags {
+        top: var(--vhead);
+    }
+
+}
+
+@media (max-width: 640px) {
+
+    body > main#home > aside#list-tags,
+    #home #list-posts {
+        margin: var(--bigskip) auto;
+        padding: 0 var(--void);
+        width: var(--golden-ratio);
+    }
+
+    div[role="feed"] {
+        padding: 0;
+    }
+
+    .form.on-plank,
+    .pagefind-ui {
+        margin-right: 1ex;
+    }
+
+}

assets/css/layout/_default/list.css

@@ -0,0 +1,148 @@
+hr.ldots {
+    margin-left: 0;
+    border: none;
+    width: var(--golden-ratio);
+}
+
+hr.ldots::after {
+    --tsf: translateY(-2.3rem);
+    display: block;
+    width: 100%;
+    height: 1rem;
+    text-align: center;
+    color: var(--g18s);
+    font-size: 3rem;
+    content: '…';
+}
+
+#list-subsection {
+    padding: 0 calc(1rem - 1ex);
+}
+
+#list-subsection .carousel__viewport,
+#taxonomy .carousel__viewport {
+    padding: 0 1rem;
+}
+
+#list-taxonomy .carousel {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+}
+
+#list-taxonomy .section-title {
+    margin: var(--smallskip);
+    writing-mode: tb;
+}
+
+#list-tags {
+    position: sticky;
+    position: -webkit-sticky;
+    top: var(--vhead);
+    right: var(--void);
+}
+
+#term section.pagewidth,
+#taxonomy section.pagewidth,
+#list-posts  {
+    min-height: calc(var(--vbody) - 7.258rem);
+}
+
+#taxonomy #list-tags {
+    position: unset;
+    float: unset;
+    margin: unset;
+    padding: 0 var(--void) 3ex;
+    width: unset;
+}
+
+#taxonomy .carousel .section-title {
+    margin: var(--bigskip) 0 var(--smallskip);
+    writing-mode: unset;
+}
+
+.carousel + .carousel {
+    margin-top: 2rem;
+}
+
+#has-pagination {
+    margin-top: 1in;
+}
+
+.section-title#series {
+    margin-left: auto;
+    width: var(--golden-ratio);
+}
+
+.list-year {
+    display: flex;
+    position: relative;
+    align-items: baseline;
+}
+
+.list-year.descending {
+    margin-left: auto;
+}
+
+.list-year > .section-title {
+    width: 52pt;
+    text-align: right;
+}
+
+
+.list-year > div {
+    flex: 1;
+}
+
+.list-month > summary {
+    padding-left: 1rem;
+    list-style: none;
+}
+
+.list-month > summary::after {
+    margin-left: 1ex;
+}
+
+.list-day a {
+    display: block;
+    margin: 1ex 1rem;
+    border: none;
+    padding: 1ex 0;
+    width: 100%;
+    font-size: var(--normalsize);
+}
+
+.list-day a.has-pre::before {
+    position: absolute;
+    left: 0;
+    padding: 0.25rem 0;
+    width: 5rem;
+    text-align: right;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-size: var(--footnotesize);
+}
+
+#feed ul.rounded.invert a {
+    font-size: var(--footnotesize);
+}
+
+@media (max-width: 640px) {
+
+    body > main > aside#list-tags {
+        position: unset;
+        float: unset;
+        padding: 0 var(--void);
+    }
+
+    #list-tags > nav {
+        padding: 0 1ex;
+    }
+
+    #home #list-tags .section-title,
+    #home #list-posts .section-title {
+        padding-left: 1rem;
+    }
+
+}

assets/css/layout/_default/single.css

@@ -0,0 +1,243 @@
+#main-article {
+    margin-top: 1in;
+    line-height: calc(var(--baselineStretch) * 1.618);
+    counter-reset: marginnote;
+}
+
+#main-article.sf h1 {
+    font-weight: 550;
+}
+
+#main-article.sf header time,
+#main-article.sf .subtitle,
+#main-article.sf #doc-author,
+#main-article.sf #doc-author a,
+#main-article.sf h2,
+#main-article.sf h3 {
+    font-style: normal;
+}
+
+/* article frontmatter */
+
+#main-article > header {
+    display: flex;
+    flex-direction: column;
+    margin:var(--vskip);
+    gap: 1rem;
+}
+
+#has-stage {
+    display: flex;
+    align-items: center;
+    font-family: var(--sf);
+    font-size: var(--footnotesize);
+}
+
+#series,
+#stage {
+    opacity: 0.8;
+    color: var(--fg);
+}
+
+#series + .emoji--stage,
+#series + .stage-indicator {
+    margin: 0 8pt;
+}
+
+.subtitle {
+    opacity: 0.86;
+    margin: 1ex 0 0;
+    font-style: italic;
+}
+
+#main-article [role=doc-credit],
+#main-article [role=doc-colophon],
+#join-discussion {
+    font-size: var(--small);
+}
+
+#doc-cover > img {
+    margin: 2rem 0;
+    aspect-ratio: 10 / 8;
+}
+
+/* with avatar */
+#avatar,
+.author {
+    display: flex;
+    align-items: center;
+    line-height: 1.272;
+}
+
+#doc-author .has-aria-label::after {
+    font: 1rem var(--sf);
+}
+
+#avatar {
+    margin-right: 12pt;
+}
+
+.author img {
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+    object-fit: cover;
+}
+
+.author > a::after {
+    font-size: 0.9em;
+    color: var(--mid);
+}
+
+.author > a > span {
+    color: var(--fg);
+    font-weight: bold;
+}
+
+.author > a > span img {
+    width: 1em;
+    height: 1em;
+    vertical-align: text-top;
+}
+
+header time {
+    font-style: italic;
+    -webkit-font-feature-settings:'onum' 1;
+       -moz-font-feature-settings:'onum' 1;
+            font-feature-settings:'onum' 1;
+    font-variant-numeric: oldstyle-nums;
+}
+
+#page .date-has-label > time:before {
+    content: attr(data-time-label)' ';
+}
+
+.doc-lastmod-date:before {
+    text-transform: lowercase;
+}
+
+#has-TableOfContents,
+#comments-error {
+    margin: var(--medskip) 0;
+}
+
+#has-TableOfContents ul {
+    list-style: none;
+    font-style: italic;
+}
+
+#main-article audio {
+    border-radius: 2rem;
+}
+
+#main-article audio,
+#main-article section > p {
+    margin: 0.618pc 0;
+    width: var(--golden-ratio);
+}
+
+/* article mainmatter */
+
+#content hr {
+    display: block;
+    margin: 0.618pc 0;
+    border: 0;
+    border-bottom: var(--bound);
+}
+
+#content table {
+    margin: 0.618pc 0;
+    width: 100%;
+    overflow-x: auto;
+}
+
+#content figure.fullwidth {
+    max-width: none;
+}
+
+#content p:not(:first-of-type) {
+    text-indent: var(--indent);
+}
+
+#content p img {
+    width: calc(100% - var(--indent));
+}
+
+/* article backmatter */
+
+#main-article > footer {
+    margin: var(--vskip);
+    border-bottom: var(--bound) ;
+}
+
+.footnote-ref {
+    padding: 0 0.5ex;
+    font-size: var(--footnotesize);
+}
+
+.footnotes {
+    font-size: var(--footnotesize);
+}
+
+.footnotes hr {
+    margin: 3rem 0 0;
+    border-bottom: 1px solid;
+    width: 16.18rem;
+}
+
+#has-stage + #title,
+#has-timeline > p,
+.footnotes ol {
+    margin-top: 0;
+    padding: 0;
+}
+
+.footnotes li::marker {
+    font-feature-settings: 'sups' 1;
+    font-variant-position: super;
+}
+
+#main-article.sf > header,
+#content,
+#keywords,
+#contentinfo {
+    margin: var(--vskip);
+    overflow-wrap: break-word;
+}
+
+.verbose {
+    font: 1rem/2rem monospace;
+    overflow-wrap: anywhere;
+}
+
+#has-share,
+#comments {
+    grid-column: 1 / 3;
+}
+
+#discussion-starter > nav {
+    display: flex;
+    justify-content: end;
+    flex-direction: row-reverse;
+}
+
+#join-discussion:hover,
+#join-discussion:focus {
+    background: var(--ac);
+}
+
+#join-discussion-bluesky {
+    --anm: none;
+    margin-right: 5pt;
+    border-right: var(--border);
+    color: #1185fe;
+}
+
+#content > blockquote,
+.epigraph > blockquote,
+#content > ul,
+#content > ol,
+#comments > *,
+.giscus {
+    width: var(--golden-ratio);
+}

assets/css/media/print.css

@@ -0,0 +1,243 @@
+@media print {
+
+    :root {
+        font-size: calc(10pt / 1.272 * var(--fontScale)) ;
+    }
+
+    body {
+        /* 1in target on a4 */
+        margin: 8vmin !important;
+        /* ragged bottom if supported */
+        margin-bottom: clamp(8vmin, 10vmin, 12vmin) !important;
+        background: none;
+        padding-left: 0 !important;
+        max-width: 100vw !important;
+    }
+
+    body > header,
+    body > footer,
+    #background-footer,
+    body > footer *,
+    body > div,
+    body > aside,
+    body > main > header,
+    audio,
+    #has-share,
+    #background-body,
+    #contribute,
+    #related,
+    #unified-footer,
+    #menu-footer,
+    #has-timeline ol li::before,
+    .has-details .emoji--stage,
+    #discussion-starter,
+    .giscus {
+        display: none;
+    }
+
+    body > main {
+        height: unset;
+    }
+
+    body > main > #main-footer {
+        border: unset;
+        margin:var(--vskip);
+        padding: unset;
+    }
+
+    figure {
+        position: relative
+    }
+
+    .pagewidth,
+    #main-footer .pagewidth {
+        padding: 0;
+    }
+
+    body > main > #main-footer {
+        background: none;
+        color: var(--fg);
+    }
+
+    #main-footer a {
+        color: var(--fg);
+    }
+
+    #main-article,
+    body h1:first-of-type {
+        margin-top: 0;
+    }
+
+    #comments > summary,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .section-title {
+        break-before: auto;
+        break-after: avoid;
+    }
+
+    table,
+    img,
+    svg,
+    figure,
+    .sidenote,
+    .marginnote,
+    #comments article,
+    article#feed-item {
+        break-inside: avoid;
+    }
+
+    pre > code {
+        margin-left: 0;
+        min-width: 62%;
+        max-width: 100%;
+        white-space: pre-wrap;
+        word-break: break-all;
+        word-wrap: break-word;
+    }
+
+    #main-footer a::after,
+    #content a::after {
+        --tsf: unset;
+        -webkit-transform: var(--tsf);
+           -moz-transform: var(--tsf);
+            -ms-transform: var(--tsf);
+             -o-transform: var(--tsf);
+                transform: var(--tsf);
+        font: unset;
+        content: '\a0('attr(href)')';
+    }
+
+    #keywords a::after {
+        content: unset;
+    }
+
+    .marginpar {
+        width: var(--golden-ratio);
+        margin-left: calc(var(--golden-ratio) * -1);
+    }
+
+    .marginpar.abs {
+        right: 0;
+        width: 38%;
+    }
+
+    #contentinfo {
+        display: flex;
+        break-before: auto;
+        break-inside: avoid;
+    }
+
+    #colophon {
+        width: 38%;
+    }
+
+    #colophon > div {
+        display: block;
+    }
+
+    #qr {
+        float: right;
+        padding: 0;
+        height: 96px;
+    }
+
+    #has-timeline {
+        flex: 1;
+    }
+
+    .has-details ol {
+        column-width: 1in;
+    }
+
+    .has-details time {
+        font-weight: 550;
+        padding-top: 1ex;
+    }
+
+    #has-timeline ol,
+    #has-timeline li {
+        margin: 0;
+        border: none;
+        list-style: inherit;
+        break-inside: avoid;
+    }
+
+}
+
+/* font-size scaling = 1/sqrt(640/device-width)
+@media (max-width: 640px) {
+    :root {
+        font-size: calc(var(--fontScale)*100%);
+    }
+}
+
+@media (max-width: 601px) {
+    :root {
+        font-size: calc(var(--fontScale)*96.9%);
+    }
+}
+
+@media (max-width: 576px) {
+    :root {
+        font-size: calc(var(--fontScale)*94.8%);
+    }
+}
+
+@media (max-width: 540px) {
+    :root {
+        font-size: calc(var(--fontScale)*91.8%);
+    }
+}
+
+@media (max-width: 512px) {
+    :root {
+        font-size: calc(var(--fontScale)*89.4%);
+    }
+}
+
+@media (max-width: 480px) {
+    :root {
+        font-size: calc(var(--fontScale)*86.6%);
+    }
+}
+
+@media (max-width: 428px) {
+    :root {
+        font-size: calc(var(--fontScale)*81.7%);
+    }
+}
+
+@media (max-width: 414px) {
+    :root {
+        font-size: calc(var(--fontScale)*80.4%);
+    }
+}
+
+@media (max-width: 390px) {
+    :root {
+        font-size: calc(var(--fontScale)*78%);
+    }
+}
+
+@media (max-width: 375px) {
+    :root {
+        font-size: calc(var(--fontScale)*76.5%);
+    }
+}
+
+@media (max-width: 360px) {
+    :root {
+        font-size: calc(var(--fontScale)*75%);
+    }
+}
+
+@media (max-width: 320px) {
+    :root {
+        font-size: calc(var(--fontScale)*70.7%);
+    }
+} */

assets/css/optimize.css

@@ -0,0 +1,151 @@
+a,
+a.replies.active,
+a.reblogs.active,
+#has-author-name-menu a:hover,
+#has-author-name-menu a:focus,
+#contentinfo a:hover,
+#contentinfo a:focus {
+    color: var(--ac);
+}
+
+.feed-item > hgroup > div a,
+#contentinfo a {
+    color: var(--fg);
+}
+
+.readingTime,
+.feed-item > section > div,
+.feed-item > hgroup > div,
+.feed-item:hover img {
+    opacity: 0.86;
+}
+
+.feed-item:hover .par,
+.feed-item:focus .par,
+ul.invert a:hover,
+::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+}
+
+#TableOfContents + nav > ul,
+#TableOfContents + nav > ul > li,
+.has-desc:after {
+    display: block;
+}
+
+#has-breadcrumb summary,
+#has-pagination summary,
+#page #back,
+.feed-item > footer > ul::-webkit-scrollbar,
+.feed-item > hgroup > div > span::-webkit-scrollbar,
+.feed-item .date-has-label .doc-publish-date,
+.carousel__viewport::-webkit-scrollbar,
+#logomark--dark,
+#top-nav[open] > summary,
+#top-nav-screen,
+#has-more-menu[open] > summary > .t,
+.languangeName,
+a#has-i18n > img,
+.list-month > summary::marker,
+.list-month > summary::-webkit-details-marker,
+#series ~ .list-year .has-post::after,
+#content a.footnote-ref::after,
+#content a.footnote-backref::after,
+details.presentation > summary::-webkit-details-marker,
+details.presentation > summary::marker,
+td.lntd:first-child code.hljs {
+    display: none;
+}
+
+a,
+#has-a11y[open] #a11y,
+#logo #logotype__text,
+.marginpar-ctrl:checked + label::before,
+details[open] > .anchor:after,
+details[open] .on-plank,
+.l1 details[open] > ul,
+.marginpar-ctrl:checked + label + .marginpar,
+#has-a11y[open] > summary::before,
+#has-a11y[open] #a11y,
+#has-search[open] .icon::before,
+details[open] > summary > .menu-icon::before,
+.loading:after,
+#top-nav[open] > nav {
+    -webkit-animation: var(--anm);
+       -moz-animation: var(--anm);
+         -o-animation: var(--anm);
+            animation: var(--anm);
+}
+
+a::after,
+#main-footer a::after,
+hr.ldots::after,
+#to-top::before,
+#lightSwitch + label::before,
+.hand,
+.carousel__viewport__slide:last-child > nav a::before,
+#back::before,
+.feed-item,
+ul.carousel__viewport > li,
+.pagination .rfill a::before,
+.pagination .lfill a::after,
+.tr::after,
+.carousel__viewport__slide:first-child > nav a::after,
+.parent-anchor a::after,
+#i18n-menu a::after,
+#content a::after,
+.form.on-plank .form__button,
+#to-content,
+.t {
+    -webkit-transform: var(--tsf);
+       -moz-transform: var(--tsf);
+        -ms-transform: var(--tsf);
+         -o-transform: var(--tsf);
+            transform: var(--tsf);
+}
+
+input.toggle + label::after,
+#setContrast label,
+.marginpar-ctrl + label::before,
+.anchor:after,
+#has-share i {
+    -webkit-transition: var(--tst);
+       -moz-transition: var(--tst);
+         -o-transition: var(--tst);
+            transition: var(--tst);
+}
+
+#has-a11y[open] #a11y,
+details[open] .on-plank,
+.l1 details[open] > ul,
+.marginpar-ctrl:checked + label + .marginpar,
+#top-nav[open] > nav {
+    -webkit-transform-origin: var(--tso);
+       -moz-transform-origin: var(--tso);
+        -ms-transform-origin: var(--tso);
+         -o-transform-origin: var(--tso);
+            transform-origin: var(--tso);
+}
+
+#has-share a:focus,
+.form > *:focus {
+    outline: none !important;
+}
+
+hgroup,
+hgroup > h1,
+figure {
+    margin: 0;
+}
+
+ul.rounded,
+.list-day {
+    padding: 0;
+}
+
+ul.delimiter:first-child li:first-child:before,
+.feed-item > hgroup ul.delimiter:first-child li:last-child::after,
+#content a.has-img::after,
+#doc-author .delimiter li:last-child::after {
+    content: '';
+}

assets/css/support.css

@@ -0,0 +1,13 @@
+@supports (height: 0svh) {
+    :root {
+        --vbody: calc(100svh - var(--vhead) - var(--vfoot));
+    }
+}
+
+/* @supports (backdrop-filter: blur(0)) {
+    @media (max-width: 640px) {
+        #top-nav-screen.screening {
+            backdrop-filter: blur(2rem);
+            background: none;
+        }
+} */

assets/css/typeface-local/Cormorant.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'Cormorant';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Cormorant-Regular.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Cormorant-Italic.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Cormorant-Bold.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+@font-face {
+    font-family: 'Cormorant';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Cormorant-BoldItalic.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+:root {
+    --rm: 'Cormorant';
+}

assets/css/typeface-local/Crimson.css

@@ -0,0 +1,43 @@
+@font-face {
+    font-family: 'crimson';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Crimson Roman'),
+     url(/css/fonts/crimson-roman-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Crimson Italic'),
+         url(/css/fonts/crimson-italic-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Crimson Bold'),
+         url(/css/fonts/crimson-bold-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+@font-face {
+    font-family: 'crimson';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Crimson BoldItalic'),
+         url(/css/fonts/crimson-bolditalic-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+:root {
+    --rm: 'crimson';
+}

assets/css/typeface-local/EBGaramond.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/EBGaramond12-Regular.woff2) format('woff2');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/EBGaramond12-Italic.woff2) format('woff2');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/EBGaramond12-Bold.woff) format('woff');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/EBGaramond12-BoldItalic.woff) format('woff');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+:root {
+    --rm: 'EB Garamond';
+}

assets/css/typeface-local/Inconsolata.css

@@ -0,0 +1,25 @@
+@font-face {
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inconsolata'),
+         url(/css/fonts/Inconsolata-Regular.woff2) format('woff2');
+    ascent-override: 88%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inconsolata Bold'),
+         url(/css/fonts/Inconsolata-Bold.woff2) format('woff2');
+    ascent-override: 88%;
+    descent-override: 30%;
+}
+
+:root {
+    --tt: 'Inconsolata';
+}

assets/css/typeface-local/Inter.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inter'),
+         url(/css/fonts/Inter-Regular.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inter Italic'),
+         url(/css/fonts/Inter-Italic.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inter Bold'),
+         url(/css/fonts/Inter-Bold.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Inter Bold Italic'),
+         url(/css/fonts/Inter-BoldItalic.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+:root {
+    --sf: 'Inter';
+}

assets/css/typeface-local/LexicaUltralegible.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Lexica Ultralegible';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Lexica Ultralegible'),
+         url(/css/fonts/LexicaUltralegible-Regular.woff2) format('woff2');
+    size-adjust: 93%;
+    ascent-override: 95%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Lexica Ultralegible';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Lexica Ultralegible Italic'),
+         url(/css/fonts/LexicaUltralegible-Italic.woff2) format('woff2');
+    size-adjust: 93%;
+    ascent-override: 95%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Lexica Ultralegible';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Lexica Ultralegible Bold'),
+         url(/css/fonts/LexicaUltralegible-Bold.woff2) format('woff2');
+    size-adjust: 93%;
+    ascent-override: 95%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Lexica Ultralegible';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('Lexica Ultralegible Bold Italic'),
+         url(/css/fonts/LexicaUltralegible-BoldItalic.woff2) format('woff2');
+    size-adjust: 93%;
+    ascent-override: 95%;
+    descent-override: 33%;
+}
+
+:root {
+    --sf: 'Lexica Ultralegible';
+}

assets/css/typeface-local/Montserrat.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Montserrat-Regular.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/css/fonts/Montserrat-Italic.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Montserrat-Bold.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/css/fonts/Montserrat-BoldItalic.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+:root {
+    --sf: 'Montserrat';
+}

assets/css/typeface-local/OpenDyslexic.css

@@ -0,0 +1,63 @@
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('OpenDyslexic'),
+         url(/css/fonts/OpenDyslexic-Regular.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('OpenDyslexic Italic'),
+         url(/css/fonts/OpenDyslexic-Italic.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('OpenDyslexic Bold'),
+         url(/css/fonts/OpenDyslexic-Bold.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('OpenDyslexic Bold Italic'),
+         url(/css/fonts/OpenDyslexic-Bold-Italic.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+@font-face {
+    font-family: 'OpenDyslexicMono';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('OpenDyslexicMono'),
+         url(/css/fonts/OpenDyslexicMono-Regular.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+:root {
+    --od: 'OpenDyslexic';
+}