Upload 51 files

assets/css/component/a11y.css

@@ -0,0 +1,355 @@
+/* a11y button */
+
+#has-a11y {
+    margin-right: auto;
+}
+
+#has-a11y-summary {
+    padding: .6ex 1ex;
+    font-weight: 700;
+}
+
+#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);
+}
+
+/* hide input checkbox */
+#a11y input[type=checkbox],
+#a11y input[type=radio],
+#bionReadSwitch {
+    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;
+    margin-bottom: 1ex;
+}
+
+/* lightswitch */
+#lightSwitch + label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 0.5ex;
+    padding: 1ex;
+    width: 4rem;
+    font-weight: 700;
+    gap: 1ex;
+}
+
+#lightSwitch:hover + label,
+#lightSwitch:focus + label,
+#setContrast > input:hover + label {
+    background: var(--g18s);
+    color: var(--ac);
+}
+
+/* credit to @mrozilla on codepen https://codepen.io/mrozilla/pen/OJJNjRb */
+input + label > #lightSwitchIndicator {
+    --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;
+}
+
+input:checked + label > #lightSwitchIndicator {
+    --tsf: scale(1);
+    box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+}
+
+/* contrast */
+#setContrast {
+    display: flex;
+    position: relative;
+    flex: 1;
+    justify-content: center;
+    margin: 0 0 0 1ex;
+    border: none;
+    border-left: var(--bound);
+    padding: 2.5em 0 0 1ex;
+}
+
+#setContrast legend {
+    position: absolute;
+    top: 0;
+    padding: 1ex;
+}
+
+#setContrast label {
+    -webkit-transition: 99ms;
+       -moz-transition: 99ms;
+         -o-transition: 99ms;
+            transition: 99ms;
+    border-radius: 1rem;
+    padding: 3pt 7pt;
+    font-size: 0.84em !important;
+}
+
+#setContrast > input:checked + label {
+    background: var(--fg);
+    color: var(--bg);
+}
+
+#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;
+}
+
+#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';
+}
+
+#setOpenDyslexic > label {
+    display: flex;
+    align-items: center;
+}
+
+#OpenDyslexicState {
+    display: flex;
+    margin-left: auto;
+    border-radius: 1em;
+    background: #80808080;
+    width: 2.4em;
+    height: 0.8em;
+}
+
+#OpenDyslexicIndicator {
+    --tst: 0.5s ease-out;
+    position: relative;
+    align-self: center;
+    border: 1pt solid #80808008;
+    border-radius: 1em;
+    box-shadow: var(--box-shadow-focus);
+    background: #fff;
+    padding: 6pt;
+}
+
+#OpenDyslexic:hover + label #OpenDyslexicIndicator,
+#OpenDyslexic:focus + label #OpenDyslexicIndicator {
+    --anm: grab 3s ease-out 3;
+}
+
+#OpenDyslexic:checked:hover + label #OpenDyslexicIndicator,
+#OpenDyslexic:checked:focus + label #OpenDyslexicIndicator {
+    --anm: unset;
+}
+
+#OpenDyslexic:checked + label #OpenDyslexicIndicator {
+    left: 1.3em;
+}
+
+@keyframes grab {
+    0%, 10%, 20%, 100% {
+        left: 0;
+    }
+    5%, 15% {
+        left: 3pt;
+    }
+}
+
+@-webkit-keyframes grab {
+    0%, 20%, 40%, 100% {
+        left: 0;
+    }
+    10%, 30% {
+        left: 3pt;
+    }
+}
+
+/* menu */
+#a11y-menu {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    gap: 1ex;
+}
+
+#a11y-menu > button {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    border: unset;
+    padding: 1ex;
+}
+
+#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: 700;
+}
+
+#setContrast > input + label > span {
+    font-weight: 400;
+}
+
+#bionReadButton > span {
+    font-weight: 400;
+    text-transform: uppercase;
+}
+
+#noScript,
+#noLocalStorage {
+    margin: auto;
+    border-top: var(--bound);
+    padding-top: 1rem;
+    max-width: 20rem;
+}
+
+@media only screen and (max-width: 640px) {
+
+    #has-a11y > summary > span {
+        display: none;
+    }
+
+}

assets/css/component/background.css

@@ -0,0 +1,98 @@
+#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,
+#lightSwitchIndicator,
+#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(--border); */
+    height: var(--vhead);
+}
+
+#background-footer {
+    top: unset;
+    bottom: 0;
+    /* border-top: var(--border); */
+    height: var(--vfoot);
+}
+
+/* grain */
+
+.grain,
+#grain {
+    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' viewBox='0 0 256 256' width='256' height='256' opacity='1' id='svgrain' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'><defs id='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='feTurbulence' /><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='feDistantLight4' /></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>");
+    mix-blend-mode: difference;
+}
+
+#grain {
+    position: absolute;
+    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/breadcrumb.css

@@ -0,0 +1,116 @@
+main > header.pagewidth {
+    margin-top: var(--medskip);
+    padding-left: calc(var(--void) - 0.5ex - 4pt);
+    height: 2.5rem;
+}
+
+#back {
+    display: inline-flex;
+    position: relative;
+    top: 2.8pt;
+    float: left;
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
+}
+
+#back::before,
+header > menu a::before {
+    padding: 6pt 9pt;
+    font-size: var(--large);
+}
+
+#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';
+}
+
+main > header > menu {
+    float: right;
+    visibility: hidden;
+    margin: 0 0 0 auto;
+    padding: 0;
+    list-style: none;
+    font-size: 1.1rem;
+}
+
+main#term > header > menu,
+main#page > header > menu {
+    visibility: visible;
+}
+
+main#term #print-button {
+    visibility: hidden;
+}
+
+main > header > menu > li,
+ul.breadcrumb > li {
+    display: inline;
+}
+
+main > header > menu > li > a {
+    opacity: 0.86;
+    color: var(--fg) !important;
+}
+
+.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';
+}
+
+#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;
+}
+
+header > menu a {
+    display: inline-flex;
+    position: relative;
+}
+
+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,167 @@
+.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;
+    font-size: var(--Large);
+    font-weight: 700;
+}
+
+.feed-item img {
+    width: auto;
+    height: auto;
+    max-height: 38vh;
+    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;
+    text-overflow: ellipsis;
+}
+
+.feed-item > hgroup > div > div {
+    margin-left: auto;
+    padding-left: 1rem;
+}
+
+.feed-item > footer > ul {
+    text-align: right;
+    font-size: var(--scriptsize);
+}
+
+.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 only screen and (max-width: 640px) {
+
+    .feed-item {
+        width: unset;
+    }
+
+    aside + #list-posts .feed-item {
+        width: var(--golden-ratio);
+    }
+
+    aside + #list-posts .feed-item > section {
+        flex-direction: column;
+        aspect-ratio: unset;
+    }
+
+    aside + #list-posts .feed-item .par {
+        max-height: 25vh;
+        width: unset;
+    }
+
+}
+
+@media only screen and (max-width: 480px) {
+
+    .feed-item > section {
+        flex-direction: column;
+        aspect-ratio: unset !important;
+    }
+
+}

assets/css/component/carousel.css

@@ -0,0 +1,299 @@
+/*
+<!----- 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__nav {
+    display: flex;
+    position: absolute;
+    right: 2rem;
+    bottom: 2rem;
+    justify-content: flex-end;
+    z-index: 1;
+    width: calc(100% - 4rem);
+    font-size: var(--small);
+}
+
+.carousel__nav > ul {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.carousel__viewport nav a {
+    display: flex;
+    z-index: 2;
+    font-size: var(--small);
+}
+
+.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%;
+}
+
+ul.carousel__viewport > li {
+    position: relative;
+    margin: 1ex;
+    border-radius: 1ex;
+    background-size: 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;
+}
+
+ul.carousel__viewport > li:hover,
+ul.carousel__viewport > li:focus-within {
+    --tsf: scale(0.96);
+    opacity: 0.86;
+}
+
+ul.carousel__viewport > li > a > span {
+    display: inline-block;
+    position: relative;
+    border-radius: 0 0 1ex 0;
+    background-color: var(--bg);
+    padding: 0.7ex 2ex;
+    max-width: 12.8rem;
+}
+
+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;
+    right: -1ex;
+}
+
+.carousel__viewport__slide__cover {
+    flex: 1 1 40%;
+    padding: 1.5rem 0 5rem 1.5rem;
+    height: 100%;
+    max-height: 1024px;
+}
+
+.carousel__viewport__slide__content {
+    margin-bottom: auto;
+    padding: 0 2rem;
+    width: 100%;
+    max-height: calc(100% - 5rem);
+    overflow-y: auto;
+}
+
+.carousel__viewport__slide__content h1.section-title {
+    margin: 0 !important;
+    padding: var(--smallskip) 0 1ex;
+    font: italic var(--Large) var(--rm), serif;
+}
+
+.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 {
+    max-width: unset;
+}
+
+.carousel__viewport__slide__cover + .carousel__viewport__slide__content {
+    flex: 1 1 60%;
+    margin-bottom: 5rem;
+}
+
+.carousel__viewport__slide__cover + .carousel__viewport__slide__content p {
+    width: unset;
+}
+
+.carousel__viewport__slide__cover img {
+    border-radius: 1ex;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* 2 item */
+
+#list-tags > nav a,
+.carousel__viewport__slide > nav a {
+    display: inline-flex;
+    padding: 1ex;
+    gap: 1ex;
+}
+
+.carousel__viewport__slide > nav a {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--fg);
+}
+
+.pagination .lfill a::after,
+#list-tags > nav a::after,
+.carousel__viewport__slide:first-child > nav a::after {
+    /* -> */
+    --tsf: rotate(90deg);
+    font-family: base-ui;
+    content: '\e902';
+}
+
+.carousel__viewport .rfill {
+    display: inline-block !important;
+}
+
+#list-taxonomy > .carousel__viewport {
+    flex-direction: column;
+    height: calc(14.8rem + 2ex);
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+}
+
+#list-taxonomy #list-series,
+#list-taxonomy #list-categories {
+    padding: 1rem 0;
+}
+
+#list-series ul.carousel__viewport,
+#list-categories ul.carousel__viewport,
+#list-author ul.carousel__viewport {
+    scrollbar-width: thin;
+}
+
+#list-categories 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);
+}
+
+@media only screen and (max-width: 960px) {
+
+    aside.carousel {
+        width: unset;
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    .carousel__nav {
+        right: 0;
+        bottom: 0;
+        background: var(--bg);
+        width: unset;
+    }
+
+    .carousel__viewport__slide > .carousel__nav {
+        position: sticky;
+        position: -webkit-sticky;
+    }
+
+    aside .carousel__viewport > div,
+    aside .carousel__viewport > section,
+    aside .carousel__viewport__slide {
+        display: block;
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    .carousel__viewport__slide__cover {
+        padding: unset;
+        height: unset;
+    }
+
+    .carousel__viewport__slide__cover img {
+        border-radius: 0;
+        padding: 0 1rem;
+        height: unset;
+    }
+
+    .carousel__viewport__slide__content {
+        padding: 0 1rem 5rem;
+        max-height: unset;
+    }
+
+    .carousel__viewport__slide__cover + .carousel__viewport__slide__content {
+        margin-bottom: 1rem;
+    }
+
+    .carousel__nav > ul.rounded {
+        padding: 1ex 0;
+        width: calc(100vw - 2rem);
+        text-align: right;
+    }
+
+}

assets/css/component/column.css

@@ -0,0 +1,69 @@
+.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 {
+    margin-bottom: 1.618rem;
+    break-after: auto;
+    break-before: auto;
+    break-inside: avoid;
+}
+
+.column img {
+    width: 100%;
+    height: auto;
+}
+
+.column.pin {
+    --col: 12rem;
+}
+
+.has-quote {
+    display: flex;
+    flex-direction: column-reverse;
+    color: var(--fg);
+}
+
+.has-quote::after {
+    margin: unset;
+}
+
+.has-quote > div {
+    margin-left: auto;
+}
+
+.has-quote > img {
+    margin: 1ex 0;
+}
+
+@media screen and (max-width: 640px) {
+
+    .column.pin {
+        --col: 10rem;
+    }
+
+}

assets/css/component/fediverse.css

@@ -0,0 +1,88 @@
+/* this style is used inline in fediverse.js */
+
+#comments > * {
+    width: var(--golden-ratio);
+}
+
+#comments noscript {
+    margin: var(--medskip) 0;
+}
+
+#discussion-starter {
+    margin-bottom: var(--medskip);
+}
+
+#discussion-starter > footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mastodon-comment {
+    margin: 1rem 0 1rem calc(var(--mul) * var(--indent));
+    border: 1pt solid #fff4;
+    border-left: 2pt solid var(--ac);
+    box-shadow: 0 0.5pt 1pt 0 var(--g18s);
+    background: #80808008;
+    padding: 1rem 1rem 1ex;
+    overflow: auto;
+}
+
+.mastodon-comment .content {
+    margin-left: 4rem;
+    line-height: calc(var(--baselineStretch) * 1.272);
+}
+
+.mastodon-comment .par a {
+    max-width: 100%;
+    vertical-align: bottom;
+    white-space: break-spaces;
+}
+
+.mastodon-comment .attachments * {
+    width: 100%;
+    height: auto;
+}
+
+.mastodon-comment > footer {
+    margin-top: 1rem;
+    margin-left: 3.5rem;
+}
+
+.mastodon-comment > footer .stat {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 5pt;
+}
+
+.stat a {
+    display: inline-flex;
+    align-items: center;
+    padding: 2pt;
+    color: var(--mid);
+    gap: 2pt;
+}
+
+.stat a::before {
+    vertical-align: text-top;
+}
+
+a.favourites.active {
+    color: var(--i3i);
+}
+
+.mastodon-comment .date {
+    margin-left: auto;
+    padding-left: 1rem;
+    color: var(--mid);
+    font-size: calc(10pt * var(--fontScale));;
+}
+
+@media only screen and (max-width: 960px) {
+
+    .mastodon-comment .content,
+    .mastodon-comment > footer {
+      margin-left: 0;
+    }
+
+}

assets/css/component/hero.css

@@ -0,0 +1,92 @@
+/*
+<!----- 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;
+    float: left;
+    height: calc(var(--vbody) - 14.8rem - 1rem - 2ex);
+    max-height: 1024px;
+}
+
+.hero > * {
+    width: 50%;
+}
+
+.hero img {
+    margin-left: auto;
+    padding: 2rem;
+    max-width: 100%;
+    max-height: calc(var(--vbody) - 14.8rem - 1rem - 2ex);
+    object-fit: cover;
+}
+
+.hero__content {
+    --col: 27rem;
+    padding: 2rem 0;
+    max-width: var(--col);
+    font-size: var(--small);
+}
+
+.hero__content h1,
+.hero__content h2,
+.hero__content h3 {
+    margin: 4pt 0;
+    font: italic var(--Large) var(--rm), serif;
+    line-height: 1.618;
+}
+
+@media only screen and (max-width: 960px) {
+
+    .hero {
+        width: 100%;
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    .hero {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .hero > * {
+        align-self: center;
+        width: 86%;
+    }
+
+    .hero__image {
+        position: inherit;
+        width: unset;
+        height: unset;
+    }
+
+}
+
+@media only screen and (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 {visibility: visible;}
+    50% {visibility: hidden;}
+}
+
+@keyframes blinking {
+    from, to {visibility: visible;}
+    50% {visibility: hidden;}
+}
+
+@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,81 @@
+a {
+    text-decoration: none;
+    color: var(--ac);
+}
+
+#bionReadSwitch + label,
+#join-discussion,
+#saveButton,
+#share,
+a.cta {
+    border-radius: 2em;
+    background: var(--fg);
+    padding: 6pt 12pt;
+    color: var(--bg);
+    font-weight: 700;
+    text-align: center;
+}
+
+#has-a11y-summary,
+a.underline {
+    border: 2pt solid transparent;
+    border-width: 0 0 2pt 0;
+}
+
+#to-top:focus,
+#has-a11y-summary:hover,
+#has-a11y-summary:focus,
+#has-a11y[open] #has-a11y-summary,
+a.underline:hover,
+a.underline:focus {
+    --anm: underline 127ms ease-in;
+    border-color: var(--ac);
+    -webkit-animation: var(--anm);
+       -moz-animation: var(--anm);
+         -o-animation: var(--anm);
+            animation: var(--anm);
+}
+
+ul.rounded li {
+    margin: 0.5ex;
+    display: inline-block;
+}
+
+ul.rounded a {
+    display: inline-flex;
+    opacity: 0.86;
+    border: var(--border);
+    border-radius: 2rem;
+    background: #80808008;
+    padding: 0.5ex 1em;
+    color: var(--fg);
+    gap: 1pt;
+}
+
+ul.rounded a:hover {
+    border-color: #80808022;
+    box-shadow: var(--box-shadow-active);
+    background: #80808016;
+}
+
+ul.invert a {
+    opacity: 0.86;
+    border: unset;
+    background: var(--fg) !important;
+    color: var(--bg) !important;
+}
+
+ul.invert a:visited {
+    color: var(--bg);
+}
+
+ul.has-hash a {
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+    font-size: 0.9em;
+}
+
+#term .section-title > .tag::before,
+ul.has-hash a::before {
+    content: '#';
+}

assets/css/component/logotype.css

@@ -0,0 +1,105 @@
+/*  _____     _      _   _    ____  __   __
+    |  ___|  / \    | \ | |  / ___| \ \ / /
+    | |_    / _ \   |  \| | | |      \ 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;
+    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: 700;
+    stroke: var(--off);
+    stroke-width: 1px;
+}
+
+#logo:focus #logotype__text {
+    --anm: unset;
+    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/marginpar.css

@@ -0,0 +1,51 @@
+.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;
+}
+
+@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,560 @@
+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 */
+
+.menu-icon::before {
+    content: '\e90b';
+    font-family: 'base-ui';
+}
+
+.keydown .menu-icon::before {
+    border: var(--border);
+}
+
+#has-more-menu > summary {
+    width: 43pt;
+}
+
+#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: 20rem;
+    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;
+    align-items: baseline;
+    border: 2pt solid transparent;
+    border-width: 0 0 2pt 0;
+    padding: 1ex;
+    width: 100%;
+    color: var(--fg);
+}
+
+#top-nav a > .icon::after {
+    content: '\a0';
+}
+
+#top-nav a.has-desc {
+    flex-direction: column;
+}
+
+.anchor {
+    align-items: center;
+}
+
+#has-l10n a:hover,
+#has-l10n a:focus,
+#top-nav a:hover,
+#top-nav a:focus,
+.anchor:hover,
+.anchor:focus {
+    --anm: underline 127ms ease-in;
+    color: var(--ac);
+    border-color: var(--ac);
+}
+
+@-webkit-keyframes underline {
+    from {
+        border-image: linear-gradient(to right, var(--ac), transparent 100%) 1;
+    }
+
+    50% {
+        border-image: linear-gradient(to right, var(--ac), transparent 50%) 1;
+    }
+
+    to {
+        border-image: linear-gradient(to right, var(--ac), transparent 0%) 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;
+    }
+}
+
+.marginpar-ctrl + label::before,
+.anchor:after {
+    /* add indicator [v] */
+    --tst: 200ms ease-out;
+    position: relative;
+    top: 0.23em;
+    left: 0.43em;
+    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 {
+    width: auto;
+    font-weight: 700;
+    font-size: 0.9em;
+    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: 3.5pt 1.4ex 3.5pt 3.5pt;
+    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;
+}
+
+#has-l10n img,
+#has-i18n img {
+    border-radius: 2pt;
+    width: auto;
+    height: 8pt;
+    object-fit: cover;
+}
+
+#has-l10n .on-plank {
+    position: absolute;
+    z-index: 1;
+    margin-top: 1ex;
+    border: var(--border);
+    background: var(--bg);
+    width: auto;
+}
+
+.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 {
+    color: var(--fg);
+    position: relative;
+}
+
+.hero nav .t {
+    top: 150%;
+}
+
+.hero nav a .icon {
+    display: inline-flex;
+    margin: 2pt;
+    padding: 6pt;
+    font-size: var(--large);
+}
+
+@media only screen and (max-width: 640px) {
+
+    /* container behaviour */
+
+    #top-nav * {
+        outline: none !important;
+    }
+
+    #top-nav[open] > nav {
+        --anm: expand 99ms forwards;
+        --tso: top;
+    }
+
+    #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);
+        backdrop-filter: blur(5vmin);
+    }
+
+    /* 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: 100vw;
+        height: var(--vbody);
+        overflow-y: auto;
+    }
+
+    #i18n-menu,
+    #more-menu,
+    #hasDuckDuckGo,
+    #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 {
+        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;
+        border: var(--border);
+        border-radius: 1ex;
+        background: var(--bg);
+        padding: 1ex;
+    }
+
+    details[open] > .anchor.on-deck:after {
+        color: var(--g18);
+    }
+
+    /* bilingual */
+
+    a#has-i18n::after {
+        margin: 0 auto 0 1.5ex;
+        content: attr(aria-label);
+    }
+
+    a#has-i18n > img {
+        display: initial;
+    }
+
+    /* multilingual */
+
+    #has-i18n img {
+        height: 12pt;
+    }
+
+    #i18n-menu {
+        margin-top: 1ex;
+    }
+
+    .languangeName {
+        display: block !important;
+        margin-left: 0.5ex;
+    }
+
+    /* hide desktop element */
+
+    #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,196 @@
+#has-search > summary::before {
+    padding: 0 1ex;
+    font-family: 'base-ui';
+    font-weight: 400;
+    content: '\e911';
+}
+
+#duckduckgo,
+.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;
+}
+
+#duckduckgo {
+    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;
+}
+
+#duckduckgo .form__input {
+    --ac: #de5833;
+    flex: 1;
+    border-bottom: 2pt solid var(--g18s);
+    border-radius: 0.25ex;
+    padding: 1ex;
+}
+
+.pagefind-ui__search-input:hover,
+.pagefind-ui__search-input:focus,
+#duckduckgo .form__input:hover,
+#duckduckgo .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;
+}
+
+#duckduckgo .form__button,
+#duckduckgo .form__button > img {
+    width: 2rem;
+    height: 2rem;
+}
+
+#duckduckgo .form__input:hover + .form__button,
+#duckduckgo .form__input:focus + .form__button {
+    --tsf: scaleX(-1);
+}
+
+#duckduckgo .form__button:hover,
+#duckduckgo .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: 700;
+}
+
+.pagefind-ui__result-excerpt {
+    padding: 0 1ex;
+    font-size: 0.9em;
+}
+
+@media only screen and (max-width: 640px) {
+
+    #has-search .on-deck {
+        flex-direction: row-reverse;
+    }
+
+    #has-search .t {
+        padding: 1ex;
+        text-align: unset;
+    }
+
+    #search,
+    #hasDuckDuckGo {
+        position: unset;
+        padding: 0;
+        width: unset;
+        height: unset;
+    }
+
+    .pagefind-ui,
+    #duckduckgo {
+        margin: 1ex;
+        padding: 0;
+        border: unset;
+    }
+
+}

assets/css/component/share.css

@@ -0,0 +1,150 @@
+.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] {
+    padding-bottom: 0;
+}
+
+#share {
+    float: left;
+    margin: 1pt 0;
+}
+
+#has-share[open] #share {
+    background: unset;
+    padding-left: 0;
+    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;
+}
+
+#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 only screen and (max-width: 844px) {
+
+    #share {
+        float: unset;
+    }
+
+    #has-share[open] #share {
+        padding-left: 16.18pt;
+    }
+
+    #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,44 @@
+#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 {
+    padding: 1ex;
+    color: var(--fg);
+    overflow: hidden;
+}
+
+#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;
+}

assets/css/custom.css

@@ -0,0 +1,28 @@
+: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: var(--ac-light);
+    --fg-light-less: #13253d;
+    --bg-light-less: #e7e2e2; 
+    --midtone-less: #7d8490;
+    --fg-dark-less: #e7e2e2;
+    --bg-dark-less: #13253d;
+    --ac-dark-less: var(--ac-dark);
+
+    /* more contrast */
+    --ac-light-more: var(--ac-light);
+    --fg-light-more: #000;
+    --bg-light-more: #fff;
+    --midtone-more: gray;
+    --fg-dark-more: #fff;
+    --bg-dark-more: #000;
+    --ac-dark-more: var(--ac-dark);
+}

assets/css/layout/_default/baseof.css

@@ -0,0 +1,318 @@
+/*
+    <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: 1024px;
+    --void: calc((100vw - var(--canonic) - 1rem) / 2);
+    --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-hover: 0 1px 0.5px var(--g18);
+    --box-shadow-focus: 0 0.5px 1px var(--g18);
+    --box-shadow-active: 0 0.5px 0.5px var(--mid);
+    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;
+    scroll-margin-top: calc(var(--vhead) + 4.118rem);
+    scroll-behavior: smooth;
+    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;
+}
+
+body {
+    margin: 0 !important;
+    padding: unset !important;
+    line-height: calc(var(--baselineStretch) * 1.414);
+    color: var(--fg);
+    font-family: var(--sf), sans-serif;
+    font-size: var(--normalsize);
+    --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;
+}
+
+body {
+    max-width: unset !important;
+    padding: unset !important;
+}
+
+body > header {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--vhead);
+}
+
+body > main {
+    min-height: var(--vbody);
+}
+
+.marginpar,
+body > main > aside {
+    position: relative;
+    float: right;
+    clear: right;
+    padding-left: var(--indent);
+    width: var(--marginparwidth);
+}
+
+body > main > #main-footer {
+    position: relative;
+    margin: var(--bigskip) 1ex 1rem;
+    border: var(--border);
+    border-radius: 1ex;
+    background: #000;
+    width: calc(100% - 2ex);
+    color: #fff;
+}
+
+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 .pagewidth {
+    padding: 0 calc(var(--void) - 1ex - 1rem);
+    margin: 1ex 1ex 2ex;
+}
+
+#main-footer .column > *,
+#main-footer .column__item {
+    /* margin: 1ex 0; */
+    border: 0.1pt solid transparent;
+}
+
+#main-footer .section-title,
+#menu-footer::before {
+    display: block;
+    margin: 1ex 0 0;
+    font-size: var(--small);
+}
+
+#main-footer-primary,
+#main-footer-secondary > *  {
+    break-inside: avoid-column;
+}
+
+#main-footer p {
+    margin: 0;
+    font-size: var(--small);
+}
+
+#menu-footer a {
+    display: inline-flex;
+    position: relative;
+    padding: 0.62rem;
+    color: #fff;
+    font-size: var(--large);
+}
+
+#menu-footer a .t{
+    --tsf: translate(-3em);
+}
+
+hr {
+    border-top: var(--border);
+    border-width: 1pt 0 0 0;
+}
+
+@media only screen and (min-width: 1440px) {
+
+    :root {
+        --void: calc((100vw - var(--max-width) - 1rem) / 2) !important;
+        --marginparwidth: 391.13320448px !important;
+        /* --max-width - (100% - --golden-ratio) */
+    }
+
+}
+
+@media only screen and (max-width: 960px) {
+
+    :root {
+        --void: calc((100vw - var(--canonic) - var(--vfoot) - var(--vhead)) / 2);
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    :root {
+        --void: var(--vfoot) !important;
+        --marginparwidth: 100% !important;
+        --canonic: 86%;
+        --golden-ratio: 100%;
+    }
+
+    #main-footer .pagewidth {
+        padding-right: calc(var(--void) / 2);
+        padding-left: calc(var(--void) / 2);
+    }
+
+}
+
+@media only screen and (max-width: 540px) {
+
+    :root {
+        --void: calc(var(--vfoot) / 1.414) !important;
+    }
+
+    #main-footer-primary,
+    #main-footer-secondary {
+        column-span: all;
+    }
+
+}
+
+@media only screen and (max-width: 480px) {
+
+    :root {
+        --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,141 @@
+/* this style is used inline in list.html */
+
+body {
+    margin: auto;
+    max-width: 2560px;
+}
+
+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);
+    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: 1rem;
+}
+
+#home #list-posts {
+    padding: 1rem;
+    width: var(--golden-ratio);
+}
+
+div[role='feed'] {
+    padding: 1ex;
+}
+
+.carousel .feed-item,
+#home .feed-item,
+hr.ldots {
+    width: unset;
+}
+
+#main-footer > .pagewidth {
+    padding: 0 1ex;
+}
+
+#duckduckgo,
+#i18n-menu > .on-plank,
+#more-menu > .on-plank,
+.pagefind-ui {
+    margin-right: 1rem;
+}
+
+#hasDuckDuckGo.pagewidth {
+    padding-right: 1rem;
+}
+
+#grain {
+    display: none;
+}
+
+@media only screen and (max-width: 960px) {
+
+    body > footer,
+    body > header {
+        background: var(--bg);
+    }
+
+    body > aside.carousel {
+        float: unset;
+        margin: 0 1rem;
+        padding: 1rem 0;
+        width: unset;
+    }
+
+    body > main#home {
+        height: unset;
+        overflow-y: unset;
+    }
+
+    body > main#home > aside#list-tags {
+        top: var(--vhead);
+    }
+
+}
+
+@media only screen and (max-width: 640px) {
+
+    #main-footer > .pagewidth {
+        padding: 0 calc(var(--void) / 2);
+    }
+
+    body > main#home > aside#list-tags {
+        padding: unset;
+        width: var(--canonic);
+    }
+
+    aside + #list-posts .feed-item > section {
+        flex-direction: row-reverse;
+        aspect-ratio: 10/3;
+    }
+
+    #home #list-posts {
+        margin: var(--bigskip) auto;
+        padding: unset;
+        width: var(--canonic);
+    }
+
+    #list-posts .section-title {
+        padding-left: unset;
+    }
+
+    #duckduckgo,
+    .pagefind-ui {
+        margin-right: 1ex;
+    }
+
+}
+
+@media only screen and (max-width: 480px) {
+
+    aside + #list-posts .feed-item > section {
+        flex-direction: column;
+        aspect-ratio: unset;
+    }
+
+}
+

assets/css/layout/_default/list.css

@@ -0,0 +1,145 @@
+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,
+#taxonomy #list-tags ul {
+    padding: 0 1rem;
+}
+
+#list-series,
+#list-categories {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+}
+
+#list-series .section-title,
+#list-categories .section-title {
+    margin: var(--smallskip);
+    writing-mode: tb;
+}
+
+#list-tags {
+    position: sticky;
+    position: -webkit-sticky;
+    top: var(--vhead);
+    right: var(--void);
+}
+
+.section-title,
+#list-tags > ul {
+    margin: var(--medskip) 0 1ex;
+}
+
+#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);
+    width: unset;
+}
+
+#taxonomy #list-series,
+#taxonomy #list-categories {
+    display: unset;
+}
+
+#taxonomy #list-tags .section-title,
+#taxonomy #list-series .section-title,
+#taxonomy #list-categories .section-title {
+    margin: var(--bigskip) 0 var(--smallskip);
+    writing-mode: unset;
+}
+
+#has-pagination {
+    margin-top: 1in;
+}
+
+.section-title#series {
+    margin-left: auto;
+    width: var(--golden-ratio);
+}
+
+.list-year.textwidth {
+    display: flex;
+    position: relative;
+    align-items: baseline;
+    margin-left: auto;
+}
+
+.list-year > .section-title {
+    padding: 8pt;
+    width: 5rem;
+    text-align: right;
+}
+
+.list-year > div {
+    flex: 1;
+}
+
+.list-month > summary {
+    padding-left: 1rem;
+    list-style: none;
+}
+
+.list-day a {
+    display: block;
+    margin: 1ex 1rem;
+    padding: 1ex 0;
+    width: 100%;
+    font-size: var(--normalsize);
+}
+
+.list-day a.has-pre::before {
+    position: absolute;
+    left: -9pt;
+    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 only screen and (max-width: 640px) {
+
+    body > main > aside#list-tags {
+        position: unset;
+        position: unset;
+        float: unset;
+        margin: var(--bigskip) auto;
+        padding: 0;
+        width: var(--canonic);
+    }
+
+}

assets/css/layout/_default/single.css

@@ -0,0 +1,344 @@
+#main-article {
+    margin-top: 1in;
+    line-height: calc(var(--baselineStretch) * 1.618);
+    font-family: var(--rm), serif;
+}
+
+/* article frontmatter */
+
+#main-article > header {
+    display: flex;
+    flex-direction: column;
+    margin:var(--vskip);
+    gap: 1rem;
+}
+
+.subtitle {
+    opacity: 0.86;
+    margin: 1ex 0 0;
+    font-style: italic;
+}
+
+#main-article [role=doc-credit],
+#main-article [role=doc-colophon] {
+    font-size: var(--small);
+}
+
+#doc-cover > img {
+    margin: 2rem 0;
+    aspect-ratio: 10 / 8;
+}
+
+figure img,
+figure svg {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+#doc-author,
+#doc-author a {
+    color: var(--fg);
+    font-style: italic;
+}
+
+/* with avatar */
+#avatar,
+.author,
+.mastodon-comment > footer {
+    display: flex;
+    align-items: center;
+    line-height: 1.272;
+}
+
+#doc-author .has-aria-label::after {
+    font: 1rem var(--sf);
+}
+
+.mastodon-comment > .author > img,
+#avatar {
+    margin-right: 12pt;
+}
+
+.author img {
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+}
+
+.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)' ';
+}
+
+#page .date-has-label > time,
+#keywords li {
+    text-transform: lowercase;
+}
+
+.doc-publish-date::before {
+    text-transform: initial;
+}
+
+#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 {
+    clear: both;
+    max-width: var(--golden-ratio);
+    overflow: 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-timeline > p,
+.footnotes ol {
+    margin-top: 0;
+    padding: 0;
+}
+
+.footnotes li::marker {
+    font-feature-settings: 'sups' 1;
+    font-variant-position: super;
+}
+
+#content,
+#keywords,
+#contentinfo {
+    margin: var(--vskip);
+    overflow-wrap: break-word;
+}
+
+.verbose {
+    font: 1rem/2rem monospace;
+    overflow-wrap: anywhere;
+}
+
+#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;
+    font-family: var(--sf);
+    font-size: var(--small);
+}
+
+#contrib-menu li {
+    margin: 1ex 1ex 1ex 0;
+}
+
+#contrib-menu a {
+    display: inline-block;
+    border-radius: 1ex;
+    background: var(--ac);
+    padding: 4pt 9pt 3pt 7pt;
+    color: var(--bg);
+}
+
+#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: '>';
+}
+
+#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: -1rem;
+    border: 4pt solid var(--bg);
+    background: var(--mid);
+    padding: 0 3pt;
+    font-size: 0.6em;
+    content: '\a0';
+}
+
+#TableOfContents,
+.letterine {
+    text-transform: lowercase;
+    letter-spacing: 0.1em;
+    font-variant: small-caps;
+    -webkit-font-feature-settings: 'smcp' 1;
+       -moz-font-feature-settings: 'smcp' 1;
+            font-feature-settings: 'smcp' 1;
+}
+
+.letterine::before {
+    display: block;
+    border-bottom: 2pt solid var(--ac);
+    content: '';
+}
+
+.letterine > i {
+    /*  <span class='letterine'><i>e</i>xample</span>
+        inconsistence result across browsers
+        */
+    position: relative;
+    top: -0.2rem;
+    float: left;
+    background: var(--bg);
+    padding-right: .1em;
+    line-height: 0.5;
+    color: var(--ac);
+    font-size: 6em;
+}
+
+#has-timeline .has-aria-label-top {
+    margin: 5pt 0;
+}
+
+#contentinfo {
+    display: grid;
+    grid-template-columns: 6fr 4fr;
+    gap: var(--medskip);
+}
+
+#has-share,
+#comments {
+    grid-column: 1 / 3;
+}
+
+@media screen and (max-width: 640px) {
+
+    #contentinfo {
+        display: block;
+    }
+
+    #contentinfo > * {
+        margin-bottom: var(--bigskip) ;
+    }
+    .katex-display {
+        overflow-x: auto;
+    }
+
+}

assets/css/media/print.css

@@ -0,0 +1,204 @@
+@media print {
+
+    :root {
+        font-size: 10pt;
+    }
+
+    @page {
+        margin: 10vmin;
+    }
+
+    body {
+        background: none;
+        padding-left: 0;
+        max-width: 100vw;
+    }
+
+    body > header,
+    body > footer,
+    body > footer *,
+    body > div,
+    body > aside,
+    body > main > header,
+    audio,
+    #has-share,
+    #background-body,
+    #contribute,
+    #related,
+    #coffee-counter,
+    #menu-footer
+     {
+        display: none;
+    }
+
+    body > main {
+        height: unset;
+    }
+
+    body > main > #main-footer {
+        border: unset;
+        margin:var(--vskip);
+        padding: unset;
+    }
+
+    .pagewidth,
+    #main-footer .pagewidth {
+        padding: 0;
+    }
+
+    body > main > #main-footer {
+        background: none;
+        color: var(--fg);
+    }
+
+    body h1:first-of-type {
+        margin-top: 0;
+    }
+
+    /* dont work properly on firefox
+    h1,
+    section > h1,
+    .section-title {
+        page-break-before: always;
+        break-before: always;
+
+    header > h1 {
+        page-break-before: avoid !important;
+        break-before: avoid !important;
+    }
+    } */
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .section-title {
+        page-break-after: avoid;
+        break-after: avoid;
+    }
+
+    table,
+    img,
+    svg,
+    figure,
+    .sidenote,
+    .marginnote,
+    #comments article,
+    article#feed-item {
+        page-break-inside: avoid;
+        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;
+    }
+
+    article #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: block;
+    }
+}
+
+/* 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,191 @@
+#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,
+#join-discussion:hover,
+#join-discussion:focus,
+a.cta:hover,
+a.cta:focus {
+    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,
+#menu-footer a:hover,
+#menu-footer a:focus,
+a.replies.active,
+a.reblogs.active,
+#has-author-name-menu a:hover,
+#has-author-name-menu a:focus,
+#related a:hover,
+#related a:focus {
+    color: var(--ac);
+}
+
+.feed-item > hgroup > div a,
+#related a {
+    color: var(--fg);
+}
+
+.readingTime,
+.feed-item > section > div,
+.feed-item > hgroup > div,
+.feed-item:hover img,
+#contrib-menu a:hover,
+#contrib-menu a:focus {
+    opacity: 0.86;
+}
+
+main > header > menu > li > a:hover,
+main > header > menu > li > a:focus,
+.feed-item:hover .par,
+.feed-item:focus .par,
+ul.invert a:hover,
+::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+}
+
+main#page + footer #setBaselineStretch,
+main#page + footer #useBionRead,
+input[type=checkbox] + label .off,
+input[type=checkbox]:checked + label .on,
+#TableOfContents + nav > ul,
+#TableOfContents + nav > ul > li,
+.has-desc:after {
+    display: block;
+}
+
+input[type=checkbox]:checked + label .off,
+input[type=checkbox] + label .on,
+#setBaselineStretch,
+#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;
+}
+
+#has-a11y[open] #a11y,
+#OpenDyslexic:hover + label #OpenDyslexicIndicator,
+#OpenDyslexic:focus + label #OpenDyslexicIndicator,
+#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-l10n a:hover,
+#has-l10n a:focus,
+#top-nav a:hover,
+#top-nav a:focus,
+.anchor:hover,
+.anchor:focus,
+#has-a11y[open] > summary .icon::before,
+#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);
+}
+
+hr.ldots::after,
+#to-top::before,
+input + label > #lightSwitchIndicator,
+.hand,
+.pagination .rfill a::before,
+.carousel__viewport__slide:last-child > nav a::before,
+#back::before,
+.feed-item:hover,
+.feed-item:focus-within,
+ul.carousel__viewport > li:hover,
+ul.carousel__viewport > li:focus-within,
+.pagination .lfill a::after,
+#list-tags > nav a::after,
+.carousel__viewport__slide:first-child > nav a::after,
+.parent-anchor a::after,
+#i18n-menu a::after,
+#content a::after,
+#duckduckgo .form__button,
+#to-content,
+.t {
+    -webkit-transform: var(--tsf);
+       -moz-transform: var(--tsf);
+        -ms-transform: var(--tsf);
+         -o-transform: var(--tsf);
+            transform: var(--tsf);
+}
+
+#OpenDyslexicIndicator,
+.marginpar-ctrl + label::before,
+.anchor:after,
+#has-share i:hover {
+    -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,
+#setOpenDyslexic > label::before,
+#main-footer-secondary,
+#menu-footer {
+    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/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/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,51 @@
+@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%;
+}
+
+:root {
+    --od: 'OpenDyslexic';
+}

assets/css/typeface-local/Rosario.css

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

assets/css/typeface-local/icon.css

@@ -0,0 +1,184 @@
+/* Icon Fonts */
+@font-face {
+    font-family: 'base-ui';
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+    src: url('/css/fonts/base-ui.woff2') format('woff2');
+}
+
+/* fallback setting for websafefonts */
+
+@font-face {
+    font-family: 'Times New Roman';
+    src: local('Times New Roman');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'Arial';
+    src: local('Arial');
+    size-adjust: 87%;
+    ascent-override: 101%;
+    descent-override: 34%;
+}
+
+@font-face {
+    font-family: 'Courier New';
+    src: local('Courier New');
+    size-adjust: 107%;
+    ascent-override: 83%;
+    descent-override: 28%;
+}
+
+#mastodonInstance::before,
+#has-share i,
+.stat a::before,
+.icon {
+    font-family: 'base-ui' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-feature-settings: 'liga';
+       -moz-font-feature-settings: 'liga=1';
+       -moz-font-feature-settings: 'liga';
+        -ms-font-feature-settings: 'liga' 1;
+            font-feature-settings: 'liga';
+    -webkit-font-variant-ligatures: discretionary-ligatures;
+            font-variant-ligatures: discretionary-ligatures;
+}
+
+.emoji {
+    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols;
+}
+
+.icon.accessibility:before {content: '\e900';}
+.icon.arrow:before {content: '\e902';}
+.icon.circle-checked:before {content: '\e903';}
+.icon.circle-unchecked:before {content: '\e904';}
+.icon.copyleft:before {content: '\e906';}
+#has-share .email:before,
+.icon.email:before {content: '\e907';}
+a.favourites::before,
+.icon.heart:before {content: '\e908';}
+.icon.internationalization:before {content: '\e909';}
+.icon.localization:before {content: '\e90a';}
+.icon.menu:before {content: '\e90b';}
+#has-share .print:before,
+.icon.print:before {content: '\e90c';}
+.reblogs::before,
+.icon.reblog:before {content: '\e90d';}
+a.replies::before,
+.icon.reply:before {content: '\e90e';}
+.icon.reset:before {content: '\e90f';}
+.icon.rss:before {content: '\e910';}
+.icon.search:before {content: '\e911';}
+.icon.share:before {content: '\e912';}
+.icon.xmark:before {content: '\e913';}
+.icon.behance:before {content: '\e914';}
+.icon.bigcartel:before {content: '\e915';}
+.icon.bitbucket:before {content: '\e916';}
+.icon.blogger:before {content: '\e917';}
+#has-share .bluesky:before,
+.icon.bluesky:before {content: '\e918';}
+.icon.bukalapak:before {content: '\e919';}
+.icon.buymeacoffee:before {content: '\e91a';}
+.icon.clubhouse:before {content: '\e91b';}
+.icon.codepen:before {content: '\e91c';}
+.icon.creativefabrica:before {content: '\e91d';}
+.icon.dailymotion:before {content: '\e91e';}
+.icon.dev:before {content: '\e91f';}
+.icon.deviantart:before {content: '\e920';}
+.icon.digg:before {content: '\e921';}
+.icon.discord:before {content: '\e922';}
+.icon.dribbble:before {content: '\e923';}
+.icon.ebay:before {content: '\e924';}
+.icon.etsy:before {content: '\e925';}
+#has-share .facebook:before,
+.icon.facebook:before {content: '\e926';}
+.icon.figma:before {content: '\e927';}
+.icon.flickr:before {content: '\e928';}
+.icon.flipkart:before {content: '\e929';}
+.icon.github:before {content: '\e92a';}
+.icon.githubsponsors:before {content: '\e92b';}
+.icon.gitlab:before {content: '\e92c';}
+.icon.gnusocial:before {content: '\e92d';}
+.icon.goodreads:before {content: '\e92e';}
+.icon.googlescholar:before {content: '\e92f';}
+.icon.gumroad:before {content: '\e930';}
+#has-share .hackernews:before,
+.icon.hackernews:before {content: '\e931';}
+.icon.hashnode:before {content: '\e932';}
+.icon.icon--500px:before {content: '\e933';}
+.icon.instagram:before {content: '\e934';}
+.icon.jsfiddle:before {content: '\e935';}
+.icon.karyakarsa:before {content: '\e936';}
+.icon.keybase:before {content: '\e937';}
+.icon.keycdn:before {content: '\e938';}
+.icon.kickstarter:before {content: '\e939';}
+.icon.kofi:before {content: '\e93a';}
+.icon.lazada:before {content: '\e93b';}
+.icon.liberapay:before {content: '\e93c';}
+#has-share .linkedin:before,
+.icon.linkedin:before {content: '\e93d';}
+.icon.mastodon:before {content: '\e93e';}
+.icon.medium:before {content: '\e93f';}
+.icon.olx:before {content: '\e940';}
+.icon.opencollective:before {content: '\e941';}
+.icon.openid:before {content: '\e942';}
+.icon.orcid:before {content: '\e943';}
+.icon.patreon:before {content: '\e944';}
+.icon.paypal:before {content: '\e945';}
+.icon.peertube:before {content: '\e946';}
+#has-share .pinterest:before,
+.icon.pinterest:before {content: '\e947';}
+.icon.pleroma:before {content: '\e948';}
+.icon.publons:before {content: '\e949';}
+.icon.quora:before {content: '\e94a';}
+#has-share .reddit:before,
+.icon.reddit:before {content: '\e94b';}
+.icon.researchgate:before {content: '\e94c';}
+.icon.saweria:before {content: '\e94d';}
+.icon.sellfy:before {content: '\e94e';}
+.icon.shopee:before {content: '\e94f';}
+.icon.shopify:before {content: '\e950';}
+.icon.signal:before {content: '\e951';}
+.icon.snapchat:before {content: '\e952';}
+.icon.soundcloud:before {content: '\e953';}
+.icon.stackexchange:before {content: '\e954';}
+.icon.stackoverflow:before {content: '\e955';}
+.icon.stripe:before {content: '\e956';}
+.icon.substack:before {content: '\e957';}
+#has-share .telegram:before,
+.icon.telegram:before {content: '\e958';}
+.icon.threads:before {content: '\e959';}
+.icon.tiktok:before {content: '\e95a';}
+.icon.tokopedia:before {content: '\e95b';}
+#has-share .tumblr:before,
+.icon.tumblr:before {content: '\e95c';}
+.icon.twitch:before {content: '\e95d';}
+#has-share .twitter:before,
+.icon.twitter:before {content: '\e95e';}
+.icon.vimeo:before {content: '\e95f';}
+.icon.vine:before {content: '\e960';}
+#has-share .vk:before,
+.icon.vk:before {content: '\e961';}
+.icon.wattpad:before {content: '\e962';}
+.icon.weibo:before {content: '\e963';}
+#has-share .whatsapp:before,
+.icon.whatsapp:before {content: '\e964';}
+.icon.wikipedia:before {content: '\e965';}
+.icon.wordpress:before {content: '\e966';}
+.icon.write-dot-as:before {content: '\e967';}
+.icon.x:before {content: '\e968';}
+#has-share .xing:before,
+.icon.xing:before {content: '\e969';}
+.icon.xmpp:before {content: '\e96a';}
+.icon.youtube:before {content: '\e96b';}

assets/css/typeface/Cormorant.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'Cormorant';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/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(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/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(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/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(https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/fonts/webfonts/Cormorant-BoldItalic.woff2) format('woff2');
+    size-adjust: 110%;
+    ascent-override: 80%;
+    descent-override: 28%;
+}
+
+:root {
+    --rm: 'Cormorant';
+}

assets/css/typeface/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(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/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(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/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(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/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(https://raw.githubusercontent.com/skosch/Crimson/master/Web%20Fonts/crimson-bolditalic-webfont.woff2) format('woff2');
+    size-adjust: 95%;
+}
+
+:root {
+    --rm: 'crimson';
+}

assets/css/typeface/EBGaramond.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'EB Garamond';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/imedadel/typeface-eb-garamond-latest/master/files/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(https://raw.githubusercontent.com/imedadel/typeface-eb-garamond-latest/master/files/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(https://raw.githubusercontent.com/googlefonts/ebgaramond-specimen/main/docs/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(https://raw.githubusercontent.com/googlefonts/ebgaramond-specimen/main/docs/fonts/EBGaramond12-BoldItalic.woff) format('woff');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+:root {
+    --rm: 'EB Garamond';
+}

assets/css/typeface/Inconsolata.css

@@ -0,0 +1,25 @@
+@font-face {
+    font-family: 'Inconsolata';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inconsolata'),
+         url(https://raw.githubusercontent.com/googlefonts/Inconsolata/main/fonts/webfonts/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(https://raw.githubusercontent.com/googlefonts/Inconsolata/main/fonts/webfonts/Inconsolata-Bold.woff2) format('woff2');
+    ascent-override: 88%;
+    descent-override: 30%;
+}
+
+:root {
+    --tt: 'Inconsolata';
+}

assets/css/typeface/Inter.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('Inter'),
+         url(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/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(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/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(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/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(https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/Inter-BoldItalic.woff2) format('woff2');
+    size-adjust: 84%;
+    ascent-override: 104%;
+    descent-override: 36%;
+}
+
+:root {
+    --sf: 'Inter';
+}

assets/css/typeface/Montserrat.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/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(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/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(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/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(https://raw.githubusercontent.com/JulietaUla/Montserrat/master/fonts/webfonts/Montserrat-BoldItalic.woff2) format('woff2');
+    size-adjust: 85%;
+    ascent-override: 104%;
+    descent-override: 36%;
+    line-gap-override: 50%;
+}
+
+:root {
+    --sf: 'Montserrat';
+}

assets/css/typeface/OpenDyslexic.css

@@ -0,0 +1,51 @@
+@font-face {
+    font-family: 'OpenDyslexic';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('OpenDyslexic'),
+         url(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/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(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/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(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/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(https://raw.githubusercontent.com/antijingoist/OpenDyslexic/master/compiled/OpenDyslexic-Bold-Italic.woff2) format('woff2');
+    size-adjust: 83%;
+    ascent-override: 106%;
+    descent-override: 36%;
+}
+
+:root {
+    --od: 'OpenDyslexic';
+}

assets/css/typeface/Rosario.css

@@ -0,0 +1,43 @@
+@font-face {
+    font-family: 'Rosario';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Regular.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Italic.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-Bold.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+@font-face {
+    font-family: 'Rosario';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://raw.githubusercontent.com/Omnibus-Type/Rosario/master/fonts/webfonts/Rosario-BoldItalic.woff2) format('woff2');
+    size-adjust: 90%;
+    descent-override: 33%;
+}
+
+:root {
+    --sf: 'Rosario';
+}

assets/css/typeface/icon.css

@@ -0,0 +1,184 @@
+/* Icon Fonts */
+@font-face {
+    font-family: 'base-ui';
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+    src: url(https://raw.githubusercontent.com/foxihd/hugo-brewm/main/static/css/fonts/base-ui.woff2) format('woff2');
+}
+
+/* fallback setting for websafefonts */
+
+@font-face {
+    font-family: 'Times New Roman';
+    src: local('Times New Roman');
+    size-adjust: 102%;
+    ascent-override: 87%;
+    descent-override: 30%;
+}
+
+@font-face {
+    font-family: 'Arial';
+    src: local('Arial');
+    size-adjust: 87%;
+    ascent-override: 101%;
+    descent-override: 34%;
+}
+
+@font-face {
+    font-family: 'Courier New';
+    src: local('Courier New');
+    size-adjust: 107%;
+    ascent-override: 83%;
+    descent-override: 28%;
+}
+
+#mastodonInstance::before,
+#has-share i,
+.stat a::before,
+.icon {
+    font-family: 'base-ui' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-feature-settings: 'liga';
+       -moz-font-feature-settings: 'liga=1';
+       -moz-font-feature-settings: 'liga';
+        -ms-font-feature-settings: 'liga' 1;
+            font-feature-settings: 'liga';
+    -webkit-font-variant-ligatures: discretionary-ligatures;
+            font-variant-ligatures: discretionary-ligatures;
+}
+
+.emoji {
+    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', NotoColorEmoji, 'Segoe UI Symbol', 'Android Emoji', EmojiSymbols;
+}
+
+.icon.accessibility:before {content: '\e900';}
+.icon.arrow:before {content: '\e902';}
+.icon.circle-checked:before {content: '\e903';}
+.icon.circle-unchecked:before {content: '\e904';}
+.icon.copyleft:before {content: '\e906';}
+#has-share .email:before,
+.icon.email:before {content: '\e907';}
+a.favourites::before,
+.icon.heart:before {content: '\e908';}
+.icon.internationalization:before {content: '\e909';}
+.icon.localization:before {content: '\e90a';}
+.icon.menu:before {content: '\e90b';}
+#has-share .print:before,
+.icon.print:before {content: '\e90c';}
+.reblogs::before,
+.icon.reblog:before {content: '\e90d';}
+a.replies::before,
+.icon.reply:before {content: '\e90e';}
+.icon.reset:before {content: '\e90f';}
+.icon.rss:before {content: '\e910';}
+.icon.search:before {content: '\e911';}
+.icon.share:before {content: '\e912';}
+.icon.xmark:before {content: '\e913';}
+.icon.behance:before {content: '\e914';}
+.icon.bigcartel:before {content: '\e915';}
+.icon.bitbucket:before {content: '\e916';}
+.icon.blogger:before {content: '\e917';}
+#has-share .bluesky:before,
+.icon.bluesky:before {content: '\e918';}
+.icon.bukalapak:before {content: '\e919';}
+.icon.buymeacoffee:before {content: '\e91a';}
+.icon.clubhouse:before {content: '\e91b';}
+.icon.codepen:before {content: '\e91c';}
+.icon.creativefabrica:before {content: '\e91d';}
+.icon.dailymotion:before {content: '\e91e';}
+.icon.dev:before {content: '\e91f';}
+.icon.deviantart:before {content: '\e920';}
+.icon.digg:before {content: '\e921';}
+.icon.discord:before {content: '\e922';}
+.icon.dribbble:before {content: '\e923';}
+.icon.ebay:before {content: '\e924';}
+.icon.etsy:before {content: '\e925';}
+#has-share .facebook:before,
+.icon.facebook:before {content: '\e926';}
+.icon.figma:before {content: '\e927';}
+.icon.flickr:before {content: '\e928';}
+.icon.flipkart:before {content: '\e929';}
+.icon.github:before {content: '\e92a';}
+.icon.githubsponsors:before {content: '\e92b';}
+.icon.gitlab:before {content: '\e92c';}
+.icon.gnusocial:before {content: '\e92d';}
+.icon.goodreads:before {content: '\e92e';}
+.icon.googlescholar:before {content: '\e92f';}
+.icon.gumroad:before {content: '\e930';}
+#has-share .hackernews:before,
+.icon.hackernews:before {content: '\e931';}
+.icon.hashnode:before {content: '\e932';}
+.icon.icon--500px:before {content: '\e933';}
+.icon.instagram:before {content: '\e934';}
+.icon.jsfiddle:before {content: '\e935';}
+.icon.karyakarsa:before {content: '\e936';}
+.icon.keybase:before {content: '\e937';}
+.icon.keycdn:before {content: '\e938';}
+.icon.kickstarter:before {content: '\e939';}
+.icon.kofi:before {content: '\e93a';}
+.icon.lazada:before {content: '\e93b';}
+.icon.liberapay:before {content: '\e93c';}
+#has-share .linkedin:before,
+.icon.linkedin:before {content: '\e93d';}
+.icon.mastodon:before {content: '\e93e';}
+.icon.medium:before {content: '\e93f';}
+.icon.olx:before {content: '\e940';}
+.icon.opencollective:before {content: '\e941';}
+.icon.openid:before {content: '\e942';}
+.icon.orcid:before {content: '\e943';}
+.icon.patreon:before {content: '\e944';}
+.icon.paypal:before {content: '\e945';}
+.icon.peertube:before {content: '\e946';}
+#has-share .pinterest:before,
+.icon.pinterest:before {content: '\e947';}
+.icon.pleroma:before {content: '\e948';}
+.icon.publons:before {content: '\e949';}
+.icon.quora:before {content: '\e94a';}
+#has-share .reddit:before,
+.icon.reddit:before {content: '\e94b';}
+.icon.researchgate:before {content: '\e94c';}
+.icon.saweria:before {content: '\e94d';}
+.icon.sellfy:before {content: '\e94e';}
+.icon.shopee:before {content: '\e94f';}
+.icon.shopify:before {content: '\e950';}
+.icon.signal:before {content: '\e951';}
+.icon.snapchat:before {content: '\e952';}
+.icon.soundcloud:before {content: '\e953';}
+.icon.stackexchange:before {content: '\e954';}
+.icon.stackoverflow:before {content: '\e955';}
+.icon.stripe:before {content: '\e956';}
+.icon.substack:before {content: '\e957';}
+#has-share .telegram:before,
+.icon.telegram:before {content: '\e958';}
+.icon.threads:before {content: '\e959';}
+.icon.tiktok:before {content: '\e95a';}
+.icon.tokopedia:before {content: '\e95b';}
+#has-share .tumblr:before,
+.icon.tumblr:before {content: '\e95c';}
+.icon.twitch:before {content: '\e95d';}
+#has-share .twitter:before,
+.icon.twitter:before {content: '\e95e';}
+.icon.vimeo:before {content: '\e95f';}
+.icon.vine:before {content: '\e960';}
+#has-share .vk:before,
+.icon.vk:before {content: '\e961';}
+.icon.wattpad:before {content: '\e962';}
+.icon.weibo:before {content: '\e963';}
+#has-share .whatsapp:before,
+.icon.whatsapp:before {content: '\e964';}
+.icon.wikipedia:before {content: '\e965';}
+.icon.wordpress:before {content: '\e966';}
+.icon.write-dot-as:before {content: '\e967';}
+.icon.x:before {content: '\e968';}
+#has-share .xing:before,
+.icon.xing:before {content: '\e969';}
+.icon.xmpp:before {content: '\e96a';}
+.icon.youtube:before {content: '\e96b';}

assets/css/typeface/websafe.css

@@ -0,0 +1,13 @@
+:root {
+    --rm: 'Times New Roman';
+    --rmosf: 'Palatino';
+    --sf: Arial;
+    --tt: 'Courier New';
+}
+
+/* :root {
+    --rm: Garamond, Palatino, 'Times New Roman';
+    --rmosf: 'Palatino';
+    --sf: Helvetica, Verdana, Arial;
+    --tt: Courier, Consolas, 'Courier New';
+} */

assets/css/typesetting/_template.css

@@ -0,0 +1,306 @@
+/* font-style */
+    .normalfont {
+        font-style: normal;
+        font-weight: normal;
+    }
+
+    .md
+    .textmd,
+    .mdseries {
+        font-weight: normal;
+    }
+
+    .bf,
+    .textbf,
+    .bfseries {
+        font-weight: bold;
+    }
+
+    .up,
+    .textup,
+    .upshape {
+        font-style: normal;
+    }
+
+    .it,
+    .textit,
+    .itshape {
+        font-style: italic;
+    }
+
+    .sl,
+    .textsl,
+    .slshape {
+        --tsf: skew(-7deg, 0deg);
+        -webkit-transform: var(--tsf);
+           -moz-transform: var(--tsf);
+            -ms-transform: var(--tsf);
+             -o-transform: var(--tsf);
+                transform: var(--tsf);
+                font-style: oblique;
+    }
+
+    .sw,
+    .textsw,
+    .swshape {
+        font-variant-alternates: swash(swsh);
+        font-feature-settings: 'swsh' 1;
+        -moz-font-feature-settings: 'swsh' 1;
+        -webkit-font-feature-settings: 'swsh' 1;
+    }
+
+    .sc,
+    .ssc,
+    .textsc,
+    .scshape {
+        font-variant: small-caps;
+        font-feature-settings: 'smcp' 1;
+        -moz-font-feature-settings: 'smcp' 1;
+        -webkit-font-feature-settings: 'smcp' 1;
+    }
+
+    .allsmallcaps,
+    .ssc {
+        font-variant-caps: all-small-caps;
+        font-feature-settings: 'c2sc' 1;
+        -moz-font-feature-settings: 'c2sc' 1;
+        -webkit-font-feature-settings: 'c2sc' 1;
+        letter-spacing: 0.16em;
+        word-spacing: 16%;
+    }
+
+/* font-family */
+    .rm,
+    .textrm {
+        font-family: var(--rm), serif;
+    }
+
+    .tt,
+    .texttt {
+        font-family: var(--tt), monospace;
+    }
+
+    .sf,
+    .textsf {
+        font-family: var(--sf), sans-serif;
+    }
+
+    .od,
+    .textod {
+        font-family: var(--od), sans-serif;
+    }
+
+/* numeral */
+    .pnum,
+    .pl,
+    .po,
+    .textpl,
+    .textpo {
+        font-variant-numeric: proportional-nums;
+        font-feature-settings: 'pnum' 1;
+        -moz-font-feature-settings: 'pnum' 1;
+        -webkit-font-feature-settings: 'pnum' 1;
+    }
+
+    .onum,
+    .po,
+    .to,
+    .textpo,
+    .textto {
+        font-variant-numeric: oldstyle-nums;
+        font-feature-settings:'onum' 1;
+        -moz-font-feature-settings:'onum' 1;
+        -webkit-font-feature-settings:'onum' 1;
+    }
+
+    .lnum,
+    .tl,
+    .pl
+    .texttl,
+    .textpl {
+        font-variant-numeric: lining-nums;
+        font-feature-settings: 'lnum' 1;
+        -moz-font-feature-settings: 'lnum' 1;
+        -webkit-font-feature-settings: 'lnum' 1;
+    }
+
+    .tnum,
+    .to,
+    .po,
+    .textto,
+    .textpo {
+        font-variant-numeric: tabular-nums;
+        font-feature-settings: 'tnum' 1, 'kern' 0;
+        -moz-font-feature-settings: 'tnum' 1, 'kern' 0;
+        -webkit-font-feature-settings: 'tnum' 1, 'kern' 0;
+    }
+
+    .sz0 {
+        font-variant-numeric: slashed-zero;
+        font-feature-settings: 'zero' 1;
+        -moz-font-feature-settings: 'zero' 1;
+        -webkit-font-feature-settings: 'zero' 1;
+    }
+
+    .sub,
+    .textsub {
+        font-variant-position: sub;
+        font-feature-settings: 'subs' 1;
+    }
+
+    .sup,
+    .textsup {
+        font-variant-position: super;
+        font-feature-settings: 'sups' 1;
+    }
+
+    .ldots {
+        text-overflow: ellipsis;
+        overflow-x: clip;
+        white-space: nowrap;
+    }
+
+/* presentation */
+    .smallskip {
+        margin: var(--smallskip) 0;
+    }
+
+    .medskip {
+        margin: var(--medskip) 0;
+    }
+
+    .bigskip {
+        margin:var(--vskip);
+    }
+
+    .hfill,
+    .lfill {
+        margin-left: auto;
+    }
+
+    .hfill,
+    .rfill {
+        margin-right: auto;
+    }
+
+    .vfill,
+    .tfill {
+        margin-top: auto;
+    }
+
+    .vfill,
+    .bfill {
+        margin-bottom: auto;
+    }
+
+    .center {
+        margin: auto;
+        align-self: center;
+    }
+
+    .center,
+    .centering {
+        text-align: center;
+    }
+
+    .justifying {
+        text-align: justify;
+    }
+
+    .flushleft,
+    .raggedright {
+        text-align: left;
+    }
+
+    .flushright,
+    .raggedleft {
+        text-align: right;
+    }
+
+    .nomargin {
+        margin: 0;
+    }
+
+    .nopadding {
+        padding: 0;
+    }
+
+    .noindent {
+        text-indent: 0 !important;
+    }
+
+    .parindent {
+        text-indent: var(--indent);
+    }
+
+/* break */
+    .nobreak {
+        break-inside: avoid;
+    }
+
+    .nopagebreak {
+        break-after: avoid-page;
+        page-break-after: avoid;
+    }
+
+    .break {
+        break-after: always;
+    }
+
+    .columnbreak {
+        break-after: column;
+    }
+
+    .pagebreak {
+        break-after: page;
+        page-break-after: always;
+    }
+
+    .newpage {
+        break-before: always;
+        page-break-before: always;
+    }
+
+    .clearpage {
+        break-after: verso;
+    }
+
+    .creardoublepage {
+        break-after: recto;
+    }
+
+/* quotation */
+    q {
+        font-style: italic;
+    }
+
+    /* enquote */
+    q {
+        quotes: '“' '”' '‘' '’';
+        }
+
+    q.alt {
+        quotes: '”' '”' '’' '’';
+    }
+
+    /* guillemet */
+    q.gm,
+    q.guillemet {
+        quotes: '«' '»' '‹' '›';
+    }
+
+    q.gm.alt,
+    q.guillemet.alt {
+        quotes: '»' '«' '›' '‹';
+    }
+
+    /* goosefeet */
+    q.gf,
+    q.goosefeet {
+        quotes: '„' '“' '‚' '‘';
+    }
+
+    q.gf.alt,
+    q.goosefeet.alt {
+        quotes: '„' '”' '‚' '’';
+    }

assets/css/typesetting/default.css

@@ -0,0 +1,293 @@
+:root {
+    --tiny: 0.618rem;
+    --scriptsize: 0.786rem;
+    --footnotesize: 1rem;
+    --small: 1.144rem;
+    --normalsize: 1.272rem;
+    --large: 1.414rem;
+    --Large: 1.618rem;
+    --LARGE: 2.058rem;
+    --huge: 2.618rem;
+    --Huge: 3.33rem;
+    --fontScale: 1;
+    --baselineStretch: 1;
+    --indent: 1.618pc;
+    --smallskip: 1rem;
+    --medskip: 1.618rem;
+    --bigskip: 3.14rem;
+    --vskip:var(--bigskip) 0;
+}
+
+h1 + p,
+h2 + p,
+h3 + p,
+h4 + p,
+h5 + p,
+h6 + p,
+p * {
+    margin-top: 0;
+    padding-top: 0;
+    text-indent: 0 !important;
+}
+
+blockquote {
+    margin: 0;
+    background: #ffe8aa22;
+    padding: 1pt var(--indent);
+    width: var(--golden-ratio);
+    font-style: italic;
+}
+
+blockquote blockquote {
+    margin-bottom: var(--indent);
+    border-left: var(--bound);
+    background: none;
+    width: unset;
+}
+
+blockquote cite {
+    font-style: italic;
+}
+
+kbd {
+    /* border: 1pt solid var(--mid); */
+    -webkit-transition: 0.2s;
+       -moz-transition: 0.2s;
+         -o-transition: 0.2s;
+            transition: 0.2s;
+    margin: 0 2pt;
+    border-radius: 0.7ex;
+    padding: 0.3ex 1ex;
+    font-size: var(--footnotesize);
+    box-shadow: var(--box-shadow-focus);
+}
+
+kbd:hover {
+    box-shadow: var(--box-shadow-hover);
+}
+
+kbd:has(kbd) {
+    border-radius: 1ex;
+    padding: 1ex 0.7ex;
+}
+
+.key {
+    display: none;
+    text-transform: uppercase;
+}
+
+.keydown .key {
+    display: initial !important;
+    font-family: var(--sf), sans-serif;
+    font-weight: unset;
+}
+
+code {
+    border-radius: 0.25em;
+    background: var(--g18s);
+}
+
+pre > code {
+    display: block;
+    border-radius: 1ex;
+    background: unset;
+    width: fit-content;
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+code,
+pre > code {
+    line-height: 1.618;
+    letter-spacing: 0.05em;
+    font-family: var(--tt), monospace;
+    font-kerning: none;
+    font-size: 0.8em;
+    -webkit-font-feature-settings: 'kern' 0;
+       -moz-font-feature-settings: 'kern' 0;
+            font-feature-settings: 'kern' 0;
+}
+
+pre > code table {
+    border: unset;
+}
+
+dl,
+ol,
+ul {
+    padding-left: var(--indent);
+}
+
+.ldots {
+    text-overflow: ellipsis;
+    overflow-x: clip;
+    white-space: nowrap;
+}
+
+.lfill {
+    margin-left: auto;
+}
+
+.rfill {
+    margin-right: auto;
+}
+
+.sw,
+.textsw,
+.swshape {
+    font-variant-alternates: swash(swsh);
+    -webkit-font-feature-settings: 'swsh' 1;
+       -moz-font-feature-settings: 'swsh' 1;
+            font-feature-settings: 'swsh' 1;
+}
+
+.up,
+.textup,
+.upshape {
+    font-style: normal;
+}
+
+table,
+thead {
+    border-collapse: collapse;
+    border: solid var(--off);
+    border-width: 1pt 0;
+}
+
+thead {
+    background: var(--g18s);
+}
+
+th {
+    padding: 2pt 0;
+}
+
+td {
+    padding: 1pt 0;
+}
+
+th + th {
+    border-left: 1pt dotted var(--g18s);
+}
+
+tbody tr:nth-child(2n) {
+    background-color: #80808008;
+}
+
+.carousel__viewport h2,
+.carousel__viewport h3,
+.hero__content h1,
+.hero__content h2,
+.hero__content h3,
+#share > span,
+#menu-footer::before,
+.section-title {
+    vertical-align: middle;
+    text-transform: uppercase;
+    letter-spacing: 2pt;
+    font-weight: 700;
+    font-variant: small-caps;
+    font-style: normal;
+    /* font-variant-caps: all-small-caps; */
+}
+
+details.presentation > summary {
+    cursor: pointer;
+    list-style: none;
+}
+
+.has-aria-label-top:before,
+.has-aria-label:after {
+    display: block;
+    margin: auto;
+    content: attr(aria-label);
+}
+
+.has-pre::before,
+.has-post:after,
+.has-desc:after {
+    display: inline-block;
+    color: var(--mid);
+    font-size: 0.9em;
+    font-weight: normal;
+    content: attr(aria-description);
+}
+
+.t {
+    --tsf: translate(-2em);
+    display: inline-flex;
+    position: absolute;
+    top: 125%;
+    justify-content: center;
+    visibility: hidden;
+    z-index: 1;
+    border-radius: 1em;
+    background: var(--fg);
+    padding: 0.25em;
+    width: 7.5em;
+    text-align: center;
+    color: var(--bg);
+    font: var(--scriptsize) var(--sf), sans-serif;
+}
+
+.t.t2 {
+    --tsf: unset;
+    display: block;
+    top: var(--vhead);
+}
+
+.t::after {
+    position: absolute;
+    bottom: 100%;
+    left: 47.5%;
+    border-style: solid;
+    border-color: transparent transparent var(--fg) transparent;
+    content: '';
+}
+
+button:focus > .t,
+.icon:hover + .t,
+a:hover .t,
+a:focus .t,
+summary:hover > .t,
+summary:focus > .t {
+    visibility: visible;
+}
+
+.loading:after {
+    --anm: ellipsis steps(4,end) 2s infinite;
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: bottom;
+    content: '';
+}
+
+.letterine > i {
+    font-style: normal;
+}
+
+.hide {
+    display: none !important;
+}
+
+ul.inline::before,
+ul.delimiter::after,
+ul.delimiter li:first-child:before,
+ul.delimiter li:nth-last-child(2)::after {
+    content: '\a0';
+}
+
+#page .date-has-label > .doc-publish-date::after,
+ul.delimiter li:after {
+    content: ',\a0';
+}
+
+ul.delimiter li:last-child:before {
+    content: '&\a0';
+}
+
+#page .doc-lastmod-date::after,
+#keywords .inline li::after,
+ul.delimiter li:last-child:after {
+    content: '.';
+}

assets/css/typesetting/sectioning.css

@@ -0,0 +1,118 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    line-height: calc(var(--baselineStretch) * 1);
+    font-weight: 400;
+    clear: both;
+}
+
+h2,
+h3,
+h4 {
+    margin: var(--bigskip) 0 var(--smallskip);
+    font-style: italic;
+}
+
+h1 {
+    margin: var(--bigskip) 0 var(--smallskip);
+    text-transform: capitalize;
+    font-size: var(--huge);
+    counter-reset: section;
+}
+
+article > section {
+    counter-reset: section;
+}
+
+h2 {
+    font-size: var(--LARGE);
+    counter-reset: subsection;
+}
+
+h3 {
+    font-size: var(--Large);
+    counter-reset: subsubsection;
+}
+
+h4 {
+    font-size: var(--large);
+    counter-reset: paragraph;
+}
+
+h5 {
+    counter-reset: subparagraph;
+    margin: var(--smallskip) 0 0;
+}
+
+h5,
+h6 {
+    word-spacing: 16%;
+    letter-spacing: 0.16em;
+    font: var(--normalsize) var(--sf), sans-serif;
+    -webkit-font-feature-settings: 'c2sc' 1;
+       -moz-font-feature-settings: 'c2sc' 1;
+            font-feature-settings: 'c2sc' 1;
+    font-variant-caps: all-small-caps;
+}
+
+h6 {
+    float: left;
+    margin: 0.2em 0.2em 0 0;
+}
+
+/* section labeling */
+
+/* h1::before {
+    counter-increment: chapter;
+}
+
+h2::before {
+    counter-increment: section;
+}
+
+h3::before {
+    counter-increment: subsection;
+}
+
+h4::before {
+    counter-increment: subsubsection;
+}
+
+h5::before {
+    counter-increment: paragraph;
+}
+
+h6::before {
+    counter-increment: subparagraph;
+}
+
+#content.secnum {
+    counter-reset: chapter;
+}
+
+#content.secnum h1::before {
+    content: counter(chapter);
+}
+
+#content.secnum h2::before {
+    content: counter(section) '. ';
+}
+
+#content.secnum h3::before {
+    content: counter(subsection)'. ';
+}
+
+#content.secnum h4::before {
+    content: counter(subsubsection)'. ';
+}
+
+#content.secnum h5::before {
+    content: counter(paragraph);
+}
+
+#content.secnum h6::before {
+    content: counter(subparagraph);
+} */

assets/css/typesetting/verbatim.css

@@ -0,0 +1,307 @@
+body.deuteranopia {
+    --y6a: #d17991; --w8u: #3e8620; --s8i: #ff727b; --n8e: #6f7eb5;
+    --m4i: #265245; --y4i: #d61906; --f8a: #8671b2; --s4n: #008ae7;
+    --d3u: #6d4835; --r6a: #4d4a17; --y4a: #0b3460; --k8i: #fe8500;
+    --y6i: #0070a0; --o5a: #bf2d37; --c3u: #635169; --s5o: #2d5a7b;
+    --s5e: #61317b; --y7i: #00b0fb; --i3i: #ff1202; --t9u: #014c2d;
+}
+
+body.protanopia {
+    --y6a: #b095c0; --w8u: #616f00; --s8i: #eeb0df; --n8e: #6d78ae;
+    --m4i: #35432c; --y4i: #9a596f; --f8a: #7777bd; --s4n: #024b82;
+    --d3u: #645649; --r6a: #524c18; --y4a: #122448; --k8i: #efb440;
+    --y6i: #013c4c; --o5a: #8d5d85; --c3u: #5a5774; --s5o: #364a63;
+    --s5e: #494093; --y7i: #086078; --i3i: #e87aab; --t9u: #012500;
+}
+
+body.tritanopia {
+    --y6a: #b98a9c; --w8u: #235e1a; --s8i: #e58795; --n8e: #958fb3;
+    --m4i: #304a3f; --y4i: #7e2521; --f8a: #a288b5; --s4n: #5196cd;
+    --d3u: #54463b; --r6a: #303b19; --y4a: #343d5a; --k8i: #83630c;
+    --y6i: #30728c; --o5a: #873d4a; --c3u: #695b6c; --s5o: #506175;
+    --s5e: #764e82; --y7i: #4bb0dc; --i3i: #c02a2b; --t9u: #00361e;
+}
+
+body.monochrome {
+    --y6a: var(--fg); --w8u: var(--fg); --s8i: var(--fg); --n8e: var(--fg);
+    --m4i: var(--fg); --y4i: var(--fg); --f8a: var(--fg); --s4n: var(--fg);
+    --d3u: var(--fg); --r6a: var(--fg); --y4a: var(--fg); --k8i: var(--fg);
+    --y6i: var(--fg); --o5a: var(--fg); --c3u: var(--fg); --s5o: var(--fg);
+    --s5e: var(--fg); --y7i: var(--fg); --i3i: var(--fg); --t9u: var(--fg);
+}
+
+@media (prefers-contrast: less) {
+    body.monochrome {
+        --y6a: #8f8f8f; --w8u: #6f6f6f; --s8i: #9c9c9c; --n8e: #808080;
+        --m4i: #474747; --y4i: #3e3e3e; --f8a: #7c7c7c; --s4n: #686868;
+        --d3u: #515151; --r6a: #484848; --y4a: #2f2f2f; --k8i: #989898;
+        --y6i: #535353; --o5a: #4e4e4e; --c3u: #575757; --s5o: #535353;
+        --s5e: #414141; --y7i: #818181; --i3i: #565656; --t9u: #313131;
+    }
+}
+
+.lntable {
+    display: block;
+}
+
+.highlight > pre:not(.chroma) {
+    background: unset !important;
+    color: inherit !important;
+}
+
+.highlight > pre.chroma {
+    margin-left: 2rem;
+}
+
+pre > code {
+    padding: 1ex 0;
+    /* background: var(--g18s); */
+}
+
+.lntd > .chroma{
+    margin: 0;
+}
+
+.lntd:first-child * {
+    background: unset !important;
+}
+
+.lntd:first-child .hl {
+    font-weight: bold;
+}
+
+.hljs-ln-numbers,
+.lntd:first-child pre > code,
+.chroma .lnt {/* LineNumbersTable */
+    min-width: 2rem;
+    max-width: 2rem;
+    overflow: hidden;
+    vertical-align: top;
+    color: var(--n8e);
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    -webkit-touch-callout: none;
+}
+
+.chroma .lntd { /* LineTableTD */
+    vertical-align: top;
+}
+
+.chroma .lntable {/* LineTable */
+    border: unset;
+    border-spacing: 0;
+}
+
+.chroma .hl { /* LineHighlight */
+    display: block;
+    background: var(--g18s);
+    width: auto;
+}
+
+.chroma .c, /* Comment */
+.chroma .ch, /* CommentHashbang */
+.chroma .cm, /* CommentMultiline */
+.chroma .c1, /* CommentSingle */
+.chroma .cs, /* CommentSpecial */
+.chroma .cp, /* CommentPreproc */
+.chroma .cpf, /* CommentPreprocFile */
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.chroma .m, /* LiteralNumber */
+.chroma .mb, /* LiteralNumberBin */
+.chroma .mf, /* LiteralNumberFloat */
+.chroma .mh, /* LiteralNumberHex */
+.chroma .mi, /* LiteralNumberInteger */
+.chroma .il, /* LiteralNumberIntegerLong */
+.chroma .mo, /* LiteralNumberOct */
+.chroma .kc, /* KeywordConstant */
+.chroma .kt, /* KeywordType */
+.chroma .nt, /* NameTag */
+.hljs-strong {
+    /* font-weight: bold; */
+}
+
+.chroma .x, /* Other */
+.chroma .err, /* Error */
+.chroma .ln,/* LineNumbers */
+.chroma .o, /* Operator */
+.chroma .p, /* Punctuation */
+.chroma .w { /* TextWhitespace */
+}
+
+.chroma .kn {/* KeywordNamespace */
+    color: var(--y4i);
+    font-weight: bold;
+}
+
+.chroma .ow { /* OperatorWord */
+    color: var(--y4a);
+}
+
+.chroma .c, /* Comment */
+.chroma .ch, /* CommentHashbang */
+.chroma .cm, /* CommentMultiline */
+.chroma .c1, /* CommentSingle */
+.chroma .cs, /* CommentSpecial */
+.chroma .cp, /* CommentPreproc */
+.chroma .cpf, /* CommentPreprocFile */
+.hljs-comment,
+.hljs-quote {
+    color: var(--i3i);
+}
+
+.chroma .n, /* Name */
+.chroma .nc, /* NameClass */
+.chroma .nd, /* NameDecorator*/
+.chroma .ne, /* NameException */
+.chroma .fm, /* NameFunctionMagic */
+.chroma .nl, /* NameLabel */
+.chroma .nn, /* NameNamespace */
+.chroma .nx, /* NameOther */
+.chroma .py, /* NameProperty ---*/
+.chroma .nt, /* NameTag */
+.chroma .nv, /* NameVariable */
+.chroma .vc, /* NameVariableClass */
+.chroma .vg, /* NameVariableGlobal */
+.chroma .vi, /* NameVariableInstance */
+.chroma .vm, /* NameVariableMagic */
+.hljs-deletion,
+.hljs-name,
+.hljs-regexp,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-tag,
+.hljs-template-variable,
+.hljs-variable {
+    color: var(--k8i);
+}
+
+.chroma .nb, /* NameBuiltin */
+.chroma .bp, /* NameBuiltinPseudo */
+.chroma .l, /* Literal */
+.chroma .ld, /* LiteralDate */
+.chroma .m, /* LiteralNumber */
+.chroma .mb, /* LiteralNumberBin */
+.chroma .mf, /* LiteralNumberFloat */
+.chroma .mh, /* LiteralNumberHex */
+.chroma .mi, /* LiteralNumberInteger */
+.chroma .il, /* LiteralNumberIntegerLong */
+.chroma .mo, /* LiteralNumberOct */
+.hljs-built_in,
+.hljs-lfg,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-params,
+.hljs-type {
+    color: var(--s8i);
+}
+
+.chroma .na, /* NameAttribute */
+.hljs-attribute {
+    color: var(--y6a);
+}
+
+.chroma .s, /* LiteralString */
+.chroma .sa, /* LiteralStringAffix */
+.chroma .sb, /* LiteralStringBacktick */
+.chroma .sc, /* LiteralStringChar */
+.chroma .dl, /* LiteralStringDelimiter */
+.chroma .sd, /* LiteralStringDoc */
+.chroma .s2, /* LiteralStringDouble */
+.chroma .se, /* LiteralStringEscape */
+.chroma .sh, /* LiteralStringHeredoc */
+.chroma .si, /* LiteralStringInterpol */
+.chroma .sx, /* LiteralStringOther */
+.chroma .sr, /* LiteralStringRegex */
+.chroma .s1, /* LiteralStringSingle */
+.chroma .ss, /* LiteralStringSymbol */
+.hljs-addition,
+.hljs-bullet,
+.hljs-string,
+.hljs-symbol {
+    color: var(--y7i);
+}
+
+.chroma .no, /* NameConstant */
+.chroma .nf, /* NameFunction */
+.chroma .ni, /* NameEntity */
+.chroma .g, /* Generic */
+.chroma .gd, /* GenericDeleted */
+.chroma .ge, /* GenericEmph */
+.chroma .gr, /* GenericError */
+.chroma .gh, /* GenericHeading */
+.chroma .gi, /* GenericInserted */
+.chroma .go, /* GenericOutput */
+.chroma .gp, /* GenericPrompt */
+.chroma .gs, /* GenericStrong */
+.chroma .gu, /* GenericSubheading */
+.chroma .gt, /* GenericTraceback */
+.chroma .gl, /* GenericUnderline */
+.hljs-section,
+.hljs-title {
+    color: var(--w8u);
+}
+
+.chroma .k, /* Keyword */
+.chroma .kc, /* KeywordConstant */
+.chroma .kt, /* KeywordType */
+.chroma .kd, /* KeywordDeclaration */
+.chroma .kp, /* KeywordPseudo */
+.chroma .kr, /* KeywordReserved */
+.hljs-keyword,
+.hljs-selector-tag {
+    color: var(--s4n);
+}
+
+@media screen and (-ms-high-contrast: active),
+screen and (prefers-contrast: more) {
+    :root {
+        --y6a: var(--fg);
+        --w8u: var(--fg);
+        --s8i: var(--fg);
+        --n8e: var(--fg);
+        --m4i: var(--fg);
+        --y4i: var(--fg);
+        --f8a: var(--fg);
+        --s4n: var(--fg);
+        --d3u: var(--fg);
+        --r6a: var(--fg);
+        --y4a: var(--fg);
+        --k8i: var(--fg);
+        --y6i: var(--fg);
+        --o5a: var(--fg);
+        --c3u: var(--fg);
+        --s5o: var(--fg);
+        --s5e: var(--fg);
+        --y7i: var(--fg);
+        --i3i: var(--fg);
+        --t9u: var(--fg);
+    }
+
+    .hljs *,
+    .chroma * {
+        background: var(--bg) !important;
+        color: var(--fg) !important;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+        font-weight: 700;
+    }
+
+}
+
+@media print {
+
+    .lntd:first-child * {
+        /* hide line numbering; not coupled when code break into new line */
+        /* display: none; */
+    }
+
+}

assets/js/accessibility.js

@@ -0,0 +1,174 @@
+const bodySty = document.body;
+const htmlSty = document.documentElement.style;
+
+// Enable accessibility settings when JavaScript is permitted
+getElement('a11y').disabled = false;
+
+// Close console
+const closeA11yConsole = () => getElement('has-a11y').removeAttribute('open');
+
+// Color scheme and contrast functions
+const matchMediaColor = () => {
+    lightSwitch.checked = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    if (window.matchMedia('(prefers-contrast: more)').matches) {
+        moreContrast.checked = true;
+    } else if (window.matchMedia('(prefers-contrast: less)').matches) {
+        lessContrast.checked = true;
+    } else {
+        defaultContrast.checked = true;
+    }
+};
+
+function setColor() {
+    const styles = {
+        light: {
+            default: '--off: #000; --fg: var(--fg-light); --mid: var(--midtone); --ac: var(--ac-light); --bg: var(--bg-light);',
+            less: '--off: #000; --fg: var(--fg-light-less); --mid: var(--midtone-less); --ac: var(--ac-light-less); --bg: var(--bg-light-less);',
+            more: '--off: #000; --fg: var(--fg-light-more); --mid: var(--midtone-more); --ac: var(--ac-light-more); --bg: var(--bg-light-more); --border: 1pt solid var(--fg); --bound: var(--border);'
+        },
+        dark: {
+            default: '--off: #fff; --fg: var(--fg-dark); --mid: var(--midtone); --ac: var(--ac-dark); --bg: var(--bg-dark);',
+            less: '--off: #fff; --fg: var(--fg-dark-less); --mid: var(--midtone-less); --ac: var(--ac-dark-less); --bg: var(--bg-dark-less);',
+            more: '--off: #fff; --fg: var(--fg-dark-more); --mid: var(--midtone-more); --ac: var(--ac-dark-more); --bg: var(--bg-dark-more); --border: 1pt solid var(--fg); --bound: var(--border);'
+        }
+    };
+    const scheme = lightSwitch.checked ? 'dark' : 'light';
+    const logomarkDark = getElement('logomark--dark');
+    if (logomarkDark) {
+        const logomark = getElement('logomark');
+        logomark.style.display = lightSwitch.checked ? 'none' : 'inline-block';
+        logomarkDark.style.display = lightSwitch.checked ? 'inline-block' : 'none';
+    }
+    const contrast = lessContrast.checked ? 'less' : (moreContrast.checked ? 'more' : 'default');
+    bodySty.setAttribute('style', styles[scheme][contrast]);
+};
+
+// Flash guard
+addEvent(document, 'DOMContentLoaded', () => {
+    setTimeout(() => htmlSty.setProperty('--flashGuard', '1s ease-in 0.1s'), 99);
+});
+
+// Switch to keyboard-friendly mode
+addEvent(document, 'keydown', (element) => {
+    if (element.key === 'Tab') {
+        document.body.classList.add('keydown');
+    }
+    if (element.key === 'Escape') {
+        document.body.classList.remove('keydown');
+    }
+});
+
+// Color palette functions
+function setColorPalette() {
+    document.body.className = colorPalette.value;
+};
+
+// OpenDyslexic functions
+function useOpenDyslexic() {
+    if (OpenDyslexic.checked) {
+        htmlSty.setProperty('--rm', 'OpenDyslexic');
+        htmlSty.setProperty('--sf', 'OpenDyslexic');
+    } else {
+        htmlSty.removeProperty('--rm');
+        htmlSty.removeProperty('--sf');
+    }
+    recalcLogotypeWidth();
+};
+
+// Font size functions
+function setFontSize() {
+    fontSizeState.value = fontSize.value;
+    htmlSty.setProperty('--fontScale', fontSize.value / 10);
+};
+
+// Baseline stretch functions
+function setStretch() {
+    baselineStretchState.value = baselineStretch.value;
+    htmlSty.setProperty('--baselineStretch', baselineStretch.value);
+};
+
+// Initialize localStorage
+function hasLocalStorage() {
+    try {
+        localStorage.is = 'enable';
+        localStorage.removeItem('is');
+        return true;
+    } catch(e) {
+        defaultContrast.checked = true;
+        getElement('noLocalStorage').className = '';
+        return false;
+    };
+};
+
+if (hasLocalStorage()) {
+    getElement('a11y-menu').className = '';
+    saveButton.disabled = false;
+    resetButton.disabled = false;
+
+    // Reset function
+    function resetA11y() {
+        localStorage.clear();
+        matchMediaColor();
+        colorPalette.reset;
+        fontSize.value = '';
+        baselineStretch.value = '';
+        OpenDyslexic.checked = false;
+        setTimeout(() => window.location.reload(), 100);
+    };
+
+    // Save function
+    function saveA11y() {
+        setTimeout(() => closeA11yConsole(), 618);
+
+        localStorage.scheme = lightSwitch.checked ? 'light' : 'dark';
+
+        if (defaultContrast.checked) localStorage.contrast = 'default';
+        if (lessContrast.checked) localStorage.contrast = 'less';
+        if (moreContrast.checked) localStorage.contrast = 'more';
+
+        localStorage.colorPalette = colorPalette.value;
+        localStorage.font = OpenDyslexic.checked ? 'OpenDyslexic' : '';
+        localStorage.fontSize = fontSize.value;
+        localStorage.stretchSize = baselineStretch.value;
+    };
+
+    // Read settings from localStorage
+
+    if (!localStorage.getItem('scheme') && !localStorage.getItem('contrast')) {
+        matchMediaColor();
+    } else {
+        lightSwitch.checked = localStorage.scheme !== 'dark';
+
+        if (localStorage.contrast === 'more') {
+            moreContrast.checked = true;
+        } else if (localStorage.contrast === 'less') {
+            lessContrast.checked = true;
+        } else {
+            defaultContrast.checked = true;
+        }
+
+        setColor();
+    }
+
+    if (localStorage.getItem('colorPalette')) {
+        colorPalette.value = localStorage.colorPalette;
+        setColorPalette();
+    }
+
+    if (localStorage.font === 'OpenDyslexic') {
+        OpenDyslexic.setAttribute('checked', 'checked');
+        useOpenDyslexic();
+    }
+
+    if (localStorage.getItem('fontSize')) {
+        fontSize.value = localStorage.fontSize;
+        setFontSize();
+    }
+
+    if (localStorage.getItem('stretchSize')) {
+        baselineStretch.value = localStorage.stretchSize;
+        setStretch();
+    }
+
+}

assets/js/bionread.js

@@ -0,0 +1,58 @@
+// make sure the switch unchecked on reload
+getElement('useBionRead').className = '';
+bionReadSwitch.checked = false;
+// define the function
+function bionRead() {
+    // define capture and restore environment variable
+    const bionReadMainContent = getElement('content');
+    const bionReadSnapshot = getElement('bionReadSnapshot');
+
+    if (!bionReadMainContent || !bionReadSnapshot) {
+        console.error('Required elements not found');
+        return;
+    }
+
+    // switch conditioning
+    if (bionReadSwitch.checked) {
+        // capture snapshot
+        bionReadSnapshot.innerHTML = bionReadMainContent.innerHTML;
+
+        // split words into 'anchored' and 'floated' part
+        const safeElements = getElements('[data-bionRead-safe]');
+        safeElements.forEach(element => {
+            const targetElements = element.querySelectorAll('h1, h2, h3, h4, h5, p, a, li, blockquote');
+            targetElements.forEach(el => {
+                const words = el.innerText.split(' ');
+                const processedWords = words.map(word => {
+                    const length = word.length;
+                    if (length === 1) return `<b class=k>${word}</b>`;
+                    const midPoint = Math.ceil(length / 2);
+                    return word
+                        .split('')
+                        .map((char, index) => index < midPoint ? `<b k>${char}</b>` : char)
+                        .join('');
+                });
+                el.innerHTML = processedWords.join(' ');
+            });
+        });
+
+        // make 'floated' text slices less contrast
+        htmlSty.setProperty('--fg', lightSwitch.checked ? '#333' : '#ccc');
+
+        // make 'anchored' text slices a bit weighted
+        htmlSty.setProperty('--bion', '0.028em');
+    } else {
+        // restore snapshot
+        bionReadMainContent.innerHTML = bionReadSnapshot.innerHTML;
+
+        // purge snapshot
+        bionReadSnapshot.innerHTML = '';
+
+        // restore style
+        htmlSty.removeProperty('--fg');
+        htmlSty.removeProperty('--bion');
+
+        // reset color settings
+        setColor();
+    }
+}

assets/js/default.js

@@ -0,0 +1,178 @@
+// Event listener helper function
+function addEvent(element, event, handler) {
+    if (element?.attachEvent) {
+        return element.attachEvent('on' + event, handler);
+    }
+    return element?.addEventListener(event, handler, false);
+}
+
+// DOM element getters
+const getElement = id => document.getElementById(id);
+const getElements = selector => document.querySelectorAll(selector);
+
+// Logotype width calculation
+function recalcLogotypeWidth() {
+    const logotype = getElement('logotype');
+    const logotypeText = getElement('logotype__text');
+    logotype?.setAttribute('width', `${logotypeText.getBoundingClientRect().width}px`);
+}
+
+// Viewport adaptation
+function adaptViewport() {
+    // fix logotype when font loading delayed
+    document.fonts.ready.then(() => {
+        recalcLogotypeWidth();
+    });
+    if (window.innerWidth < 640) {
+        getElement('has-search')?.setAttribute('open', 'open');
+        getElement('has-search')?.removeAttribute('name');
+        getElement('has-more-menu')?.setAttribute('open', 'open');
+    } else {
+        getElement('top-nav')?.setAttribute('open', 'open')
+        addEvent(visualViewport, 'resize', adaptViewport);
+    }
+}
+addEvent(window, 'DOMContentLoaded', adaptViewport);
+
+
+// Node collapse handlers
+const collapseParentNode = getElements('.js-cpn');
+const collapseGrandParentNode = getElements('.js-cgpn');
+const detailsElements = getElements('details.js-details');
+
+collapseParentNode.forEach(element => {
+    const handler = () => element.parentNode?.removeAttribute('open');
+    addEvent(element, 'click', handler);
+});
+
+collapseGrandParentNode.forEach(element => {
+    const handler = () => element.parentNode?.parentNode?.removeAttribute('open');
+    addEvent(element, 'click', handler);
+});
+
+if (window.innerWidth > 640) {
+    // Details element handler for firefox based browsers which do not respect the same name attribute
+    detailsElements.forEach(detail => {
+        const handler = (e) => {
+            const name = detail.getAttribute('name');
+            if (name) {
+                getElements(`details.js-details[name="${name}"]`).forEach(otherDetail => {
+                    if (otherDetail !== detail && otherDetail.hasAttribute('open')) {
+                        otherDetail.removeAttribute('open');
+                    }
+                });
+            }
+        };
+        addEvent(detail, 'click', handler);
+    });
+}
+
+// Share functionality
+if (typeof navigatorShare !== 'undefined') {
+    getElement('navigatorShare')?.setAttribute(
+        'href',
+        'javascript:navigator.share({title: document.title, url: window.location.href})'
+    );
+
+    if (location.protocol === 'https:') {
+        getElement('copyPermalink')?.removeAttribute('class');
+    }
+}
+
+getElement('print-button')?.removeAttribute('class');
+getElement('back')?.removeAttribute('class');
+
+// Date handling
+const date = new Date();
+
+// Mastodon and QR code functionality
+if (typeof mastodonInstance !== 'undefined') {
+    getElement('has-mastodon').className = 'active';
+
+    const mastodonHandler = () => {
+        mastodonTitle.disabled = true;
+        mastodonPermalink.disabled = true;
+        mastodonText.disabled = false;
+        mastodon?.setAttribute('action', `${mastodonInstance.value}/share`);
+    };
+
+    addEvent(mastodonInstance, 'input', mastodonHandler);
+
+    if (typeof QRCode !== 'undefined') {
+        getElement('colophon').removeAttribute('style');
+
+        qr?.appendChild(
+            QRCode({
+                msg: window.location.href,
+                ecl: 'M',
+                pal: ['#000', '#fff'],
+                pad: 2,
+                dim: 96,
+            })
+        );
+
+        const isoTime = date.toISOString();
+        const timeStamp = getElement('time-stamp');
+              timeStamp.innerHTML = isoTime;
+              timeStamp?.setAttribute('datetime', isoTime);
+    }
+}
+
+// Digital well-being clock
+const hour = date.getHours();
+const isDaytime = hour > 6 && hour < 21;
+
+function toggleNightElements(hidden) {
+    const elements = ['grain', 'dwclock'];
+    elements.forEach(id => {
+        const element = getElement(id);
+        element?.[hidden ? 'setAttribute' : 'removeAttribute']('hidden', 'hidden');
+    });
+}
+
+if (isDaytime) {
+    toggleNightElements(true);
+} else {
+    toggleNightElements(false);
+
+    let clockInterval;
+    function updateClock() {
+        const minutes = date.getMinutes();
+        const seconds = date.getSeconds();
+        const minutesDegrees = ((minutes / 60) * 360) + ((seconds/60)*6);
+        const hourDegrees = ((hour / 12) * 360) + ((minutes/60)*30);
+
+        const transforms = ['transform', 'webkitTransform', 'mozTransform', 'msTransform', 'oTransform'];
+        const hands = {
+            '#min': minutesDegrees,
+            '#hour': hourDegrees
+        };
+
+        Object.entries(hands).forEach(([selector, degrees]) => {
+            const hand = document.querySelector(selector);
+            transforms.forEach(transform => {
+                hand.style[transform] = `rotate(${degrees}deg)`;
+            });
+        });
+    }
+
+    updateClock();
+    clockInterval = setInterval(updateClock, 10000);
+}
+
+// Overwrite browser search bar (canceled)
+// addEvent(document, 'keydown', function(e) {
+//     if (e.ctrlKey && e.key === 'k') {
+//         e.preventDefault();
+//         getElement('has-search')?.setAttribute('open', 'open');
+//         const searchInput = document.querySelector('.pagefind-ui__search-input');
+//         searchInput?.focus();
+//     }
+// });
+
+// clashes with details handler, need workaround
+addEvent(window, 'beforeprint', function() {
+    getElements('[name="redaction-history"]')?.forEach(e => {
+        e.setAttribute('open', 'open');
+    });
+});

assets/js/fediverse.js

@@ -0,0 +1,186 @@
+const id = getElement('metadata-post').innerText;
+
+if (id) {
+    const host = getElement('metadata-instance').innerText;
+    const i18nreplies = getElement('i18n--is-replies').innerHTML;
+    const i18nreblogs = getElement('i18n--is-reblogs').innerHTML;
+    const i18nfavourites = getElement('i18n--is-favourites').innerHTML;
+    const style = document.createElement('style');
+    style.textContent = `
+        #comments > * {width: var(--golden-ratio)}
+        #comments noscript {margin: var(--medskip) 0}
+        #discussion-starter {margin-bottom: var(--medskip)}
+        #discussion-starter > footer {display: flex; align-items: center; justify-content: space-between}
+        .mastodon-comment {margin: 1rem 0 1rem calc(var(--mul) * var(--indent)); border: 1pt solid #fff4; border-left: 2pt solid var(--ac); background: #80808008; padding: 1rem 1rem 1ex; box-shadow: 0 .5pt 1pt 0 var(--g18s); overflow: auto}
+        .mastodon-comment .content {margin-left: 4rem; line-height: calc(var(--baselineStretch) * 1.272)}
+        .mastodon-comment .par a {max-width: 100%; vertical-align: bottom; white-space: break-spaces}
+        .mastodon-comment .attachments * {width: 100%; height: auto}
+        .mastodon-comment > footer {margin-top: 1rem; margin-left: 3.5rem}
+        .mastodon-comment > footer .stat {display: inline-flex; flex-shrink: 0; gap: 5pt}
+        .stat a {display: inline-flex; align-items: center; padding: 2pt; color: var(--mid); gap: 2pt}
+        .stat a::before {vertical-align: text-top}
+        a.replies.active, a.reblogs.active {color: var(--ac)}
+        a.favourites.active {color: var(--i3i)}
+        .mastodon-comment .date {margin-left: auto; padding-left: 1rem; color: var(--mid); font-size: calc(10pt * var(--fontScale))}
+        @media only screen and (max-width: 960px) {
+            .mastodon-comment .content, .mastodon-comment > footer {margin-left: 0}
+        }
+    `;
+    document.head.appendChild(style);
+
+    function escapeHtml(unsafe) {
+        return unsafe
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+    }
+
+    let commentsLoaded = false;
+
+    const toot_active = (toot, what) => {
+        const count = toot[`${what}_count`];
+        return count > 0 ? 'active' : '';
+    };
+
+    const toot_count = (toot, what) => {
+        const count = toot[`${what}_count`];
+        return count > 0 ? count : '';
+    };
+
+    const user_account = (account) => {
+        let result = `@${account.acct}`;
+        if (!account.acct.includes('@')) {
+            const domain = new URL(account.url);
+            result += `@${domain.hostname}`;
+        }
+        return result;
+    };
+
+    const render_toots = (toots, in_reply_to, depth) => {
+        const tootsToRender = toots
+            .filter(toot => toot.in_reply_to_id === in_reply_to)
+            .sort((a, b) => a.created_at.localeCompare(b.created_at));
+        tootsToRender.forEach(toot => render_toot(toots, toot, depth));
+    };
+
+    const render_toot = (toots, toot, depth) => {
+        toot.account.display_name = escapeHtml(toot.account.display_name);
+        toot.account.emojis.forEach(emoji => {
+            toot.account.display_name = toot.account.display_name.replace(
+                `:${emoji.shortcode}:`,
+                `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`
+            );
+        });
+
+        const renderAttachment = attachment => {
+            const attachmentTypes = {
+                image: () => `<a href="${attachment.url}" rel="nofollow"><img src="${attachment.preview_url}" alt="${attachment.description}" loading="lazy" /></a>`,
+                video: () => `<video controls><source src="${attachment.url}" type="${attachment.mime_type}"></video>`,
+                gifv: () => `<video autoplay loop muted playsinline><source src="${attachment.url}" type="${attachment.mime_type}"></video>`,
+                audio: () => `<audio controls><source src="${attachment.url}" type="${attachment.mime_type}"></audio>`,
+                default: () => `<a href="${attachment.url}" rel="nofollow">${attachment.type}</a>`
+            };
+
+            return (attachmentTypes[attachment.type] || attachmentTypes.default)();
+        };
+
+        const mastodonComment = `
+            <article class="mastodon-comment" style="--mul: ${depth}">
+                <header class="author">
+                    <img src="${escapeHtml(toot.account.avatar_static)}" height=48 width=48 alt="${user_account(toot.account)}" loading="lazy"/>
+                    <a class="has-aria-label" href="${toot.account.url}" rel="nofollow" title="${toot.account.display_name}" aria-label="${user_account(toot.account)}">
+                        <span>${toot.account.display_name}</span>
+                    </a>
+                </header>
+                <div class="content">
+                    <div class="par" data-bionRead-safe>${toot.content}</div>
+                    <div class="attachments">
+                        ${toot.media_attachments.map(renderAttachment).join('')}
+                    </div>
+                </div>
+                <footer>
+                    <div class="stat">
+                        <a class="replies ${toot_active(toot, 'replies')}" href="${toot.url}" rel="nofollow" aria-label="${i18nreplies}">
+                            ${toot_count(toot, 'replies')}
+                        </a>
+                        <a class="reblogs ${toot_active(toot, 'reblogs')}" href="${toot.url}" rel="nofollow" aria-label="${i18nreblogs}">
+                            ${toot_count(toot, 'reblogs')}
+                        </a>
+                        <a class="favourites ${toot_active(toot, 'favourites')}" href="${toot.url}" rel="nofollow" aria-label="${i18nfavourites}">
+                            ${toot_count(toot, 'favourites')}
+                        </a>
+                    </div>
+                    <a class="date" href="${toot.url}" rel="nofollow">
+                        <time>${toot.created_at.substr(0, 10)} ${toot.created_at.substr(11, 8)}</time>
+                    </a>
+                </footer>
+            </article>`;
+
+        getElement('mastodon-comments-list')
+            .appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
+
+        render_toots(toots, toot.id, depth + 1);
+    };
+
+    const toot_stats = toot => `
+        <a class="replies ${toot_active(toot, 'replies')}" href="${toot.url}" rel="nofollow" aria-label="${i18nreplies}">
+            ${toot_count(toot, 'replies')}
+        </a>
+        <a class="reblogs ${toot_active(toot, 'reblogs')}" href="${toot.url}" rel="nofollow" aria-label="${i18nreblogs}">
+            ${toot_count(toot, 'reblogs')}
+        </a>
+        <a class="favourites ${toot_active(toot, 'favourites')}" href="${toot.url}" rel="nofollow" aria-label="${i18nfavourites}">
+            ${toot_count(toot, 'favourites')}
+        </a>`;
+
+    const loadComments = async () => {
+        if (commentsLoaded) return;
+
+        const commentsList = getElement('mastodon-comments-list');
+        commentsList.innerHTML = getElement('i18n--is-loading').innerHTML;
+
+        try {
+            const [tootResponse, contextResponse] = await Promise.all([
+                fetch(`https://${host}/api/v1/statuses/${id}`),
+                fetch(`https://${host}/api/v1/statuses/${id}/context`)
+            ]);
+
+            const [toot, data] = await Promise.all([
+                tootResponse.json(),
+                contextResponse.json()
+            ]);
+
+            getElement("mastodon-stats").innerHTML = toot_stats(toot);
+
+            if (data.descendants?.length > 0) {
+                commentsList.innerHTML = "";
+                render_toots(data.descendants, id, 0);
+            } else {
+                commentsList.innerHTML = getElement('i18n--no-comment').innerHTML;
+            }
+
+            commentsLoaded = true;
+            commentsList.setAttribute('aria-busy', 'false');
+        } catch (error) {
+            console.error('Error loading comments:', error);
+            commentsList.innerHTML = 'Error loading comments';
+        }
+    };
+
+    const respondToVisibility = (element, callback) => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.intersectionRatio > 0) {
+                    callback();
+                }
+            });
+        }, { root: null });
+
+        observer.observe(element);
+    };
+
+    const comments = getElement("mastodon-comments-list");
+    respondToVisibility(comments, loadComments);
+}