/* =============================================================
   Lloyd's Wunderkammer - the room around everything under CURIOSA
   (October 6, 2026). LLOYDOS is the computer; this is the cabinet of
   curiosities next door, around 1650, by candlelight. Every rule is
   scoped to html.wk, so the rest of the site never notices this file.
   The text stays on light paper; the dark is only around it.
   Edit this file directly. The ornaments (hedera, fleuron, key) are
   inline SVG data URIs; the hedera and fleuron are glyph outlines from
   DejaVu Sans. Pictures and their sources: ../CREDITS.txt.

   Sections: 0 fonts, 1 tokens, 2 the room, 3 reset of the LLOYDOS
   element styles, 4 header, 5 menu, 6 mobile menu, 7 breadcrumb,
   8 leaves (pages), 9 plates and the lightbox, 10 notes, tables,
   questions, 11 finis and colophon, 12 footer, 13 terminal key,
   14 Scriptorium, 15 secrets, 16 view transitions, 17 responsive,
   18 reduced motion, 19 print
   ============================================================= */

/* ---- 0. fonts (SIL OFL, see /wunderkammer/fonts/FONTS-LICENSE.txt) */
@font-face { font-family: 'WK Fell'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/im-fell-english-400.woff2') format('woff2'); }
@font-face { font-family: 'WK Fell SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/im-fell-english-sc.woff2') format('woff2'); }
@font-face { font-family: 'WK Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/eb-garamond-var.woff2') format('woff2'); }
@font-face { font-family: 'WK Garamond'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/eb-garamond-var-italic.woff2') format('woff2'); }

/* ---- 1. tokens ---------------------------------------------------- */
html.wk {
    --wk-night: #0d0907;
    --wk-ceiling: #100b08;
    --wk-walnut: #2a1a10;
    --wk-ebony: #17100b;
    --wk-velvet: #3b0f14;
    --wk-paper: #efe4cc;
    --wk-paper-old: #d9c7a0;
    --wk-ink: #1d1611;
    --wk-ink-soft: #5a4632;
    --wk-vermilion: #a62b2b;
    --wk-link: #7a2420;
    --wk-brass: #d4b06a;
    --wk-brass-dim: #8a6a33;
    --wk-bone: #e8dcc2;
    --wk-verdigris: #4f7f6f;
    --wk-flame: #ffb35c;
    --wk-fell: 'WK Fell', 'IM Fell English', Georgia, serif;
    --wk-fell-sc: 'WK Fell SC', 'WK Fell', Georgia, serif;
    --wk-text: 'WK Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
    --wk-torn: polygon(0.0% 2.7px, 2.2% 4.5px, 4.3% 4.1px, 6.5% 2.5px, 8.7% 2.0px, 10.9% 2.5px, 13.0% 4.8px, 15.2% 0.5px, 17.4% 2.3px, 19.6% 1.4px, 21.7% 0.7px, 23.9% 3.6px, 26.1% 2.3px, 28.3% 3.7px, 30.4% 3.0px, 32.6% 1.4px, 34.8% 0.6px, 37.0% 3.5px, 39.1% 3.7px, 41.3% 0.4px, 43.5% 3.8px, 45.7% 1.2px, 47.8% 2.2px, 50.0% 0.8px, 52.2% 0.4px, 54.3% 3.4px, 56.5% 2.7px, 58.7% 1.2px, 60.9% 2.1px, 63.0% 2.6px, 65.2% 0.2px, 67.4% 2.0px, 69.6% 2.9px, 71.7% 1.2px, 73.9% 0.1px, 76.1% 1.2px, 78.3% 5.0px, 80.4% 2.6px, 82.6% 0.2px, 84.8% 3.7px, 87.0% 2.1px, 89.1% 3.0px, 91.3% 4.3px, 93.5% 4.7px, 95.7% 1.8px, 97.8% 2.3px, 100.0% 2.4px, calc(100% - 3.0px) 3.3%, calc(100% - 0.6px) 6.7%, calc(100% - 1.0px) 10.0%, calc(100% - 2.3px) 13.3%, calc(100% - 1.8px) 16.7%, calc(100% - 0.3px) 20.0%, calc(100% - 1.5px) 23.3%, calc(100% - 0.9px) 26.7%, calc(100% - 3.0px) 30.0%, calc(100% - 0.3px) 33.3%, calc(100% - 0.4px) 36.7%, calc(100% - 2.4px) 40.0%, calc(100% - 1.4px) 43.3%, calc(100% - 1.7px) 46.7%, calc(100% - 2.1px) 50.0%, calc(100% - 2.9px) 53.3%, calc(100% - 2.6px) 56.7%, calc(100% - 0.4px) 60.0%, calc(100% - 0.7px) 63.3%, calc(100% - 3.4px) 66.7%, calc(100% - 2.8px) 70.0%, calc(100% - 1.6px) 73.3%, calc(100% - 1.9px) 76.7%, calc(100% - 1.3px) 80.0%, calc(100% - 3.4px) 83.3%, calc(100% - 0.2px) 86.7%, calc(100% - 1.1px) 90.0%, calc(100% - 1.1px) 93.3%, calc(100% - 0.9px) 96.7%, 100.0% calc(100% - 0.6px), 97.8% calc(100% - 1.3px), 95.7% calc(100% - 2.6px), 93.5% calc(100% - 5.0px), 91.3% calc(100% - 2.0px), 89.1% calc(100% - 2.1px), 87.0% calc(100% - 3.2px), 84.8% calc(100% - 3.1px), 82.6% calc(100% - 1.2px), 80.4% calc(100% - 3.5px), 78.3% calc(100% - 0.9px), 76.1% calc(100% - 3.9px), 73.9% calc(100% - 3.6px), 71.7% calc(100% - 0.5px), 69.6% calc(100% - 1.5px), 67.4% calc(100% - 4.2px), 65.2% calc(100% - 4.9px), 63.0% calc(100% - 0.5px), 60.9% calc(100% - 1.1px), 58.7% calc(100% - 0.5px), 56.5% calc(100% - 0.5px), 54.3% calc(100% - 3.0px), 52.2% calc(100% - 0.9px), 50.0% calc(100% - 0.1px), 47.8% calc(100% - 2.5px), 45.7% calc(100% - 4.5px), 43.5% calc(100% - 3.3px), 41.3% calc(100% - 5.2px), 39.1% calc(100% - 2.9px), 37.0% calc(100% - 3.1px), 34.8% calc(100% - 2.4px), 32.6% calc(100% - 5.1px), 30.4% calc(100% - 2.3px), 28.3% calc(100% - 5.5px), 26.1% calc(100% - 1.7px), 23.9% calc(100% - 0.8px), 21.7% calc(100% - 1.0px), 19.6% calc(100% - 1.2px), 17.4% calc(100% - 4.5px), 15.2% calc(100% - 0.3px), 13.0% calc(100% - 3.2px), 10.9% calc(100% - 4.3px), 8.7% calc(100% - 1.0px), 6.5% calc(100% - 5.4px), 4.3% calc(100% - 2.4px), 2.2% calc(100% - 5.3px), 0.0% calc(100% - 5.9px), 3.4px 96.7%, 2.8px 93.3%, 3.8px 90.0%, 0.4px 86.7%, 3.9px 83.3%, 2.1px 80.0%, 1.0px 76.7%, 2.3px 73.3%, 1.9px 70.0%, 3.1px 66.7%, 0.1px 63.3%, 3.7px 60.0%, 2.9px 56.7%, 3.2px 53.3%, 3.9px 50.0%, 0.8px 46.7%, 1.4px 43.3%, 1.4px 40.0%, 1.6px 36.7%, 2.6px 33.3%, 0.9px 30.0%, 2.8px 26.7%, 2.7px 23.3%, 0.9px 20.0%, 2.7px 16.7%, 1.3px 13.3%, 2.7px 10.0%, 0.9px 6.7%, 1.1px 3.3%);
    background: var(--wk-night);
    color: var(--wk-bone);
    scrollbar-color: #6b4f25 #120c08;
}

/* ---- 2. the room -------------------------------------------------- */
html.wk body {
    font-family: var(--wk-text);
    color: var(--wk-bone);
    letter-spacing: 0;
    background: transparent;
}
/* the wall, a candle in front of the pages, the dark at the edges.
   Static: no blend modes and no animation on full-screen layers. */
html.wk body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: normal;
    will-change: auto;
    clip-path: none;
    animation: none;
    background:
        radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255, 179, 92, 0.10), rgba(255, 179, 92, 0) 70%),
        url('../img/wall.webp') repeat,
        var(--wk-night);
    background-size: auto, 384px 384px, auto;
}
html.wk body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    animation: none;
    clip-path: none;
    background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}
/* wide screens: Ole Worm's museum (1655) stands in the dark around the pages */
@media (min-width: 1200px) {
    html.wk body::before {
        background:
            radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255, 179, 92, 0.10), rgba(255, 179, 92, 0) 70%),
            url('../img/room.webp') center / cover no-repeat,
            var(--wk-night);
    }
}
html.wk .container {
    max-width: 1120px;
    position: relative;
    z-index: 1;
}
html.wk ::selection { background: rgba(166, 43, 43, 0.28); color: inherit; text-shadow: none; }
html.wk ::-webkit-scrollbar { width: 11px; background: #120c08; }
html.wk ::-webkit-scrollbar-track { background: #120c08; border-left: 1px solid #3a2415; }
html.wk ::-webkit-scrollbar-thumb { background: #6b4f25; border: 2px solid #120c08; }
html.wk * { scrollbar-color: #6b4f25 #120c08; }

/* ---- 3. reset of the LLOYDOS element styles ------------------------ */
html.wk h1, html.wk h2, html.wk h3, html.wk h4 {
    font-family: var(--wk-fell);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: inherit;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
    border: none;
    padding: 0;
    display: block;
}
html.wk h1::before, html.wk h1::after,
html.wk h2::before, html.wk h2::after,
html.wk h3::before, html.wk h3::after { content: none; }
html.wk p, html.wk li { color: inherit; text-shadow: none; }
html.wk strong, html.wk b { color: inherit; text-shadow: none; font-weight: 600; }
html.wk small { color: inherit; }
html.wk ul li::marker { content: normal; color: var(--wk-vermilion); }
html.wk img { filter: none; }
html.wk a {
    color: inherit;
    font-weight: inherit;
    border-bottom: none;
    text-shadow: none;
    background: none;
    transition: color 0.2s, text-decoration-color 0.2s;
}
html.wk a:hover, html.wk a:focus { background: none; text-shadow: none; border-bottom: none; }
html.wk a:focus-visible, html.wk button:focus-visible { outline: 2px solid var(--wk-brass); outline-offset: 3px; }
html.wk main > section { animation: none; }
html.wk section {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
html.wk .skip-to-content:focus {
    background: var(--wk-ebony);
    color: var(--wk-brass);
    border: 1px solid var(--wk-brass);
    text-shadow: none;
    font-family: var(--wk-fell-sc);
}
html.wk main { margin-top: 0.4rem; }

/* ---- 4. header ------------------------------------------------------ */
html.wk header[role="banner"] {
    margin: 0 0 1.3rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    min-height: 0;
}
html.wk .header-divider { display: none; }

html.wk .wk-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 42px;
    padding: 0 14px;
    background:
        url('../img/wood.webp') center / 512px 128px repeat,
        var(--wk-walnut);
    border-bottom: 1px solid var(--wk-brass-dim);
    box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.08), inset 0 -10px 18px rgba(0, 0, 0, 0.35);
}
html.wk .wk-rail-home {
    font-family: var(--wk-fell-sc);
    font-size: 1rem;
    letter-spacing: 0.12em;
    color: var(--wk-brass);
    text-decoration: none;
    padding: 0.35rem 0;
}
html.wk .wk-rail-home:hover, html.wk .wk-rail-home:focus-visible { color: #f3dc9c; }
html.wk .wk-key {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    padding: 0.2rem 0.75rem;
    background: linear-gradient(#21140c, #160e08);
    border: 1px solid var(--wk-brass-dim);
    border-radius: 2px;
    color: var(--wk-brass);
    font-family: var(--wk-fell-sc);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.14), 0 1px 2px rgba(0, 0, 0, 0.6);
}
html.wk .wk-key:hover { color: #f3dc9c; box-shadow: inset 0 0 12px rgba(255, 179, 92, 0.2), 0 1px 2px rgba(0, 0, 0, 0.6); }
html.wk .wk-key-icon {
    width: 26px;
    height: 11px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cg fill='none' stroke='%23d4b06a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='8' r='5'/%3E%3Cpath d='M12 8h26M31 8v5M36 8v4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

html.wk .wk-hero {
    position: relative;
    text-align: center;
    padding: clamp(88px, 13.5vw, 150px) 16px 22px;
    background: var(--wk-ceiling) url('../img/ceiling.webp') top center / 100% auto no-repeat;
    overflow: hidden;
}
/* the candle in front of the title: one small element, breathing slowly */
html.wk .wk-hero::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -40px;
    width: min(620px, 90%);
    height: 150px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 60%, rgba(255, 179, 92, 0.20), rgba(255, 179, 92, 0) 70%);
    pointer-events: none;
    animation: wk-breathe 7s ease-in-out infinite;
}
html.wk .wk-hero > * { position: relative; }
html.wk .wk-title {
    margin: 0;
    font-family: var(--wk-fell);
    font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem);
    line-height: 1.05;
    color: #e7c983;
    letter-spacing: 0.01em;
    text-shadow: 0 0 22px rgba(255, 179, 92, 0.28), 0 2px 0 rgba(0, 0, 0, 0.85);
}
html.wk .wk-tagline {
    margin: 0.45rem 0 0;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 1.08rem;
    color: #b39a6e;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
@keyframes wk-breathe {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* ---- 5. menu: brass name plates on a wooden rail ------------------- */
html.wk nav[role="navigation"] {
    background:
        url('../img/wood.webp') center / 512px 128px repeat,
        #241509;
    border-top: 1px solid var(--wk-brass-dim);
    border-bottom: 1px solid var(--wk-brass-dim);
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.55);
    min-height: 0;
}
html.wk .nav-links { padding: 0.75rem 0.6rem; gap: 0.55rem; }
html.wk .nav-links > li > a {
    clip-path: none;
    font-family: var(--wk-fell-sc);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--wk-brass);
    padding: 0.36rem 1.15rem 0.3rem;
    border: 1px solid #7a5a2b;
    border-radius: 1px;
    text-shadow: none;
    background:
        radial-gradient(circle at 6px 50%, #c9a65a 0 1.3px, rgba(0, 0, 0, 0) 1.9px),
        radial-gradient(circle at calc(100% - 6px) 50%, #c9a65a 0 1.3px, rgba(0, 0, 0, 0) 1.9px),
        linear-gradient(#21140c, #160e08);
    box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.14), 0 1px 2px rgba(0, 0, 0, 0.6);
}
html.wk .wk-num { color: #a88446; margin-right: 0.3em; font-size: 0.86em; }
html.wk .nav-links > li > a:hover,
html.wk .nav-links > li > a:focus {
    color: #f3dc9c;
    background:
        radial-gradient(circle at 6px 50%, #e2c27a 0 1.3px, rgba(0, 0, 0, 0) 1.9px),
        radial-gradient(circle at calc(100% - 6px) 50%, #e2c27a 0 1.3px, rgba(0, 0, 0, 0) 1.9px),
        radial-gradient(ellipse at 50% 120%, rgba(255, 179, 92, 0.28), rgba(255, 179, 92, 0) 70%),
        linear-gradient(#2a190e, #1a110a);
    box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.2), 0 0 14px rgba(255, 179, 92, 0.18);
    outline: none;
}
html.wk .nav-links > li > a:focus-visible { outline: 2px solid var(--wk-brass); outline-offset: 2px; }
html.wk .nav-links > li > a[aria-current="page"] {
    color: #2a1a10;
    border-color: #f0d89a;
    background:
        radial-gradient(circle at 6px 50%, #6b4f25 0 1.3px, rgba(0, 0, 0, 0) 1.9px),
        radial-gradient(circle at calc(100% - 6px) 50%, #6b4f25 0 1.3px, rgba(0, 0, 0, 0) 1.9px),
        linear-gradient(#ecd08b, #b98f45);
    box-shadow: 0 0 16px rgba(255, 179, 92, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.wk .nav-links > li > a[aria-current="page"] .wk-num { color: #5a3a14; }
/* the arrow is a small chevron; header.js rotates the span when a drawer opens */
html.wk .dropdown-arrow {
    font-size: 0;
    width: 9px;
    height: 9px;
    position: relative;
    top: -3px;
    margin-left: 0.1rem;
}
html.wk .dropdown-arrow::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 0;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
/* a drawer lined with oxblood velvet, the items are paper tags on strings */
html.wk .dropdown-menu {
    clip-path: none;
    min-width: 290px;
    padding: 0.75rem 0.7rem 0.85rem;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 140, 120, 0.10), rgba(0, 0, 0, 0) 60%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 70%),
        var(--wk-velvet);
    border: 1px solid #7a5a2b;
    border-top: 4px solid #4a2e18;
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.7), inset 0 8px 14px rgba(0, 0, 0, 0.55);
}
html.wk .dropdown-menu li { border-bottom: none; margin: 0.32rem 0.15rem; }
html.wk .dropdown-menu a {
    position: relative;
    display: block;
    clip-path: none;
    border: none;
    white-space: normal;
    padding: 0.42rem 0.8rem 0.4rem 1.85rem;
    font-family: var(--wk-text);
    font-size: 1.02rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wk-ink);
    text-shadow: none;
    background: url('../img/paper.webp'), var(--wk-paper);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transform: rotate(var(--tilt, -0.4deg));
    transition: transform 0.15s ease, background-color 0.15s ease;
}
html.wk .dropdown-menu li:nth-child(even) a { --tilt: 0.35deg; }
html.wk .dropdown-menu a::before {
    content: '';
    position: absolute;
    left: 0.7rem;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--wk-velvet);
    box-shadow: inset 0 0 0 1px rgba(29, 22, 17, 0.55);
    color: transparent;
}
html.wk .dropdown-menu a::after {
    content: '';
    position: absolute;
    left: -0.55rem;
    top: 50%;
    width: 1.35rem;
    height: 1px;
    background: #c9b07a;
    transform: rotate(-9deg);
    transform-origin: right center;
}
html.wk .dropdown-menu a:hover,
html.wk .dropdown-menu a:focus {
    background: url('../img/paper.webp'), #f8f1e1;
    color: var(--wk-ink);
    padding-left: 1.85rem;
    transform: rotate(0deg) translateX(2px);
    outline: none;
}
html.wk .dropdown-menu a:focus-visible { outline: 2px solid var(--wk-vermilion); outline-offset: 1px; }
html.wk .dropdown-menu a:hover::before,
html.wk .dropdown-menu a:focus::before { color: transparent; }
html.wk .dropdown-menu a[aria-current="page"]::before {
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    background: radial-gradient(circle at 35% 35%, #d0453b, #8e1a14 70%);
    box-shadow: 0 0 0 1px rgba(80, 10, 10, 0.5);
}

/* ---- 6. mobile menu (phones, max-width 768px) ---------------------- */
@media (max-width: 768px) {
    html.wk .wk-rail { display: none; }
    html.wk .mnav-bar {
        background:
            url('../img/wood.webp') center / 512px 128px repeat,
            var(--wk-walnut);
        border-bottom: 1px solid var(--wk-brass-dim);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
        font-family: var(--wk-fell-sc);
    }
    html.wk .mnav-brand-name {
        font-family: var(--wk-fell-sc);
        font-weight: 400;
        font-size: 1.05rem;
        letter-spacing: 0.1em;
        color: var(--wk-brass);
        text-shadow: none;
    }
    html.wk .mnav-brand-sys {
        font-family: var(--wk-text);
        font-style: italic;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
        color: #b39a6e;
    }
    html.wk .mnav-btn {
        clip-path: none;
        border-radius: 2px;
        background: linear-gradient(#21140c, #160e08);
        border: 1px solid var(--wk-brass-dim);
        color: var(--wk-brass);
        font-family: var(--wk-fell-sc);
        font-size: 0.95rem;
        letter-spacing: 0.08em;
    }
    html.wk .mnav-btn[aria-expanded="true"] {
        background: linear-gradient(#ecd08b, #b98f45);
        border-color: #f0d89a;
        color: #2a1a10;
    }
    html.wk .mnav-icon i { box-shadow: none; height: 1.6px; }
    html.wk .mnav-panel {
        background:
            radial-gradient(ellipse at 50% 0%, rgba(255, 140, 120, 0.10), rgba(0, 0, 0, 0) 55%),
            radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%),
            var(--wk-velvet);
    }
    html.wk .mnav-head {
        font-family: var(--wk-fell-sc);
        font-size: 1.05rem;
        letter-spacing: 0.08em;
        color: var(--wk-brass);
        border-bottom: 1px solid rgba(212, 176, 106, 0.3);
    }
    html.wk .mnav-head-hint {
        font-family: var(--wk-text);
        font-style: italic;
        text-transform: none;
        letter-spacing: 0.02em;
        font-size: 0.85rem;
        color: #c9a98a;
    }
    html.wk .mnav-group + .mnav-group { border-top: 1px solid rgba(212, 176, 106, 0.22); }
    html.wk .mnav-group-title {
        font-family: var(--wk-fell-sc);
        font-size: 1.05rem;
        letter-spacing: 0.06em;
        text-transform: none;
        color: var(--wk-brass);
    }
    html.wk .mnav-group-title::before { content: none; }
    html.wk .mnav-group-title[aria-current="page"] { color: #f3dc9c; }
    html.wk .mnav-link {
        font-family: var(--wk-text);
        font-size: 1.12rem;
        letter-spacing: 0;
        color: var(--wk-bone);
    }
    html.wk .mnav-link::before {
        content: '';
        top: 50%;
        left: 0.55rem;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-radius: 50%;
        background: var(--wk-brass-dim);
    }
    html.wk .mnav-link--top {
        font-family: var(--wk-fell-sc);
        font-size: 1.05rem;
        letter-spacing: 0.06em;
        text-transform: none;
        color: var(--wk-brass);
        padding-left: 0.5rem;
    }
    html.wk .mnav-link--top::before { content: none; }
    html.wk .mnav-link:hover,
    html.wk .mnav-link:focus-visible { background: rgba(255, 179, 92, 0.08); color: #fff4dc; }
    html.wk .mnav-link:focus-visible { box-shadow: inset 2px 0 0 var(--wk-brass); }
    html.wk .mnav-link[aria-current="page"] {
        clip-path: none;
        background: linear-gradient(#ecd08b, #b98f45);
        color: #2a1a10;
    }
    html.wk .mnav-link[aria-current="page"]::before { background: #8e1a14; }
    html.wk .mnav-foot { border-top: 1px solid rgba(212, 176, 106, 0.3); font-family: var(--wk-text); }
    html.wk .mnav-term {
        clip-path: none;
        border-radius: 2px;
        border: 1px solid var(--wk-brass-dim);
        color: var(--wk-brass);
        font-family: var(--wk-fell-sc);
        font-size: 0.95rem;
        letter-spacing: 0.08em;
    }
    html.wk .mnav-foot-note { font-style: italic; letter-spacing: 0.02em; font-size: 0.85rem; color: #b39a6e; }
}

/* ---- 7. breadcrumb: the catalogue line ---------------------------- */
html.wk .breadcrumb {
    display: block;
    text-align: center;
    margin: 0 auto 1.3rem;
    padding: 0.1rem 0.5rem;
    background: none;
    border: none;
    clip-path: none;
    font-family: var(--wk-fell-sc);
    font-size: 1rem;
    letter-spacing: 0.07em;
    text-transform: none;
    color: #c2a46a;
}
html.wk .breadcrumb::before { content: none; }
html.wk .breadcrumb a {
    color: var(--wk-brass);
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: rgba(212, 176, 106, 0.45);
    text-underline-offset: 3px;
}
html.wk .breadcrumb a:hover { color: #f3dc9c; text-decoration-color: currentColor; }
html.wk .breadcrumb-separator {
    display: inline-block;
    width: 1.15rem;
    height: 0.7rem;
    margin: 0 0.55rem;
    font-size: 0;
    color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1395 810'%3E%3Cpath fill='%23d4b06a' d='M319 326Q256 340 211 376Q145 427 118 530Q197 501 259 443Q320 387 320 335Q320 331 319 326ZM830 810Q457 810 457 556Q457 487 575 421Q527 366 473 338Q435 318 398 318Q398 318 394 318Q396 405 321 485Q225 587 125 602Q150 673 217 673Q260 673 300 630Q308 660 308 709Q308 784 163 784Q56 784 36 613Q36 613 0 613Q0 613 0 541Q0 541 39 541Q69 399 170 319Q247 259 310 257Q295 239 259 221Q224 203 163 189Q91 172 91 102Q91 0 189 0Q177 29 177 64Q177 102 320 186Q386 225 390 250Q451 250 492 269Q535 289 591 337Q560 257 560 214Q560 149 621 110Q667 81 776 81Q992 81 1049 446Q1073 600 1174 600Q1272 600 1272 540Q1272 510 1260 492Q1249 475 1249 448Q1249 388 1329 388Q1395 388 1395 469Q1395 642 1148 740Q972 810 830 810Z'/%3E%3C/svg%3E") center / contain no-repeat;
    vertical-align: middle;
    position: relative;
    top: -0.12rem;
}
html.wk .breadcrumb-current { color: var(--wk-bone); }

/* ---- 8. leaves: the pages lying in the room ------------------------ */
html.wk .wk-leaf {
    position: relative;
    isolation: isolate;
    max-width: 980px;
    margin: 0 auto 30px;
    padding: 56px clamp(24px, 7.5vw, 92px) 62px;
    color: var(--wk-ink);
    font-family: var(--wk-text);
    font-size: 1.25rem;
    line-height: 1.6;
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.62), 0 2px 4px rgba(0, 0, 0, 0.5);
}
html.wk .wk-leaf::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 90% 80% at 50% 45%, rgba(120, 78, 30, 0) 64%, rgba(120, 78, 30, 0.14) 100%),
        url('../img/paper.webp'),
        var(--wk-paper);
    clip-path: var(--wk-torn);
}
/* the text column: 60 to 70 characters, left aligned */
html.wk .wk-leaf { --wk-col: 41rem; }
html.wk .wk-leaf > * { max-width: var(--wk-col); margin-left: auto; margin-right: auto; }
html.wk .wk-leaf p {
    margin-top: 0;
    margin-bottom: 1em;
    color: var(--wk-ink);
    font-size: 1em;
    line-height: 1.6;
    text-align: left;
    font-variant-numeric: oldstyle-nums;
    hyphens: manual;
}
html.wk .wk-leaf em, html.wk .wk-leaf i { font-style: italic; }
html.wk .wk-leaf a {
    color: var(--wk-link);
    text-decoration: underline;
    text-decoration-color: rgba(166, 43, 43, 0.7);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
html.wk .wk-leaf a:hover { color: var(--wk-vermilion); text-decoration-thickness: 2px; }
html.wk .wk-leaf a:focus-visible { outline: 2px solid var(--wk-vermilion); outline-offset: 2px; }
html.wk .wk-leaf strong { font-weight: 600; }
html.wk .wk-leaf ul, html.wk .wk-leaf ol { color: var(--wk-ink); padding-left: 1.3em; }
html.wk .wk-leaf li { margin-bottom: 0.35em; }

/* page-level wrappers must not narrow the leaves */
html.wk .voynich-article { max-width: none; margin: 0; }

/* the running head, written by wunderkammer.js */
html.wk .wk-runhead {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: none !important;
    margin: -24px 0 2rem !important;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(29, 22, 17, 0.28);
    font-family: var(--wk-fell-sc);
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    color: var(--wk-ink-soft);
    line-height: 1.2;
}
html.wk .wk-runhead span:last-child {
    white-space: nowrap;
    font-family: var(--wk-text);
    font-variant: small-caps;
    font-variant-numeric: lining-nums;
    letter-spacing: 0.06em;
    font-size: 1.08em;
}

/* headings: rubrics in vermilion */
html.wk .wk-leaf h2 {
    margin-top: 0;
    margin-bottom: 0.9rem;
    font-family: var(--wk-fell);
    font-size: 1.62em;
    line-height: 1.18;
    color: var(--wk-vermilion);
}
html.wk .wk-leaf h2::before {
    content: '';
    display: inline-block;
    width: 1.05em;
    height: 0.62em;
    margin-right: 0.35em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1395 810'%3E%3Cpath fill='%23a62b2b' d='M319 326Q256 340 211 376Q145 427 118 530Q197 501 259 443Q320 387 320 335Q320 331 319 326ZM830 810Q457 810 457 556Q457 487 575 421Q527 366 473 338Q435 318 398 318Q398 318 394 318Q396 405 321 485Q225 587 125 602Q150 673 217 673Q260 673 300 630Q308 660 308 709Q308 784 163 784Q56 784 36 613Q36 613 0 613Q0 613 0 541Q0 541 39 541Q69 399 170 319Q247 259 310 257Q295 239 259 221Q224 203 163 189Q91 172 91 102Q91 0 189 0Q177 29 177 64Q177 102 320 186Q386 225 390 250Q451 250 492 269Q535 289 591 337Q560 257 560 214Q560 149 621 110Q667 81 776 81Q992 81 1049 446Q1073 600 1174 600Q1272 600 1272 540Q1272 510 1260 492Q1249 475 1249 448Q1249 388 1329 388Q1395 388 1395 469Q1395 642 1148 740Q972 810 830 810Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.wk .wk-leaf * + h2 { margin-top: 1.7em; }
html.wk .wk-leaf h2 small {
    display: block;
    margin-top: 0.25em;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 0.58em;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wk-ink-soft);
}
html.wk .wk-leaf h3 {
    margin: 1.4em auto 0.5em;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 1.22em;
    line-height: 1.25;
    color: var(--wk-ink);
}
html.wk .wk-leaf h3 small {
    display: block;
    margin-top: 0.2em;
    font-family: var(--wk-fell-sc);
    font-style: normal;
    font-size: 0.66em;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--wk-ink-soft);
}

/* initials: three lines high, vermilion, in a little hatched woodcut frame */
html.wk .wk-leaf > h2 + p::first-letter,
html.wk .wk-titlepage + p::first-letter,
html.wk .wk-leaf > .wk-runhead + h2 + p::first-letter {
    float: left;
    font-family: var(--wk-fell);
    font-size: 3.55em;
    line-height: 0.82;
    color: var(--wk-vermilion);
    margin: 0.08em 0.14em 0 0;
    padding: 0.1em 0.14em 0.04em;
    border: 2px solid rgba(166, 43, 43, 0.85);
    background: repeating-linear-gradient(-45deg, rgba(166, 43, 43, 0.12) 0 1px, rgba(166, 43, 43, 0) 1px 6px);
    box-shadow: inset 0 0 0 3px var(--wk-paper), inset 0 0 0 4px rgba(166, 43, 43, 0.4);
}

/* the title page: red and black, centred */
html.wk .wk-titlepage {
    text-align: center;
    max-width: 30em;
    margin: 0.2rem auto 2.3rem;
}
html.wk .wk-titlepage h1 {
    margin: 0;
    font-size: 1em;
    line-height: 1.1;
    color: var(--wk-ink);
}
html.wk .wk-t1 {
    display: block;
    font-family: var(--wk-fell-sc);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: 0.03em;
    color: var(--wk-vermilion);
}
html.wk .wk-t2 {
    display: block;
    margin-top: 0.55rem;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    line-height: 1.3;
    color: var(--wk-ink);
}
html.wk .wk-colon {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
html.wk .wk-titlepage .article-meta,
html.wk .wk-titlepage .wk-byline {
    margin: 1.1rem auto 0;
    opacity: 1;
    font-family: var(--wk-fell-sc);
    font-size: 0.82em;
    letter-spacing: 0.05em;
    color: var(--wk-ink-soft);
    text-align: center;
}
html.wk .wk-titlepage::after {
    content: '';
    display: block;
    width: min(320px, 80%);
    height: 24px;
    margin: 1.5rem auto 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1357 1396'%3E%3Cpath fill='%23a62b2b' d='M793 311Q803 263 803 219Q803 156 774 115Q750 82 696 82Q666 82 644 100Q625 115 625 142Q625 200 668 234Q742 291 793 311ZM853 431Q832 505 786 584Q880 517 966 517Q1090 517 1149 598Q1194 660 1194 754Q1194 972 885 1090Q732 1148 732 1225Q732 1324 837 1324Q953 1324 969 1282Q1020 1150 1074 1150Q1137 1150 1137 1240Q1137 1396 822 1396Q618 1396 432 1243Q234 1080 234 826Q234 469 495 469Q597 469 678 610Q755 459 771 392Q670 344 440 174Q371 123 297 123Q214 123 151 201Q111 252 111 305Q111 342 132 361Q153 380 153 409Q153 432 127 452Q91 480 71 480Q39 480 14 435Q0 410 0 335Q0 219 115 127Q208 52 326 52Q430 52 480 89Q480 89 555 146Q555 63 596 32Q638 0 716 0Q792 0 841 62Q892 128 892 215Q892 293 876 354Q936 371 1022 371Q1098 371 1140 338Q1185 302 1185 271Q1185 208 1164 190Q1122 154 1122 133Q1122 77 1143 49Q1174 9 1230 9Q1295 9 1337 79Q1357 112 1357 165Q1357 288 1214 382Q1119 445 999 445Q934 445 853 431Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
        linear-gradient(var(--wk-ink-soft), var(--wk-ink-soft)) left center / calc(50% - 22px) 1px no-repeat,
        linear-gradient(var(--wk-ink-soft), var(--wk-ink-soft)) right center / calc(50% - 22px) 1px no-repeat;
    opacity: 0.85;
}
/* a lead paragraph under a title */
html.wk .wk-titlepage .wk-lead {
    margin: 1.2rem auto 0;
    font-size: 1em;
    text-align: left;
    color: var(--wk-ink);
}

/* buttons on paper: a small wooden plank with a brass edge */
html.wk .wk-btn,
html.wk .wk-leaf .wk-btn {
    display: inline-block;
    padding: 0.45rem 1.1rem 0.4rem;
    font-family: var(--wk-fell-sc);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--wk-brass);
    text-decoration: none;
    background: url('../img/wood.webp') center / 512px 128px, var(--wk-walnut);
    border: 1px solid var(--wk-brass-dim);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.15), 0 2px 4px rgba(0, 0, 0, 0.45);
}
html.wk .wk-btn:hover { color: #f3dc9c; box-shadow: inset 0 0 14px rgba(255, 179, 92, 0.25), 0 2px 4px rgba(0, 0, 0, 0.45); }

/* the hand that points at the music */
html.wk .wk-leaf a.wk-hand::before {
    content: '';
    display: inline-block;
    width: 2.1em;
    height: 0.9em;
    margin-right: 0.3em;
    vertical-align: -0.08em;
    background: url('../img/manicule.webp') center / contain no-repeat;
}

/* ---- 9. plates and the lightbox --------------------------------------- */
html.wk main { counter-reset: wk-plate; }
html.wk .wk-leaf figure {
    margin: 2.1rem auto 2.2rem;
    max-width: min(100%, 680px);
    text-align: center;
}
html.wk .wk-leaf figure img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    padding: 10px;
    background: #e5d6b2;
    border: 1px solid rgba(29, 22, 17, 0.6);
    border-radius: 0;
    outline: 1px solid rgba(29, 22, 17, 0.3);
    outline-offset: 4px;
    box-shadow: 0 6px 14px rgba(60, 40, 20, 0.25);
    cursor: zoom-in;
}
html.wk .wk-leaf figure img.wk-plate-ink { mix-blend-mode: multiply; }
html.wk .wk-leaf figcaption {
    counter-increment: wk-plate;
    margin: 1rem auto 0;
    max-width: 58ch;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 0.82em;
    line-height: 1.45;
    color: var(--wk-ink-soft);
    opacity: 1;
}
html.wk .wk-leaf figcaption::before {
    content: 'Plate ' counter(wk-plate, upper-roman) '. ';
    font-family: var(--wk-fell-sc);
    font-style: normal;
    letter-spacing: 0.04em;
    color: var(--wk-vermilion);
}
html.wk .wk-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2.5rem 1rem 1.5rem;
    background: radial-gradient(ellipse at 50% 45%, rgba(34, 22, 12, 0.985), rgba(5, 3, 2, 0.995) 75%);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.25s ease;
}
html.wk .wk-lightbox.open { opacity: 1; }
html.wk .wk-lightbox img {
    max-width: min(94vw, 1100px);
    max-height: 82vh;
    width: auto;
    height: auto;
    filter: none;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}
html.wk .wk-lightbox img.wk-plate-ink { background: var(--wk-paper); }
html.wk .wk-lightbox p {
    margin: 0;
    max-width: 70ch;
    text-align: center;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 1rem;
    color: #d8c7a3;
}
html.wk .wk-lightbox button {
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    min-width: 44px;
    min-height: 44px;
    background: linear-gradient(#21140c, #160e08);
    border: 1px solid var(--wk-brass-dim);
    border-radius: 2px;
    color: var(--wk-brass);
    font-family: var(--wk-fell-sc);
    font-size: 1rem;
    letter-spacing: 0.06em;
    cursor: pointer;
}

/* ---- 10. notes, tables, transcriptions and questions ------------------ */
/* a note card lying on the page */
html.wk .wk-leaf .feature-box,
html.wk .wk-leaf .wk-note-card {
    position: relative;
    margin: 2rem auto;
    padding: 1.4rem 1.6rem 1.1rem;
    background: url('../img/paper.webp'), #f7f0e0;
    border: 1px solid rgba(29, 22, 17, 0.25);
    border-radius: 0;
    clip-path: none;
    box-shadow: 0 8px 16px rgba(60, 40, 20, 0.28);
    transform: rotate(-0.5deg);
    font-size: 0.95em;
}
html.wk .wk-leaf .feature-box::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d0453b, #8e1a14 68%, #5a0d0a);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
    animation: none;
    opacity: 1;
    border: none;
    inset: auto;
    top: -9px;
}
html.wk .wk-leaf .feature-box::after { content: none; }
html.wk .wk-leaf .feature-box:hover { transform: rotate(-0.5deg); box-shadow: 0 8px 16px rgba(60, 40, 20, 0.28); border-color: rgba(29, 22, 17, 0.25); }
html.wk .wk-leaf .feature-box h3 { margin-top: 0; }
html.wk .wk-leaf .feature-box p:last-child { margin-bottom: 0.2em; }

/* a line of Voynichese, set like a transcription between two rules */
html.wk .wk-leaf .voynich-sample {
    display: block;
    margin: 1.5em auto;
    padding: 0.7em 0.5em;
    max-width: 20rem;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 1.28em;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--wk-ink);
    background: none;
    border: none;
    border-top: 1px solid rgba(29, 22, 17, 0.45);
    border-bottom: 1px solid rgba(29, 22, 17, 0.45);
    overflow-x: auto;
}
html.wk .wk-leaf .article-meta {
    opacity: 1;
    font-size: 0.82em;
    line-height: 1.5;
    color: var(--wk-ink-soft);
}

/* quotations: indented behind a double rule */
html.wk .wk-leaf blockquote {
    margin: 1.4em auto;
    padding: 0.1em 0 0.1em 1.2em;
    border-left: 3px double rgba(29, 22, 17, 0.55);
    font-style: italic;
    color: var(--wk-ink);
}
html.wk .wk-leaf blockquote p:last-child { margin-bottom: 0; }

/* tables: ruled like a ledger */
html.wk .wk-leaf table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem auto 1rem;
    font-family: var(--wk-text);
    font-size: 0.86em;
    border-top: 3px double rgba(29, 22, 17, 0.6);
    border-bottom: 3px double rgba(29, 22, 17, 0.6);
}
html.wk .wk-leaf th {
    font-family: var(--wk-fell-sc);
    font-weight: 400;
    font-size: 0.92em;
    letter-spacing: 0.04em;
    text-transform: none;
    text-align: left;
    color: var(--wk-ink-soft);
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid rgba(29, 22, 17, 0.45);
}
html.wk .wk-leaf td {
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    color: var(--wk-ink);
    border-bottom: 1px solid rgba(29, 22, 17, 0.12);
    font-variant-numeric: lining-nums tabular-nums;
}
html.wk .wk-leaf tbody tr:nth-child(even) td { background: rgba(120, 80, 30, 0.06); }

/* questions: Quaestiones with a roman numeral */
html.wk .wk-leaf.wk-quaestiones { counter-reset: wk-q; }
html.wk .wk-leaf details {
    counter-increment: wk-q;
    border-bottom: 1px solid rgba(29, 22, 17, 0.18);
    padding: 0.7rem 0;
}
html.wk .wk-leaf summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--wk-text);
    font-size: 1.04em;
    letter-spacing: 0;
    color: var(--wk-ink);
    padding-left: 2.7em;
    text-indent: -2.7em;
}
html.wk .wk-leaf summary::-webkit-details-marker { display: none; }
html.wk .wk-leaf summary::before {
    content: counter(wk-q, upper-roman) '.';
    display: inline-block;
    width: 2.7em;
    text-indent: 0;
    font-family: var(--wk-fell-sc);
    letter-spacing: 0.04em;
    color: var(--wk-vermilion);
}
html.wk .wk-leaf details[open] summary::before { content: counter(wk-q, upper-roman) '.'; }
html.wk .wk-leaf summary:hover { color: var(--wk-link); }
html.wk .wk-leaf summary:focus-visible { outline: 2px solid var(--wk-vermilion); outline-offset: 3px; }
html.wk .wk-leaf details p {
    margin: 0.6rem 0 0.3rem 2.7em;
    color: var(--wk-ink);
    line-height: 1.6;
}

/* ---- 11. finis and colophon --------------------------------------- */
html.wk .wk-finis[hidden] { display: block; }
html.wk .wk-finis {
    margin: 2.6rem auto 0;
    text-align: center;
}
html.wk .wk-finis-word {
    margin: 0 0 0.6rem !important;
    font-family: var(--wk-fell-sc);
    font-size: 1.15em !important;
    letter-spacing: 0.45em;
    color: var(--wk-vermilion) !important;
    text-align: center !important;
}
html.wk .wk-finis img {
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto;
    filter: none;
}
html.wk .wk-finis .wk-signed {
    margin: 0.9rem auto 0 !important;
    font-style: italic;
    font-size: 0.86em;
    text-align: center !important;
    color: var(--wk-ink-soft) !important;
}
html.wk .wk-colophon {
    position: relative;
    z-index: 1;
    max-width: 44em;
    margin: 2.4rem auto 1.4rem;
    text-align: center;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: #b39a6e;
}
html.wk .wk-colophon::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 0.6rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1357 1396'%3E%3Cpath fill='%23d4b06a' d='M793 311Q803 263 803 219Q803 156 774 115Q750 82 696 82Q666 82 644 100Q625 115 625 142Q625 200 668 234Q742 291 793 311ZM853 431Q832 505 786 584Q880 517 966 517Q1090 517 1149 598Q1194 660 1194 754Q1194 972 885 1090Q732 1148 732 1225Q732 1324 837 1324Q953 1324 969 1282Q1020 1150 1074 1150Q1137 1150 1137 1240Q1137 1396 822 1396Q618 1396 432 1243Q234 1080 234 826Q234 469 495 469Q597 469 678 610Q755 459 771 392Q670 344 440 174Q371 123 297 123Q214 123 151 201Q111 252 111 305Q111 342 132 361Q153 380 153 409Q153 432 127 452Q91 480 71 480Q39 480 14 435Q0 410 0 335Q0 219 115 127Q208 52 326 52Q430 52 480 89Q480 89 555 146Q555 63 596 32Q638 0 716 0Q792 0 841 62Q892 128 892 215Q892 293 876 354Q936 371 1022 371Q1098 371 1140 338Q1185 302 1185 271Q1185 208 1164 190Q1122 154 1122 133Q1122 77 1143 49Q1174 9 1230 9Q1295 9 1337 79Q1357 112 1357 165Q1357 288 1214 382Q1119 445 999 445Q934 445 853 431Z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.85;
}

/* ---- 12. footer: the plinth of the cabinet ------------------------- */
html.wk footer[role="contentinfo"] {
    margin-top: 0.6rem;
    padding: 1.7rem 1.4rem 1.4rem;
    text-align: center;
    color: #b39a6e;
    background:
        linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) top / 100% 14px no-repeat,
        url('../img/wood.webp') center / 512px 128px repeat,
        var(--wk-walnut);
    border: none;
    border-top: 2px solid var(--wk-brass-dim);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6), 0 18px 40px rgba(0, 0, 0, 0.5);
}
html.wk footer[role="contentinfo"]::before {
    content: 'Index';
    display: block;
    margin: 0 0 1rem;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--wk-fell-sc);
    font-size: 1.05rem;
    letter-spacing: 0.3em;
    text-transform: none;
    text-align: center;
    color: var(--wk-brass);
    text-shadow: none;
}
html.wk footer[role="contentinfo"]::after { content: none; }
html.wk .footer-links {
    columns: 3 11rem;
    column-gap: 2rem;
    max-width: 52rem;
    margin: 0 auto 1.3rem;
    text-align: left;
    line-height: 1;
}
html.wk .footer-links a {
    display: block;
    break-inside: avoid;
    margin: 0;
    padding: 0.32rem 0 0.32rem 1.2rem;
    position: relative;
    clip-path: none;
    border: none;
    font-family: var(--wk-text);
    font-size: 1.02rem;
    letter-spacing: 0;
    text-transform: none;
    color: #e2cfa6;
    text-shadow: none;
}
html.wk .footer-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.8em;
    height: 0.5em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1395 810'%3E%3Cpath fill='%23d4b06a' d='M319 326Q256 340 211 376Q145 427 118 530Q197 501 259 443Q320 387 320 335Q320 331 319 326ZM830 810Q457 810 457 556Q457 487 575 421Q527 366 473 338Q435 318 398 318Q398 318 394 318Q396 405 321 485Q225 587 125 602Q150 673 217 673Q260 673 300 630Q308 660 308 709Q308 784 163 784Q56 784 36 613Q36 613 0 613Q0 613 0 541Q0 541 39 541Q69 399 170 319Q247 259 310 257Q295 239 259 221Q224 203 163 189Q91 172 91 102Q91 0 189 0Q177 29 177 64Q177 102 320 186Q386 225 390 250Q451 250 492 269Q535 289 591 337Q560 257 560 214Q560 149 621 110Q667 81 776 81Q992 81 1049 446Q1073 600 1174 600Q1272 600 1272 540Q1272 510 1260 492Q1249 475 1249 448Q1249 388 1329 388Q1395 388 1395 469Q1395 642 1148 740Q972 810 830 810Z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.8;
}
html.wk .footer-links a:hover,
html.wk .footer-links a:focus { color: #fff1d0; background: none; border: none; text-decoration: underline; text-decoration-color: rgba(212, 176, 106, 0.6); text-underline-offset: 3px; }
html.wk .social-links { margin: 0 0 1rem; }
html.wk .social-links a {
    clip-path: none;
    margin: 0 0.3rem 0.4rem;
    padding: 0.32rem 0.9rem 0.28rem;
    border: 1px solid var(--wk-brass-dim);
    border-radius: 2px;
    background: linear-gradient(#21140c, #160e08);
    color: var(--wk-brass);
    font-family: var(--wk-fell-sc);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: none;
    text-shadow: none;
}
html.wk .social-links a:hover,
html.wk .social-links a:focus { color: #2a1a10; background: linear-gradient(#ecd08b, #b98f45); box-shadow: none; }
html.wk footer[role="contentinfo"] p {
    margin: 0;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #c6ad7f;
}
html.wk footer[role="contentinfo"] p::after { content: none; animation: none; }

/* ---- 13. the terminal: a keyhole in a brass escutcheon ------------------- */
html.wk .term-fab {
    width: 44px;
    height: 60px;
    padding: 0;
    font-size: 0;
    color: transparent;
    text-shadow: none;
    clip-path: none;
    border: 1px solid #6b4f25;
    border-radius: 50% 50% 46% 46% / 34% 34% 66% 66%;
    background:
        radial-gradient(circle at 50% 38%, #120b06 0 6px, rgba(0, 0, 0, 0) 6.5px),
        linear-gradient(#120b06, #120b06) 50% 64% / 5px 16px no-repeat,
        radial-gradient(ellipse at 35% 25%, #f3d996, #c9a65a 45%, #7a5a2b 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.wk .term-fab:hover { box-shadow: 0 0 16px rgba(255, 179, 92, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6); }
html.wk .term-fab::before, html.wk .term-fab::after { content: none; }
html.wk .term-hint { display: none !important; }
html.wk #footer-term-link { font-family: var(--wk-text); }

/* ---- 14. Scriptorium ------------------------------------------------ */
/* the desk stands in a niche of the cabinet; labels on it use the Fell capitals */
html.wk .wk-niche {
    position: relative;
    max-width: 1080px;
    margin: 0.6rem auto 2.4rem;
    padding: 18px;
    background:
        url('../img/wood.webp') center / 512px 128px repeat,
        var(--wk-ebony);
    border: 1px solid var(--wk-brass-dim);
    box-shadow: inset 0 0 0 4px #1a110a, inset 0 18px 40px rgba(0, 0, 0, 0.75), 0 24px 46px rgba(0, 0, 0, 0.6);
}
html.wk .wk-niche .sc-desk { margin: 0; clip-path: none; --font-mono: var(--wk-fell-sc); }
html.wk .wk-niche .sc-field > span { font-size: 0.8rem; letter-spacing: 0.07em; color: #d9bd84; }
html.wk .wk-label[hidden] { display: inline-block; }
html.wk .wk-label {
    position: absolute;
    z-index: 3;
    top: -16px;
    right: 26px;
    max-width: 22em;
    margin: 0;
    padding: 0.45rem 0.9rem 0.4rem 1.6rem;
    font-family: var(--wk-text);
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--wk-ink);
    background: url('../img/paper.webp'), var(--wk-paper);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
    transform: rotate(1.2deg);
}
html.wk .wk-label::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--wk-ebony);
}
html.wk .wk-label b { font-family: var(--wk-fell-sc); font-weight: 400; letter-spacing: 0.04em; color: var(--wk-vermilion); }
html.wk .sc-copy .sc-script-article { padding: 1.3rem 0; border-top: 1px solid rgba(29, 22, 17, 0.2); }
html.wk .sc-copy .sc-script-article:first-of-type { border-top: none; }
html.wk .sc-copy .sc-script-article h3 { font-size: 1.22em; letter-spacing: 0; margin-top: 0.2em; }
html.wk .sc-copy .sc-script-article h3 small { color: var(--wk-ink-soft); }
html.wk .sc-copy .sc-script-article p { margin: 0.4rem 0 0.8rem; }
html.wk .sc-copy .sc-sample { margin: 0.6rem 0 0.8rem; max-width: 520px; }
html.wk .sc-copy .sc-sample .sc-stroke,
html.wk .sc-copy .sc-sample .sc-ring { stroke: var(--wk-ink); }
html.wk .sc-copy .sc-sample .sc-red .sc-stroke { stroke: var(--wk-vermilion); }
/* sources: a gloss in small italics with a red paragraph mark */
html.wk .wk-leaf .sc-source,
html.wk .wk-leaf .wk-gloss {
    position: relative;
    padding-left: 1.2em;
    font-family: var(--wk-text);
    font-style: italic;
    font-size: 0.82em;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--wk-ink-soft);
}
html.wk .wk-leaf .sc-source::before,
html.wk .wk-leaf .wk-gloss::before {
    content: '\00B6';
    position: absolute;
    left: 0;
    top: 0;
    font-style: normal;
    color: var(--wk-vermilion);
}
html.wk .sc-copy h2 small { font-family: var(--wk-text); font-size: 0.58em; letter-spacing: 0; color: var(--wk-ink-soft); text-transform: none; }
html.wk .sc-scripts-table td:first-child { white-space: normal; color: var(--wk-ink); }
html.wk .sc-scripts-table td:nth-child(3) { color: var(--wk-ink-soft); }
html.wk .sc-faq details { border-bottom-style: solid; }
html.wk .sc-faq summary { font-family: var(--wk-text); }
html.wk .sc-faq summary::before { color: var(--wk-vermilion); }
html.wk .sc-faq p { color: var(--wk-ink); }
html.wk .sc-lead { color: var(--wk-ink); font-size: 1em; line-height: 1.6; }
html.wk .sc-head { font-family: var(--wk-fell-sc); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: none; }

/* ---- 15. secrets --------------------------------------------------- */
html.wk .wk-moth {
    position: absolute;
    z-index: 4;
    width: 112px;
    height: 58px;
    filter: drop-shadow(2px 6px 5px rgba(0, 0, 0, 0.45));
    pointer-events: none;
    background: url('../img/moth.webp') center / contain no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease;
}
html.wk .wk-moth.here { opacity: 0.92; }
html.wk .wk-moth.flee { transition: transform 1.1s cubic-bezier(.3, .1, .3, 1), opacity 1.1s ease; opacity: 0; }
html.wk.wk-gust .wk-hero::before { animation: wk-gust 0.9s ease-out 1; }
html.wk.wk-gust body::before { animation: wk-gust-room 0.9s ease-out 1; }
@keyframes wk-gust-room {
    0% { opacity: 1; }
    18% { opacity: 0.55; }
    34% { opacity: 0.9; }
    50% { opacity: 0.68; }
    100% { opacity: 1; }
}
/* Vesalius' skull (De humani corporis fabrica, 1543) on the shelf beside the pages */
html.wk .wk-skull { display: none; }
@media (min-width: 1400px) {
    html.wk .wk-skull {
        display: block;
        position: fixed;
        z-index: 0;
        left: max(16px, calc(50% - 490px - 250px));
        bottom: 7vh;
        width: 210px;
        height: 203px;
        pointer-events: none;
        /* the image is already dimmed on the room colour; lighten drops its dark ground */
        mix-blend-mode: lighten;
        background: url('../img/skull.webp') center / contain no-repeat;
    }
    html.wk .wk-skull.turned { transform: scaleX(-1); }
}
@keyframes wk-gust {
    0% { opacity: 1; }
    15% { opacity: 0.45; }
    30% { opacity: 0.9; }
    45% { opacity: 0.55; }
    100% { opacity: 0.9; }
}
/* lights out (terminal command lightsout): pitch dark, a small circle of light at the pointer */
html.wk .wk-dark {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: auto;
    cursor: pointer;
    background: radial-gradient(circle 110px at var(--wk-x, 50%) var(--wk-y, 40%), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.985) 100%);
}

/* ---- 16. view transitions --------------------------------------------- */
/* coming in from the CRT computer: the old screen collapses to a line and a
   dot, it goes dark, then the room comes up around a candle. Only on that
   way in, never on a direct visit (wk-head.js sets the type). */
@media (prefers-reduced-motion: no-preference) {
    html.wk:active-view-transition-type(to-wk)::view-transition { background: #000; }
    html.wk:active-view-transition-type(to-wk)::view-transition-old(root) {
        animation: wk-crt-off 0.62s cubic-bezier(.6, 0, .9, .4) both;
        transform-origin: 50% 50%;
    }
    html.wk:active-view-transition-type(to-wk)::view-transition-new(root) {
        animation: wk-candle-in 1.6s cubic-bezier(.35, 0, .3, 1) both;
        -webkit-mask-image: radial-gradient(circle at 50% 16%, #000 calc(var(--wk-light) * 0.6), rgba(0, 0, 0, 0) var(--wk-light));
                mask-image: radial-gradient(circle at 50% 16%, #000 calc(var(--wk-light) * 0.6), rgba(0, 0, 0, 0) var(--wk-light));
    }
    /* between two rooms of the cabinet: a short dimming */
    html.wk::view-transition-old(root) { animation: wk-dim-out 0.22s ease both; }
    html.wk::view-transition-new(root) { animation: wk-dim-in 0.34s ease both; }
}
@keyframes wk-crt-off {
    0% { transform: none; filter: none; opacity: 1; }
    45% { transform: scale(1, 0.005); filter: brightness(2.4) saturate(0.5); opacity: 1; }
    75% { transform: scale(0.003, 0.003); filter: brightness(5); opacity: 1; }
    100% { transform: scale(0, 0); filter: brightness(5); opacity: 0; }
}
/* the light grows from the candle with a soft edge (a registered property animates the mask) */
@property --wk-light {
    syntax: '<length-percentage>';
    inherits: false;
    initial-value: 0%;
}
@keyframes wk-candle-in {
    0%, 45% { opacity: 0; --wk-light: 0%; filter: brightness(1.6) sepia(0.4); }
    52% { opacity: 1; --wk-light: 4%; filter: brightness(1.5) sepia(0.35); }
    100% { opacity: 1; --wk-light: 170%; filter: none; }
}
@keyframes wk-dim-out { to { opacity: 0; filter: brightness(0.5); } }
@keyframes wk-dim-in { from { opacity: 0; filter: brightness(0.5); } to { opacity: 1; filter: none; } }

/* ---- 17. responsive --------------------------------------------------- */
@media (max-width: 768px) {
    html.wk .container { padding: 0.8rem 10px 1.6rem; }
    html.wk.mnav-ready .container { padding-top: 60px; }
    html.wk header[role="banner"] { margin-bottom: 1rem; }
    html.wk .wk-hero { padding: 64px 12px 16px; background-size: 150% auto; }
    html.wk .wk-tagline { font-size: 0.98rem; }
    html.wk .breadcrumb { font-size: 0.92rem; margin-bottom: 1rem; }
    html.wk .wk-leaf {
        padding: 36px 20px 40px;
        font-size: 1.125rem;
        margin-bottom: 22px;
    }
    html.wk .wk-runhead { margin: -14px 0 1.4rem !important; font-size: 0.74rem; letter-spacing: 0.04em; }
    html.wk .wk-runhead span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html.wk .wk-leaf h2 { font-size: 1.5em; }
    html.wk .wk-leaf figure img { padding: 6px; }
    html.wk .wk-leaf .feature-box { padding: 1.2rem 1.1rem 0.9rem; }
    html.wk .footer-links { columns: 2 9rem; column-gap: 1.2rem; }
    html.wk .wk-niche { padding: 8px; }
    /* on phones the terminal is in the menu; nothing floats over the reading text */
    html.wk .term-fab { display: none; }
    html.wk .wk-label { position: relative; top: auto; right: auto; display: block; margin: -2px auto 12px; max-width: none; transform: rotate(0.6deg); }
}
@media (max-width: 480px) {
    html.wk .wk-leaf { padding: 30px 16px 34px; }
    html.wk .wk-leaf summary, html.wk .wk-leaf details p { padding-left: 2.2em; text-indent: -2.2em; }
    html.wk .wk-leaf details p { margin-left: 0; text-indent: 0; }
    html.wk .wk-leaf summary::before { width: 2.2em; }
}

/* ---- 18. reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html.wk .wk-hero::before { animation: none; }
    html.wk.wk-gust .wk-hero::before { animation: none; }
    html.wk .wk-moth, html.wk .wk-moth.flee { transition: none; }
    html.wk .dropdown-menu a { transition: none; }
    html.wk .wk-lightbox { transition: none; }
}

/* ---- 19. print: only the pages, on white paper --------------------------- */
@media print {
    html.wk, html.wk body { background: #fff !important; color: #000; }
    html.wk body::before, html.wk body::after,
    html.wk #header-container, html.wk #footer-container, html.wk .breadcrumb,
    html.wk .wk-colophon, html.wk .term-fab, html.wk .mnav-bar, html.wk .mnav-panel,
    html.wk .wk-niche, html.wk .wk-moth { display: none !important; }
    html.wk .wk-leaf { box-shadow: none; padding: 0; margin: 0 0 1.5rem; font-size: 11.5pt; }
    html.wk .wk-leaf::before { display: none; }
    html.wk .wk-leaf figure img { box-shadow: none; }
}