:root {
    color-scheme: dark;

    --green: #8fa98a;
    --green-soft: rgba(143, 169, 138, .72);
    --gold: #b49b61;
    --gold-soft: rgba(180, 155, 97, .65);
    --black: #020403;
    --text: #bdc6b9;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--black);
    color: var(--text);
    font-family: "Courier New", Courier, monospace;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

/* ==================================================
   UNIVERSAL FULL-SCREEN IMAGE SCENE
   ================================================== */

.scene-page {
    position: relative;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;

    background-color: var(--black);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/*
 Desktop 16:9 masters remain dominant.
 Portrait devices crop horizontally instead of
 stretching the artwork.
*/

@media (max-aspect-ratio: 4/5) {
    .scene-page {
        background-position: center center;
    }
}

.scene-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 58%,
            rgba(0, 0, 0, .34) 100%
        );
}

.scene-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .10;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(120, 155, 115, .12) 4px
        );
}

/* ==================================================
   IMAGE ASSIGNMENT
   ================================================== */

.scene-server {
    background-image:
        url("/scenes/01_serverraum_master.png");
}

.scene-terminal,
.scene-custos {
    background-image:
        url("/scenes/02_login-computer_master.png");
}

.scene-portal {
    background-image:
        url("/scenes/03_hauptmenu_master.png");
}

.scene-memoria {
    background-image:
        url("/scenes/04_memoria_master.png");
}

.scene-annales {
    background-image:
        url("/scenes/05_Annales_master.png");
}

.scene-codices {
    background-image:
        url("/scenes/06_codices_master.png");
}

.scene-phaenomena {
    background-image:
        url("/scenes/07_phaenomena_master.png");
}

.scene-ocularum {
    background-image:
        url("/scenes/08_archivum-ocularum_master.png");
}

.scene-scriptorium {
    background-image:
        url("/scenes/09_scriptorium-hauptmodul_master.png");
}

.scene-new-entry {
    background-image:
        url("/scenes/10_scriptorium-neuer-eintrag_master.png");
}

.scene-personal-files {
    background-image:
        url("/scenes/11_scriptorium-pers-akte_master.png");
}

.scene-libri-vivi {
    background-image:
        url("/scenes/12_libri-vivi_master.png");
}

.scene-sigillum {
    background-image:
        url("/scenes/13_sigillum-hauptmodul_master.png");
}

/* ==================================================
   GENERIC HOTSPOTS
   ================================================== */

.hotspot {
    position: absolute;
    display: block;
    z-index: 10;

    border: 1px solid transparent;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.hotspot:hover,
.hotspot:focus-visible {
    border-color: var(--gold-soft);
    background: rgba(180, 155, 97, .035);
    box-shadow:
        inset 0 0 32px rgba(180, 155, 97, .05);
    outline: none;
}

/* Server-room workstation */
.hotspot-workstation {
    left: 37%;
    top: 38%;
    width: 26%;
    height: 51%;
}

/* ==================================================
   TERMINAL CRT OVERLAY
   ================================================== */

.crt-interface {
    position: absolute;

    left: 29%;
    top: 18%;

    width: 42%;
    height: 47%;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;

    color: var(--green);
}

.custos-logo {
    width: clamp(82px, 9vw, 155px);
    height: clamp(82px, 9vw, 155px);

    display: grid;
    place-items: center;

    border: 1px solid var(--gold-soft);

    color: var(--gold);

    font-size: clamp(1rem, 1.5vw, 1.55rem);
    letter-spacing: .13em;

    animation:
        custos-flicker 4.5s infinite;
}

@keyframes custos-flicker {
    0%, 17%, 19%, 73%, 75%, 100% {
        opacity: 1;
        filter: brightness(1);
    }

    18% {
        opacity: .72;
        filter: brightness(.7);
    }

    74% {
        opacity: .86;
        filter: brightness(1.3);
    }
}

.crt-title {
    margin-top: clamp(12px, 1.7vw, 24px);

    color: var(--green);
    font-size: clamp(.75rem, 1.05vw, 1.1rem);
    letter-spacing: .18em;
}

.crt-subtitle {
    margin-top: 7px;

    color: var(--green-soft);
    font-size: clamp(.55rem, .7vw, .72rem);
    letter-spacing: .12em;
}

.crt-action {
    margin-top: clamp(16px, 2.5vw, 35px);
    padding: .7em 1.25em;

    border: 1px solid var(--green-soft);

    color: var(--green);

    font-size: clamp(.58rem, .8vw, .78rem);
    letter-spacing: .1em;
}

.crt-action:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* ==================================================
   SYSTEM SCENE OVERLAY
   Used on portal/memoria/module scenes.
   ================================================== */

.system-bar {
    position: absolute;

    left: clamp(14px, 3vw, 48px);
    right: clamp(14px, 3vw, 48px);
    top: clamp(14px, 2vw, 32px);

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;

    pointer-events: none;
}

.system-bar a {
    pointer-events: auto;
}

.system-name {
    color: var(--gold);

    font-size: clamp(.58rem, .75vw, .78rem);
    letter-spacing: .16em;
}

.system-back {
    color: var(--green-soft);

    font-size: clamp(.58rem, .75vw, .78rem);
    letter-spacing: .1em;
}

.system-back:hover {
    color: var(--gold);
}

/* ==================================================
   PORTAL HOTSPOTS
   3 equal visual areas
   ================================================== */

.portal-memoria {
    left: 10%;
    top: 28%;
    width: 24%;
    height: 48%;
}

.portal-scriptorium {
    left: 38%;
    top: 28%;
    width: 24%;
    height: 48%;
}

.portal-sigillum {
    left: 66%;
    top: 28%;
    width: 24%;
    height: 48%;
}

/* ==================================================
   MEMORIA HOTSPOTS
   ================================================== */

.memoria-annales {
    left: 7%;
    top: 27%;
    width: 20%;
    height: 52%;
}

.memoria-codices {
    left: 28%;
    top: 27%;
    width: 20%;
    height: 52%;
}

.memoria-phaenomena {
    left: 51%;
    top: 27%;
    width: 20%;
    height: 52%;
}

.memoria-ocularum {
    left: 73%;
    top: 27%;
    width: 20%;
    height: 52%;
}

/* ==================================================
   ANNALES INDEX OVERLAY
   ================================================== */

.index-overlay {
    position: absolute;

    left: 7%;
    right: 7%;
    top: 16%;
    bottom: 7%;

    z-index: 20;

    display: grid;
    grid-template-columns:
        clamp(135px, 16vw, 245px)
        minmax(0, 1fr);

    overflow: hidden;

    background:
        rgba(2, 6, 3, .73);

    border:
        1px solid rgba(135, 160, 130, .28);

    backdrop-filter:
        blur(1.5px);
}

.liber-list {
    overflow-y: auto;
    border-right:
        1px solid rgba(135, 160, 130, .25);
}

.liber-button {
    width: 100%;
    min-height: 54px;

    padding:
        10px 13px;

    border: 0;
    border-bottom:
        1px solid rgba(135, 160, 130, .18);

    background:
        rgba(0, 0, 0, .15);

    color:
        var(--green-soft);

    text-align: left;
    cursor: pointer;
}

.liber-button.active {
    color: var(--gold);

    box-shadow:
        inset 3px 0 0
        var(--gold-soft);
}

.index-main {
    min-width: 0;

    display: grid;
    grid-template-rows:
        auto minmax(0, 1fr);
}

.index-toolbar {
    padding:
        clamp(10px, 1.4vw, 18px);

    border-bottom:
        1px solid rgba(135, 160, 130, .22);
}

.index-toolbar input {
    width: 100%;

    padding:
        .7em .85em;

    border:
        1px solid rgba(135, 160, 130, .28);

    background:
        rgba(0, 0, 0, .5);

    color:
        var(--text);

    outline: none;
}

.index-toolbar input:focus {
    border-color:
        var(--gold-soft);
}

.object-list {
    overflow-y: auto;
}

.object-row {
    width: 100%;

    display: grid;

    grid-template-columns:
        clamp(90px, 10vw, 145px)
        clamp(75px, 9vw, 125px)
        minmax(0, 1fr);

    gap:
        clamp(7px, 1vw, 15px);

    padding:
        clamp(8px, 1vw, 13px);

    border: 0;
    border-bottom:
        1px solid rgba(135, 160, 130, .15);

    background:
        transparent;

    color:
        var(--text);

    text-align: left;

    cursor: pointer;
}

.object-row:hover {
    background:
        rgba(143, 169, 138, .055);
}

.object-id {
    color: var(--gold);
}

.object-type {
    color: var(--green-soft);
}

/* ==================================================
   MOBILE / TABLET
   ================================================== */

@media (max-width: 900px) {

    .crt-interface {
        left: 20%;
        width: 60%;
    }

    .index-overlay {
        left: 3%;
        right: 3%;
        top: 12%;
        bottom: 3%;

        grid-template-columns:
            120px minmax(0, 1fr);
    }

    .object-row {
        grid-template-columns:
            95px minmax(0, 1fr);
    }

    .object-type {
        display: none;
    }
}

@media (max-width: 600px) {

    .hotspot-workstation {
        left: 27%;
        width: 46%;
    }

    .portal-memoria {
        left: 5%;
        width: 28%;
    }

    .portal-scriptorium {
        left: 36%;
        width: 28%;
    }

    .portal-sigillum {
        left: 67%;
        width: 28%;
    }

    .index-overlay {
        display: grid;

        grid-template-columns: 1fr;
        grid-template-rows:
            auto minmax(0, 1fr);
    }

    .liber-list {
        display: flex;

        overflow-x: auto;
        overflow-y: hidden;

        border-right: 0;
        border-bottom:
            1px solid rgba(135, 160, 130, .25);
    }

    .liber-button {
        min-width: 105px;
    }
}

/* ==================================================
   V3-020 PRIMUS CUSTOS BOOT
   ================================================== */

.custos-entry {
    display: flex;
    flex-direction: column;
    align-items: center;

    color: inherit;
    text-decoration: none;
}

.custos-entry:hover .custos-logo {
    border-color: var(--gold);
    color: var(--gold);

    box-shadow:
        0 0 24px
        rgba(180, 155, 97, .10);
}

.custos-entry:hover .crt-title {
    color: var(--gold);
}


.crt-interface-boot {
    align-items: stretch;
    justify-content: center;

    text-align: left;
}


.custos-boot {
    width: 100%;

    padding:
        clamp(10px, 1.4vw, 20px)
        clamp(8px, 1vw, 16px);

    color:
        var(--green);

    font-size:
        clamp(
            .58rem,
            .82vw,
            .88rem
        );

    line-height:
        1.55;

    letter-spacing:
        .07em;
}


.custos-boot-output {
    min-height:
        clamp(
            170px,
            20vw,
            290px
        );
}


.custos-boot-line {
    min-height: 1.55em;

    opacity: 0;

    transform:
        translateY(2px);

    animation:
        boot-line-in
        .10s
        forwards;
}


.custos-boot-line.dim {
    color:
        var(--green-soft);
}


.custos-boot-line.status {
    margin:
        .35em 0;

    color:
        var(--gold);

    text-shadow:
        0 0 8px
        rgba(180, 155, 97, .16);
}


.custos-boot-line.success {
    margin-top:
        .4em;

    color:
        var(--green);

    letter-spacing:
        .14em;
}


.custos-boot-cursor {
    display: inline-block;

    color:
        var(--green);

    animation:
        boot-cursor
        .68s
        steps(1)
        infinite;
}


@keyframes boot-line-in {

    to {
        opacity: 1;
        transform: none;
    }

}


@keyframes boot-cursor {

    0%,
    48% {
        opacity: 1;
    }

    49%,
    100% {
        opacity: 0;
    }

}


@media (max-width: 600px) {

    .custos-boot {
        font-size:
            clamp(
                .52rem,
                2.2vw,
                .68rem
            );
    }

}

/* ==================================================
   V3-021 BRANDING
   ================================================== */

.custos-logo {
    border: 0;
    background: transparent;
}

.custos-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 7px
            rgba(180, 155, 97, .18)
        );

    animation:
        custos-brand-flicker
        4.5s infinite;
}

@keyframes custos-brand-flicker {

    0%,
    17%,
    19%,
    73%,
    75%,
    100% {
        opacity: .96;

        filter:
            brightness(1)
            drop-shadow(
                0 0 7px
                rgba(180, 155, 97, .18)
            );
    }

    18% {
        opacity: .68;
        filter: brightness(.72);
    }

    74% {
        opacity: .84;

        filter:
            brightness(1.22)
            drop-shadow(
                0 0 10px
                rgba(180, 155, 97, .24)
            );
    }
}

/* ==================================================
   V3-022 PORTAL CARD HITBOXES

   Card geometry measured against the actual
   03_hauptmenu_master.png presentation.

   Entire visual card = clickable.
   ================================================== */

.scene-portal {
    position: relative;
}


/*
   Shared vertical card range.

   The three cards occupy almost the complete
   central height of the image.
*/

.portal-memoria,
.portal-scriptorium,
.portal-sigillum {
    top: 9.5%;
    height: 79.5%;

    z-index: 20;

    border:
        1px solid transparent;

    background:
        transparent;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}


/*
   Exact responsive horizontal placement.
*/

.portal-memoria {
    left: 6.7%;
    width: 27.0%;
}


.portal-scriptorium {
    left: 36.6%;
    width: 26.9%;
}


.portal-sigillum {
    left: 66.3%;
    width: 26.9%;
}


/*
   Hover follows the COMPLETE card rather than
   an arbitrary inner rectangle.
*/

.portal-memoria:hover,
.portal-scriptorium:hover,
.portal-sigillum:hover,
.portal-memoria:focus-visible,
.portal-scriptorium:focus-visible,
.portal-sigillum:focus-visible {
    border-color:
        rgba(180, 155, 97, .42);

    background:
        rgba(180, 155, 97, .018);

    box-shadow:
        inset 0 0 42px
        rgba(180, 155, 97, .035);

    outline: none;
}


/*
   Tablet / narrower landscape.

   The background is still cover-scaled, but the
   three cards remain locked to the same relative
   positions.
*/

@media (max-width: 1000px) {

    .portal-memoria,
    .portal-scriptorium,
    .portal-sigillum {
        top: 10%;
        height: 79%;
    }

}


/*
   Portrait / narrow phones.

   The artwork itself is cropped horizontally by
   background-size: cover.

   We therefore slightly enlarge the hit areas so
   the visible card remains easy to touch.
*/

@media (max-width: 600px) {

    .portal-memoria {
        left: 4.5%;
        width: 29%;
    }

    .portal-scriptorium {
        left: 35.5%;
        width: 29%;
    }

    .portal-sigillum {
        left: 66.5%;
        width: 29%;
    }

}

/* ==================================================
   V3-023 PORTAL CARD LABELS
   ================================================== */

.portal-card-label {
    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 11.5%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    pointer-events: none;
}


.portal-card-label strong {
    color:
        var(--gold);

    font-size:
        clamp(
            .78rem,
            1.15vw,
            1.22rem
        );

    font-weight: normal;

    letter-spacing:
        .19em;

    text-shadow:
        0 0 8px
        rgba(180, 155, 97, .12);
}


.portal-card-label small {
    margin-top:
        clamp(
            7px,
            .8vw,
            11px
        );

    color:
        var(--green-soft);

    font-size:
        clamp(
            .48rem,
            .64vw,
            .67rem
        );

    line-height: 1.4;

    letter-spacing:
        .11em;
}


/*
   Small visual response when the whole card
   is hovered.
*/

.portal-memoria:hover
.portal-card-label strong,
.portal-scriptorium:hover
.portal-card-label strong,
.portal-sigillum:hover
.portal-card-label strong {
    color:
        #c4aa69;

    text-shadow:
        0 0 10px
        rgba(180, 155, 97, .18);
}


@media (max-width: 600px) {

    .portal-card-label {
        left: 4%;
        right: 4%;
        bottom: 10%;
    }


    .portal-card-label strong {
        font-size:
            clamp(
                .6rem,
                2.7vw,
                .88rem
            );
    }


    .portal-card-label small {
        font-size:
            clamp(
                .4rem,
                1.8vw,
                .56rem
            );
    }

}

/* ==================================================
   V3-024 PORTAL LABEL FINAL TUNING

   Move labels into the large empty lower field
   between the two horizontal separators.

   Hitboxes remain completely unchanged.
   ================================================== */

.portal-card-label {
    left: 6%;
    right: 6%;

    /*
       Was 11.5%.
       Raised substantially so title/subtitle sit
       inside the empty information field rather
       than on the lower separator.
    */
    bottom: 22.5%;
}


.portal-card-label strong {
    /*
       Deliberately much larger than before.
    */
    font-size:
        clamp(
            1.15rem,
            1.60vw,
            1.65rem
        );

    letter-spacing:
        .15em;

    line-height:
        1.10;
}


.portal-card-label small {
    margin-top:
        clamp(
            9px,
            .85vw,
            13px
        );

    font-size:
        clamp(
            .70rem,
            .82vw,
            .86rem
        );

    line-height:
        1.35;

    letter-spacing:
        .075em;
}


/* Tablet */

@media (max-width: 1000px) {

    .portal-card-label {
        bottom: 22%;
    }

}


/* Mobile */

@media (max-width: 600px) {

    .portal-card-label {
        left: 4%;
        right: 4%;
        bottom: 20.5%;
    }


    .portal-card-label strong {
        font-size:
            clamp(
                .86rem,
                4vw,
                1.15rem
            );

        letter-spacing:
            .11em;
    }


    .portal-card-label small {
        margin-top: 7px;

        font-size:
            clamp(
                .56rem,
                2.35vw,
                .72rem
            );
    }

}

/* ==================================================
   V3-025 PORTAL LOGOS
   IMAGE 03
   ================================================== */

/*
   Each emblem is positioned RELATIVE TO ITS
   already-correct full-card hitbox.

   This keeps the logo locked to the visual card
   on responsive layouts.
*/

.portal-card-emblem {
    position: absolute;

    /*
       The circular focus area occupies roughly
       the upper 3/4 width of each card.
    */
    left: 13%;
    top: 6.5%;

    width: 74%;
    aspect-ratio: 1 / 1;

    display: block;

    overflow: hidden;

    /*
       The supplied source images have a dark
       background. Circular clipping prevents a
       visible square image edge.
    */
    border-radius: 50%;

    pointer-events: none;

    opacity: .92;
}


.portal-card-emblem img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       The dark image background merges into the
       existing green-black card while the brighter
       green/gold linework remains visible.
    */
    mix-blend-mode: lighten;

    filter:
        brightness(1.02)
        contrast(1.04);

    transition:
        opacity .16s ease,
        filter .16s ease;
}


/*
   Subtle response only.
   The artwork remains part of the system display,
   not a modern glowing button.
*/

.portal-memoria:hover
.portal-card-emblem img,
.portal-scriptorium:hover
.portal-card-emblem img,
.portal-sigillum:hover
.portal-card-emblem img {
    opacity: 1;

    filter:
        brightness(1.08)
        contrast(1.05);
}


/* ==================================================
   SUBTITLE CONTRAST TUNING

   As discussed:
   same size and position, just slightly brighter.
   ================================================== */

.portal-card-label small {
    color:
        rgba(
            166,
            190,
            159,
            .90
        );

    text-shadow:
        0 0 5px
        rgba(
            130,
            160,
            125,
            .08
        );
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 1000px) {

    .portal-card-emblem {
        left: 12.5%;
        width: 75%;
        top: 6.5%;
    }

}


@media (max-width: 600px) {

    .portal-card-emblem {
        /*
           Slightly larger on touch layouts because
           the background is more aggressively
           cropped by cover.
        */
        left: 10%;
        width: 80%;
        top: 7%;
    }

}

/* ==================================================
   V3-026 TRANSPARENT PORTAL LOGOS
   FINAL OVERRIDE FOR IMAGE 03
   ================================================== */

.portal-card-emblem {
    left: 22%;
    top: calc(13% + 4px);
    width: 56%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    border-radius: 0;
    opacity: .76;
    pointer-events: none;
}

.portal-card-emblem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    opacity: 1;
    filter:
        brightness(.82)
        saturate(.72)
        contrast(.96);
    transition:
        opacity .15s ease,
        filter .15s ease;
}

.portal-memoria:hover .portal-card-emblem,
.portal-scriptorium:hover .portal-card-emblem,
.portal-sigillum:hover .portal-card-emblem {
    opacity: .88;
}

.portal-memoria:hover .portal-card-emblem img,
.portal-scriptorium:hover .portal-card-emblem img,
.portal-sigillum:hover .portal-card-emblem img {
    filter:
        brightness(.92)
        saturate(.78)
        contrast(.98);
}

.portal-card-label small {
    color: rgba(174, 196, 166, .94);
}

@media (max-width: 1000px) {
    .portal-card-emblem {
        left: 21%;
        top: calc(13% + 4px);
        width: 58%;
    }
}

@media (max-width: 600px) {
    .portal-card-emblem {
        left: 18%;
        top: calc(14% + 3px);
        width: 64%;
    }
}

/* ==================================================
   V3-028 MEMORIA MODULE HITBOXES
   IMAGE 04

   Layout:
   ANNALES            PHAENOMENA
   CODICES            ARCHIVUM OCULORUM

   Each link covers the complete visual module.
   ================================================== */

.scene-memoria {
    position: relative;
}


/* ------------------------------
   Shared module behaviour
   ------------------------------ */

.memoria-annales,
.memoria-phaenomena,
.memoria-codices,
.memoria-ocularum {
    position: absolute;

    z-index: 20;

    border:
        1px solid transparent;

    background:
        transparent;

    box-shadow:
        none;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}


/* ------------------------------
   TOP LEFT
   ANNALES
   ------------------------------ */

.memoria-annales {
    left: 8.9%;
    top: 0.5%;

    width: 39.8%;
    height: 46.2%;
}


/* ------------------------------
   TOP RIGHT
   PHAENOMENA
   ------------------------------ */

.memoria-phaenomena {
    left: 51.2%;
    top: 0.5%;

    width: 39.8%;
    height: 46.2%;
}


/* ------------------------------
   BOTTOM LEFT
   CODICES
   ------------------------------ */

.memoria-codices {
    left: 8.9%;
    top: 50.7%;

    width: 39.8%;
    height: 48.6%;
}


/* ------------------------------
   BOTTOM RIGHT
   ARCHIVUM OCULORUM
   ------------------------------ */

.memoria-ocularum {
    left: 51.2%;
    top: 50.7%;

    width: 39.8%;
    height: 48.6%;
}


/* ------------------------------
   Hover / keyboard focus

   Entire terminal module becomes active.
   ------------------------------ */

.memoria-annales:hover,
.memoria-phaenomena:hover,
.memoria-codices:hover,
.memoria-ocularum:hover,
.memoria-annales:focus-visible,
.memoria-phaenomena:focus-visible,
.memoria-codices:focus-visible,
.memoria-ocularum:focus-visible {
    border-color:
        rgba(180, 155, 97, .48);

    background:
        rgba(180, 155, 97, .012);

    box-shadow:
        inset 0 0 38px
        rgba(180, 155, 97, .025);

    outline: none;
}


/* ------------------------------
   Tablet

   Keep same module geometry.
   ------------------------------ */

@media (max-width: 1000px) {

    .memoria-annales,
    .memoria-codices {
        left: 8.5%;
        width: 40.2%;
    }

    .memoria-phaenomena,
    .memoria-ocularum {
        left: 51.3%;
        width: 40.2%;
    }

}


/* ------------------------------
   Mobile

   Slightly expand touch targets while keeping
   them separated by the centre dividers.
   ------------------------------ */

@media (max-width: 600px) {

    .memoria-annales,
    .memoria-codices {
        left: 7.5%;
        width: 41%;
    }

    .memoria-phaenomena,
    .memoria-ocularum {
        left: 51.5%;
        width: 41%;
    }

}

/* ==================================================
   V3-029 MEMORIA MODULE LABELS
   IMAGE 04

   First horizontal data bar  = title
   Second horizontal data bar = subtitle

   V3-028 hitboxes remain unchanged.
   ================================================== */

.memoria-card-label {
    position: absolute;

    /*
       Text region excludes the circular technical
       field on the right side of each module.
    */
    left: 3.2%;
    top: 67.0%;

    width: 78.2%;
    height: 24.0%;

    display: grid;

    grid-template-rows:
        1fr
        1fr;

    align-items: center;

    text-align: center;

    pointer-events: none;

    z-index: 21;
}


/* ------------------------------
   First data line
   ------------------------------ */

.memoria-card-label strong {
    display: block;

    color:
        rgba(
            203,
            171,
            93,
            .94
        );

    font-size:
        clamp(
            1.18rem,
            1.55vw,
            1.65rem
        );

    font-weight: normal;

    line-height: 1;

    letter-spacing:
        .17em;

    text-shadow:
        0 0 7px
        rgba(
            180,
            155,
            97,
            .10
        );
}


/* ------------------------------
   Second data line
   ------------------------------ */

.memoria-card-label small {
    display: block;

    color:
        rgba(
            178,
            201,
            169,
            .92
        );

    font-size:
        clamp(
            .58rem,
            .82vw,
            .84rem
        );

    line-height: 1;

    letter-spacing:
        .10em;

    text-shadow:
        0 0 5px
        rgba(
            150,
            180,
            145,
            .06
        );
}


/* ------------------------------
   Very subtle module activation
   ------------------------------ */

.memoria-annales:hover
.memoria-card-label strong,
.memoria-phaenomena:hover
.memoria-card-label strong,
.memoria-codices:hover
.memoria-card-label strong,
.memoria-ocularum:hover
.memoria-card-label strong {
    color:
        rgba(
            216,
            183,
            101,
            .98
        );
}


/* ------------------------------
   Tablet
   ------------------------------ */

@media (max-width: 1000px) {

    .memoria-card-label {
        left: 3%;
        width: 78%;
    }


    .memoria-card-label strong {
        font-size:
            clamp(
                .92rem,
                2.15vw,
                1.18rem
            );
    }


    .memoria-card-label small {
        font-size:
            clamp(
                .52rem,
                1.28vw,
                .72rem
            );
    }

}


/* ------------------------------
   Mobile
   ------------------------------ */

@media (max-width: 600px) {

    .memoria-card-label {
        left: 2.5%;
        top: 67.2%;

        width: 79%;
        height: 23.5%;
    }


    .memoria-card-label strong {
        font-size:
            clamp(
                .72rem,
                3.1vw,
                .96rem
            );

        letter-spacing:
            .10em;
    }


    .memoria-card-label small {
        font-size:
            clamp(
                .44rem,
                1.95vw,
                .60rem
            );

        letter-spacing:
            .05em;
    }

}

/* V3-031 ANNALES INTERNAL SCROLL START */

/*
   Only the dynamic Masterindex result list scrolls.

   Liber navigation:
   stays fixed.

   Search field:
   stays fixed.

   Whole page:
   does not grow with long Libri.
*/

.annales-scroll-region {
    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain;

    scrollbar-gutter: stable;

    padding-right: 5px;

    /*
       Firefox
    */
    scrollbar-width: thin;

    scrollbar-color:
        rgba(190, 157, 78, .62)
        rgba(5, 18, 12, .42);
}


/*
   Chromium / WebKit
*/

.annales-scroll-region::-webkit-scrollbar {
    width: 8px;
}


.annales-scroll-region::-webkit-scrollbar-track {
    background:
        rgba(5, 18, 12, .42);

    border-left:
        1px solid
        rgba(122, 149, 92, .10);
}


.annales-scroll-region::-webkit-scrollbar-thumb {
    background:
        rgba(190, 157, 78, .52);

    border:
        2px solid
        rgba(5, 18, 12, .60);

    border-radius: 0;
}


.annales-scroll-region::-webkit-scrollbar-thumb:hover {
    background:
        rgba(207, 174, 88, .72);
}


/*
   Very subtle top / bottom fade.
   Keeps the list inside the old terminal aesthetic.
*/

.annales-scroll-region {
    mask-image:
        linear-gradient(
            to bottom,
            transparent 0,
            black 8px,
            black calc(100% - 8px),
            transparent 100%
        );
}


/*
   Small-screen scrollbar.
*/

@media (max-width: 600px) {

    .annales-scroll-region::-webkit-scrollbar {
        width: 6px;
    }

}

/* V3-031 ANNALES INTERNAL SCROLL END */

/* ==================================================
   V3-0.2.5 SCRIPTORIUM DESK LAYOUT START
   ================================================== */


/*
   MASTER COORDINATE SYSTEM
   ------------------------

   The scene artwork is:

       1672 x 941

   site.css renders scene backgrounds using:

       background-size: cover
       background-position: center

   The interaction canvas below uses the SAME
   aspect ratio and cover behaviour.

   Therefore hotspot coordinates remain attached
   to the artwork instead of the browser viewport.
*/


.scriptorium-hub {

    position:
        absolute;

    z-index:
        9;

    left:
        50%;

    top:
        50%;

    height:
        100dvh;

    width:
        auto;

    aspect-ratio:
        1672 / 941;

    transform:
        translate(
            -50%,
            -50%
        );

    pointer-events:
        none;

}


@media (
    min-aspect-ratio: 1672/941
) {

    .scriptorium-hub {

        width:
            100vw;

        height:
            auto;

    }

}


/* ==================================================
   COMPLETE DESK MODULES
   ================================================== */


.scriptorium-desk,
.scriptorium-module {

    position:
        absolute;

    z-index:
        10;

    display:
        block;

    overflow:
        hidden;

    color:
        inherit;

    text-decoration:
        none;

    pointer-events:
        auto;

    border:
        1px solid
        transparent;

    background:
        transparent;

    transition:
        background .15s ease,
        box-shadow .15s ease,
        filter .15s ease;

}


/*
   A module is the COMPLETE graphical workstation.

   This is intentionally NOT only the lower label
   area.
*/


.scriptorium-information {

    left:
        2.95%;

    top:
        19.35%;

    width:
        31.05%;

    height:
        32.85%;

}


.scriptorium-dossier {

    left:
        35.35%;

    top:
        19.35%;

    width:
        29.80%;

    height:
        32.85%;

}


.scriptorium-note {

    left:
        66.45%;

    top:
        19.35%;

    width:
        31.15%;

    height:
        32.85%;

}


.scriptorium-chronica {

    left:
        10.45%;

    top:
        55.50%;

    width:
        38.35%;

    height:
        28.90%;

}


.scriptorium-cycle {

    left:
        50.35%;

    top:
        55.50%;

    width:
        35.25%;

    height:
        28.90%;

}


/* ==================================================
   LARGE MONITOR AREA
   ================================================== */


/*
   NO TEXT belongs here.

   Future logo / pictogram goes into this zone.

   Existing artwork centre point remains visible
   until a logo is supplied.
*/


.scriptorium-visual {

    position:
        absolute;

    left:
        10%;

    right:
        11%;

    top:
        7%;

    height:
        58%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

}


.scriptorium-logo-slot {

    display:
        block;

    width:
        54%;

    height:
        68%;

    background-position:
        center;

    background-repeat:
        no-repeat;

    background-size:
        contain;

    opacity:
        .92;

    filter:
        drop-shadow(
            0 0 8px
            rgba(
                156,
                145,
                73,
                .12
            )
        );

    transition:
        opacity .15s ease,
        filter .15s ease,
        transform .15s ease;

}


/*
   Logo hooks are already prepared.

   When the PNGs exist we only need to uncomment /
   activate their background-image rules.

   Expected future paths:

   /brand/scriptorium/information.png
   /brand/scriptorium/dossier.png
   /brand/scriptorium/gespraechsnotiz.png
   /brand/scriptorium/chronica.png
   /brand/scriptorium/cyclus.png
*/


/* ==================================================
   LOWER TWO-LINE LABEL AREA
   ================================================== */


/*
   The right-hand circular dial belongs visually
   to the desk, but text occupies only the long
   two-row display to its left.
*/


.scriptorium-footer {

    position:
        absolute;

    left:
        4.2%;

    right:
        20.2%;

    bottom:
        7.7%;

    height:
        18.4%;

    display:
        grid;

    grid-template-rows:
        1fr 1fr;

    pointer-events:
        none;

}


.scriptorium-footer-primary,
.scriptorium-footer-secondary {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-align:
        center;

    text-shadow:
        0 0 7px
        rgba(
            154,
            174,
            103,
            .20
        );

}


.scriptorium-footer-primary {

    color:
        #d5b75e;

    font-size:
        clamp(
            .64rem,
            .93vw,
            1.08rem
        );

    letter-spacing:
        .15em;

}


.scriptorium-footer-secondary {

    color:
        rgba(
            130,
            156,
            95,
            .86
        );

    font-size:
        clamp(
            .38rem,
            .47vw,
            .58rem
        );

    letter-spacing:
        .10em;

}


/*
   The lower modules have slightly more horizontal
   room in their label panels.
*/


.scriptorium-chronica
.scriptorium-footer,
.scriptorium-cycle
.scriptorium-footer {

    left:
        4.5%;

    right:
        18.5%;

    bottom:
        6.7%;

    height:
        19.2%;

}


/* ==================================================
   HOVER / ACTIVATION
   ================================================== */


/*
   The entire workstation reacts.

   No obvious web-button rectangle.

   Instead the electronic desk subtly powers up.
*/


.scriptorium-desk:hover,
.scriptorium-desk:focus-visible,
.scriptorium-module[href]:hover,
.scriptorium-module[href]:focus-visible {

    outline:
        none;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(
                119,
                153,
                82,
                .055
            ),
            transparent 67%
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(
            199,
            166,
            65,
            .19
        ),
        inset 0 0 42px
        rgba(
            111,
            145,
            77,
            .035
        );

    filter:
        brightness(1.045);

}


.scriptorium-desk:hover
.scriptorium-footer-primary,
.scriptorium-module[href]:hover
.scriptorium-footer-primary {

    color:
        #e0c973;

}


.scriptorium-desk:hover
.scriptorium-footer-secondary,
.scriptorium-module[href]:hover
.scriptorium-footer-secondary {

    color:
        rgba(
            158,
            181,
            111,
            .96
        );

}


.scriptorium-desk:hover
.scriptorium-logo-slot,
.scriptorium-module[href]:hover
.scriptorium-logo-slot {

    opacity:
        1;

    filter:
        drop-shadow(
            0 0 12px
            rgba(
                183,
                160,
                76,
                .25
            )
        );

    transform:
        scale(1.015);

}


/* ==================================================
   PASSIVE CYCLUS II STATUS
   ================================================== */


.scriptorium-cycle {

    cursor:
        default;

}


/* ==================================================
   IGNIS LOCKED CHRONICA
   ================================================== */


.scriptorium-locked {

    cursor:
        not-allowed;

    opacity:
        .48;

    filter:
        saturate(.55);

}


.scriptorium-locked:hover {

    background:
        transparent;

    box-shadow:
        none;

    filter:
        saturate(.55);

}


/* ==================================================
   WRITER / CHRONICA PREVIEW
   Existing temporary screens remain functional.
   ================================================== */


.scriptorium-entry-preview,
.scriptorium-chronica-preview {

    position:
        absolute;

    inset:
        0;

    z-index:
        9;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    pointer-events:
        none;

}


.scriptorium-entry-preview-inner,
.scriptorium-chronica-preview-inner {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    width:
        min(
            46vw,
            720px
        );

    padding:
        25px 32px;

    border:
        1px solid
        rgba(
            182,
            148,
            52,
            .28
        );

    background:
        rgba(
            2,
            11,
            5,
            .78
        );

    text-align:
        center;

}


.scriptorium-entry-preview small,
.scriptorium-chronica-preview small {

    color:
        rgba(
            121,
            144,
            84,
            .82
        );

    font-size:
        .67rem;

    letter-spacing:
        .20em;

}


.scriptorium-entry-preview strong,
.scriptorium-chronica-preview strong {

    margin-top:
        14px;

    color:
        #cfb15e;

    font-size:
        clamp(
            1.05rem,
            1.55vw,
            1.65rem
        );

    font-weight:
        normal;

    letter-spacing:
        .16em;

}


.scriptorium-entry-preview span,
.scriptorium-chronica-preview span {

    margin-top:
        10px;

    color:
        rgba(
            148,
            166,
            112,
            .88
        );

    font-size:
        .72rem;

    letter-spacing:
        .12em;

}


.scriptorium-entry-preview em,
.scriptorium-chronica-preview em {

    margin-top:
        18px;

    color:
        rgba(
            91,
            123,
            78,
            .84
        );

    font-size:
        .61rem;

    font-style:
        normal;

    letter-spacing:
        .16em;

}


/* ==================================================
   NARROW VIEW
   ================================================== */


@media (
    max-width: 900px
) {

    .scriptorium-footer-primary {

        font-size:
            clamp(
                .43rem,
                1.65vw,
                .72rem
            );

    }


    .scriptorium-footer-secondary {

        font-size:
            clamp(
                .30rem,
                1.0vw,
                .46rem
            );

    }

}


/* ==================================================
   V3-0.2.5 SCRIPTORIUM DESK LAYOUT END
   ================================================== */

/* ==================================================
   V3-0.2.6 SCRIPTORIUM PIXEL TUNING START
   ================================================== */


/* --------------------------------------------------
   TOP DESKS
   --------------------------------------------------

   The user's reference frame showed that the
   interactive desks started roughly 23 px too low
   at 1920px viewport width.

   Same X positions.
   Move only the vertical frame upward and terminate
   at the real graphical desk bottom.
*/


.scriptorium-information,
.scriptorium-dossier,
.scriptorium-note {

    top:
        17.33%;

    height:
        32.76%;

}


/* --------------------------------------------------
   TOP DESK LABELS
   --------------------------------------------------

   Previous state:

       [ empty first display row ]
       [ PRIMARY TITLE          ]
       SECONDARY fell below

   Desired:

       [ PRIMARY TITLE          ]
       [ SECONDARY              ]

   Move the complete two-row footer upward by
   approximately one graphical row.
*/


.scriptorium-information
.scriptorium-footer,
.scriptorium-dossier
.scriptorium-footer,
.scriptorium-note
.scriptorium-footer {

    bottom:
        17.0%;

    height:
        18.4%;

}


/* --------------------------------------------------
   LOWER DESKS
   --------------------------------------------------

   Their footer was approximately 50 px too low.

   Move both text rows into the two long display
   fields already present in the artwork.
*/


.scriptorium-chronica
.scriptorium-footer,
.scriptorium-cycle
.scriptorium-footer {

    bottom:
        22.4%;

    height:
        19.2%;

}


/* --------------------------------------------------
   TEXT SCALE
   --------------------------------------------------

   Slight reduction prevents the labels from feeling
   pressed against the physical frame.
*/


.scriptorium-footer-primary {

    font-size:
        clamp(
            .60rem,
            .83vw,
            .98rem
        );

    line-height:
        1;

}


.scriptorium-footer-secondary {

    font-size:
        clamp(
            .34rem,
            .40vw,
            .50rem
        );

    line-height:
        1;

}


/*
   Lower modules are wider, so their primary line
   can remain marginally larger.
*/


.scriptorium-chronica
.scriptorium-footer-primary,
.scriptorium-cycle
.scriptorium-footer-primary {

    font-size:
        clamp(
            .60rem,
            .79vw,
            .96rem
        );

}


/* --------------------------------------------------
   FULL-DESK HOVER
   --------------------------------------------------

   Keep the COMPLETE workstation interactive,
   but make the activation almost invisible.
*/


.scriptorium-desk:hover,
.scriptorium-desk:focus-visible,
.scriptorium-module[href]:hover,
.scriptorium-module[href]:focus-visible {

    box-shadow:
        inset 0 0 0 1px
        rgba(
            197,
            168,
            72,
            .11
        ),
        inset 0 0 38px
        rgba(
            117,
            149,
            79,
            .025
        );

    filter:
        brightness(1.025);

}


/* --------------------------------------------------
   LARGE DISPLAY REMAINS EMPTY
   --------------------------------------------------

   No placeholder text is allowed in the future
   logo field.
*/


.scriptorium-visual {

    overflow:
        hidden;

}


/* ==================================================
   V3-0.2.6 SCRIPTORIUM PIXEL TUNING END
   ================================================== */

/* ==================================================
   V3-0.2.7 SCRIPTORIUM LABEL LOCK START
   ================================================== */

/*
   FINAL MICRO ALIGNMENT

   Only the three upper desk labels are adjusted.
   Lower desks remain untouched.
*/


.scriptorium-information
.scriptorium-footer,
.scriptorium-dossier
.scriptorium-footer,
.scriptorium-note
.scriptorium-footer {

    bottom:
        14.5%;

}


/*
   Secondary line remains subordinate but readable.
*/

.scriptorium-information
.scriptorium-footer-secondary,
.scriptorium-dossier
.scriptorium-footer-secondary,
.scriptorium-note
.scriptorium-footer-secondary {

    color:
        rgba(145, 169, 103, .92);

    font-size:
        clamp(
            .36rem,
            .43vw,
            .53rem
        );

}


/* ==================================================
   V3-0.2.7 SCRIPTORIUM LABEL LOCK END
   ================================================== */

/* ==================================================
   V3-0.2.8 SCRIPTORIUM LOGOS START
   ================================================== */


/*
   Logo integration for the three upper desks.
   The large display field remains image-only.
*/


.scriptorium-information .scriptorium-logo-slot {

    background-image:
        url("/brand/scriptorium/logo_info_master.png");

    width:
        47%;

    height:
        78%;

}


.scriptorium-dossier .scriptorium-logo-slot {

    background-image:
        url("/brand/scriptorium/logo_dossier_master.png");

    width:
        70%;

    height:
        76%;

}


.scriptorium-note .scriptorium-logo-slot {

    background-image:
        url("/brand/scriptorium/logo_notiz_master.png");

    width:
        63%;

    height:
        79%;

}


/*
   Slight visual lift for the upper logos so they
   sit more naturally inside the big screen field.
*/


.scriptorium-information .scriptorium-logo-slot,
.scriptorium-dossier .scriptorium-logo-slot,
.scriptorium-note .scriptorium-logo-slot {

    transform:
        translateY(-2%);

}


/*
   Hover keeps the logo slightly brighter.
*/


.scriptorium-desk:hover .scriptorium-logo-slot,
.scriptorium-desk:focus-visible .scriptorium-logo-slot {

    opacity:
        1;

    filter:
        drop-shadow(
            0 0 12px
            rgba(
                183,
                160,
                76,
                .25
            )
        );

}


/* ==================================================
   V3-0.2.8 SCRIPTORIUM LOGOS END
   ================================================== */

/* ==================================================
   V3-0.2.9 SCRIPTORIUM GEOMETRY LOCK START
   ================================================== */


/*
   IMPORTANT

   Typography is LOCKED.

   This block changes ONLY:
   - complete workstation hitboxes
   - logo scale

   Footer/text positions remain untouched.
*/


/* ==================================================
   UPPER WORKSTATIONS
   ==================================================

   Actual graphical outer frame begins higher than
   the previous interactive layer.

   X geometry was already essentially correct.
*/


.scriptorium-information {

    left:
        2.95%;

    top:
        14.05%;

    width:
        31.05%;

    height:
        32.80%;

}


.scriptorium-dossier {

    left:
        35.35%;

    top:
        14.05%;

    width:
        29.80%;

    height:
        32.80%;

}


.scriptorium-note {

    left:
        66.45%;

    top:
        14.05%;

    width:
        31.15%;

    height:
        32.80%;

}


/* ==================================================
   LOWER WORKSTATIONS
   ==================================================

   Geometry derived from the visible master frame.

   The old lower layer began too low and extended
   beneath the actual workstation.
*/


.scriptorium-chronica {

    left:
        10.95%;

    top:
        48.60%;

    width:
        37.75%;

    height:
        30.40%;

}


.scriptorium-cycle {

    left:
        50.35%;

    top:
        48.60%;

    width:
        35.55%;

    height:
        30.40%;

}


/* ==================================================
   LOGO SCALE
   ==================================================

   Masters contain generous transparent margins.

   Scale the logo layer itself instead of modifying
   or destroying the original master PNG files.
*/


.scriptorium-information
.scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.70);

}


.scriptorium-dossier
.scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.35);

}


.scriptorium-note
.scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.45);

}


/*
   Preserve exact geometry on hover.
   Only luminosity changes — no size jump.
*/


.scriptorium-information:hover
.scriptorium-logo-slot,
.scriptorium-information:focus-visible
.scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.70);

}


.scriptorium-dossier:hover
.scriptorium-logo-slot,
.scriptorium-dossier:focus-visible
.scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.35);

}


.scriptorium-note:hover
.scriptorium-logo-slot,
.scriptorium-note:focus-visible
.scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.45);

}


/* ==================================================
   FULL MODULE ACTIVATION
   ==================================================

   Keep the hover border extremely restrained.
*/


.scriptorium-desk:hover,
.scriptorium-desk:focus-visible,
.scriptorium-module[href]:hover,
.scriptorium-module[href]:focus-visible {

    box-shadow:
        inset 0 0 0 1px
        rgba(
            200,
            169,
            70,
            .10
        ),
        inset 0 0 38px
        rgba(
            112,
            146,
            78,
            .022
        );

}


/* ==================================================
   V3-0.2.9 SCRIPTORIUM GEOMETRY LOCK END
   ================================================== */

/* ==================================================
   V3-0.2.10 SCRIPTORIUM RESTORE + TYPE START
   ================================================== */


/*
   Ziel:
   - Geometrie zurück auf den funktionierenden Stand
     vor dem verschobenen Geometry-Lock
   - Typografie insgesamt größer
   - zweite Zeile deutlich lesbarer

   Dieser Block überschreibt bewusst nur:
   - Desk-Geometrie
   - Footer-Geometrie
   - Textgrößen
*/


/* --------------------------------------------------
   1) DESK GEOMETRY ZURÜCK AUF GUTEN STAND
   -------------------------------------------------- */

.scriptorium-information,
.scriptorium-dossier,
.scriptorium-note {

    top:
        17.33%;

    height:
        32.76%;

}

.scriptorium-chronica,
.scriptorium-cycle {

    top:
        52.25%;

    height:
        28.20%;

}


/* --------------------------------------------------
   2) FOOTER / TEXTBLOCKS
   --------------------------------------------------

   Oben:
   wieder in die beiden schmalen Textzeilen

   Unten:
   wieder auf den vorher stimmigen Stand
*/

.scriptorium-information .scriptorium-footer,
.scriptorium-dossier .scriptorium-footer,
.scriptorium-note .scriptorium-footer {

    bottom:
        14.5%;

    height:
        18.4%;

}

.scriptorium-chronica .scriptorium-footer,
.scriptorium-cycle .scriptorium-footer {

    bottom:
        22.4%;

    height:
        19.2%;

}


/* --------------------------------------------------
   3) TYPOGRAFIE VERGRÖSSERN
   -------------------------------------------------- */

.scriptorium-footer-primary {

    font-size:
        clamp(
            .74rem,
            1.02vw,
            1.16rem
        );

    line-height:
        1.05;

    letter-spacing:
        .12em;

}

.scriptorium-footer-secondary {

    font-size:
        clamp(
            .46rem,
            .56vw,
            .66rem
        );

    line-height:
        1.10;

    letter-spacing:
        .10em;

    color:
        rgba(
            163,
            183,
            116,
            .96
        );

}


/*
   Unten dürfen die Haupttitel einen Hauch kräftiger sein,
   weil dort mehr Raum vorhanden ist.
*/

.scriptorium-chronica .scriptorium-footer-primary,
.scriptorium-cycle .scriptorium-footer-primary {

    font-size:
        clamp(
            .78rem,
            1.08vw,
            1.22rem
        );

}

.scriptorium-chronica .scriptorium-footer-secondary,
.scriptorium-cycle .scriptorium-footer-secondary {

    font-size:
        clamp(
            .48rem,
            .60vw,
            .70rem
        );

}


/* --------------------------------------------------
   4) LOGOS UNVERÄNDERT IM VERHALTEN,
      ABER OHNE GEOMETRIE-CHAOS
   -------------------------------------------------- */

.scriptorium-information .scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.55);

}

.scriptorium-dossier .scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.28);

}

.scriptorium-note .scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.34);

}

.scriptorium-information:hover .scriptorium-logo-slot,
.scriptorium-information:focus-visible .scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.55);

}

.scriptorium-dossier:hover .scriptorium-logo-slot,
.scriptorium-dossier:focus-visible .scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.28);

}

.scriptorium-note:hover .scriptorium-logo-slot,
.scriptorium-note:focus-visible .scriptorium-logo-slot {

    transform:
        translateY(-1%)
        scale(1.34);

}


/* --------------------------------------------------
   5) HOVER NUR DEZENT
   -------------------------------------------------- */

.scriptorium-desk:hover,
.scriptorium-desk:focus-visible,
.scriptorium-module[href]:hover,
.scriptorium-module[href]:focus-visible {

    box-shadow:
        inset 0 0 0 1px rgba(200, 169, 70, .09),
        inset 0 0 32px rgba(112, 146, 78, .020);

}


/* ==================================================
   V3-0.2.10 SCRIPTORIUM RESTORE + TYPE END
   ================================================== */

/* ==================================================
   V3-0.2.11 SCRIPTORIUM MICRO ALIGNMENT START
   ================================================== */

/*
   Ziel:
   - obere Haupttitel 2px tiefer
   - obere zweite Zeile spürbar größer
   - untere Reihe komplett neu ausgerichtet
   - Logos unverändert
*/


/* --------------------------------------------------
   1) OBERSTE REIHE - FOOTERBLOCK
   -------------------------------------------------- */

.scriptorium-information .scriptorium-footer,
.scriptorium-dossier .scriptorium-footer,
.scriptorium-note .scriptorium-footer {

    bottom:
        14.3%;

    height:
        18.8%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        4px;

}


/* Hauptzeile oben: exakt 2px tiefer */
.scriptorium-information .scriptorium-footer-primary,
.scriptorium-dossier .scriptorium-footer-primary,
.scriptorium-note .scriptorium-footer-primary {

    font-size:
        clamp(
            .76rem,
            1.04vw,
            1.18rem
        );

    line-height:
        1.05;

    letter-spacing:
        .12em;

    transform:
        translateY(2px);

}


/* Zweite Zeile oben: etwas größer */
.scriptorium-information .scriptorium-footer-secondary,
.scriptorium-dossier .scriptorium-footer-secondary,
.scriptorium-note .scriptorium-footer-secondary {

    font-size:
        clamp(
            .54rem,
            .67vw,
            .78rem
        );

    line-height:
        1.12;

    letter-spacing:
        .10em;

    color:
        rgba(
            163,
            183,
            116,
            .97
        );

    transform:
        translateY(2px);

}


/* --------------------------------------------------
   2) UNTERE REIHE - KOMPLETT NEU AUSRICHTEN
   --------------------------------------------------

   Ziel:
   - Titel sitzt sauber mittig im oberen Beschriftungsbereich
   - zweite Zeile sitzt klar lesbar darunter
   - Block insgesamt etwas tiefer und stabiler
*/

.scriptorium-chronica .scriptorium-footer,
.scriptorium-cycle .scriptorium-footer {

    bottom:
        10.8%;

    height:
        18.6%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        8px;

    text-align:
        center;

}


/* Untere Haupttitel */
.scriptorium-chronica .scriptorium-footer-primary,
.scriptorium-cycle .scriptorium-footer-primary {

    font-size:
        clamp(
            .90rem,
            1.18vw,
            1.34rem
        );

    line-height:
        1.05;

    letter-spacing:
        .12em;

    margin:
        0;

    transform:
        translateY(0);

}


/* Untere zweite Zeile */
.scriptorium-chronica .scriptorium-footer-secondary,
.scriptorium-cycle .scriptorium-footer-secondary {

    font-size:
        clamp(
            .56rem,
            .72vw,
            .82rem
        );

    line-height:
        1.12;

    letter-spacing:
        .10em;

    margin:
        0;

    color:
        rgba(
            163,
            183,
            116,
            .97
        );

    transform:
        translateY(0);

}


/* --------------------------------------------------
   3) HOVER DEZENT BELASSEN
   -------------------------------------------------- */

.scriptorium-desk:hover,
.scriptorium-desk:focus-visible,
.scriptorium-module[href]:hover,
.scriptorium-module[href]:focus-visible {

    box-shadow:
        inset 0 0 0 1px rgba(200, 169, 70, .09),
        inset 0 0 32px rgba(112, 146, 78, .020);

}


/* ==================================================
   V3-0.2.11 SCRIPTORIUM MICRO ALIGNMENT END
   ================================================== */

/* ==================================================
   V3-0.2.12 SCRIPTORIUM UPPER TWO BOX START
   ================================================== */


/*
   IMPORTANT

   Only the THREE UPPER desks are touched here.

   Lower row:
   - CHRONICA MENSIS
   - LIBER XIII

   remains completely untouched.


   GRAPHICAL TARGET

   ┌────────────────────────────┐
   │       PRIMARY TITLE        │
   ├────────────────────────────┤
   │       SECONDARY LINE       │
   └────────────────────────────┘

   Primary and secondary are NOT stacked by flexbox.
   Each one gets its own fixed graphical row.
*/


/* ==================================================
   FOOTER = BOTH PHYSICAL TEXT BOXES
   ================================================== */


.scriptorium-information
.scriptorium-footer,
.scriptorium-dossier
.scriptorium-footer,
.scriptorium-note
.scriptorium-footer {

    position:
        absolute;

    /*
       Keep the existing left/right text width.
       Circular control on the right stays free.
    */

    left:
        4.2%;

    right:
        20.2%;


    /*
       Anchor the footer exactly across the TWO
       horizontal display boxes below the monitor.
    */

    top:
        71.0%;

    bottom:
        auto;

    height:
        18.6%;


    /*
       Disable all previous flex/grid stacking.
    */

    display:
        block;

    gap:
        0;

    text-align:
        center;

    pointer-events:
        none;

}


/* ==================================================
   BOX 1 // PRIMARY TITLE
   ================================================== */


.scriptorium-information
.scriptorium-footer-primary,
.scriptorium-dossier
.scriptorium-footer-primary,
.scriptorium-note
.scriptorium-footer-primary {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        2px;

    height:
        50%;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    margin:
        0;

    padding:
        0;


    /*
       User-requested micro shift:
       headline approximately 2 px lower.
    */

    transform:
        translateY(2px);


    font-size:
        clamp(
            .76rem,
            1.04vw,
            1.18rem
        );

    line-height:
        1;

    letter-spacing:
        .12em;

    white-space:
        nowrap;

}


/* ==================================================
   BOX 2 // SECONDARY LINE
   ================================================== */


.scriptorium-information
.scriptorium-footer-secondary,
.scriptorium-dossier
.scriptorium-footer-secondary,
.scriptorium-note
.scriptorium-footer-secondary {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        53%;

    bottom:
        auto;

    height:
        47%;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    margin:
        0;

    padding:
        0;

    transform:
        none;


    /*
       Larger than before.
       Still visibly subordinate to the title.
    */

    font-size:
        clamp(
            .58rem,
            .70vw,
            .82rem
        );

    line-height:
        1;

    letter-spacing:
        .085em;

    color:
        rgba(
            164,
            186,
            118,
            .98
        );

    white-space:
        nowrap;

}


/* ==================================================
   UPPER LOGOS / HITBOXES
   ==================================================

   Intentionally untouched.

   No geometry changes.
   No logo scaling changes.
   No hover changes.
*/


/* ==================================================
   V3-0.2.12 SCRIPTORIUM UPPER TWO BOX END
   ================================================== */

/* ==================================================
   V3-0.2.13 SCRIPTORIUM TEXT CENTER LOCK START
   ================================================== */


/*
   FINAL TEXT RULE:

   Jede physische Beschriftungsbox erhält genau
   eine Textzeile.

   PRIMARY   = obere Box
   SECONDARY = untere Box

   Beide Texte:
   - horizontal zentriert
   - vertikal zentriert
   - keinerlei translate / margin / gap
*/


/* ==================================================
   OBERE DREI SCHREIBTISCHE
   ================================================== */


.scriptorium-information .scriptorium-footer,
.scriptorium-dossier .scriptorium-footer,
.scriptorium-note .scriptorium-footer {

    display:
        block;

    gap:
        0;

}


/* obere physische Box */

.scriptorium-information .scriptorium-footer-primary,
.scriptorium-dossier .scriptorium-footer-primary,
.scriptorium-note .scriptorium-footer-primary {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    bottom:
        auto;

    width:
        100%;

    height:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    padding:
        0;

    transform:
        none;

    line-height:
        1;

}


/* untere physische Box */

.scriptorium-information .scriptorium-footer-secondary,
.scriptorium-dossier .scriptorium-footer-secondary,
.scriptorium-note .scriptorium-footer-secondary {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        50%;

    bottom:
        auto;

    width:
        100%;

    height:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    padding:
        0;

    transform:
        none;

    line-height:
        1;

}


/* ==================================================
   UNTERE ZWEI MODULE
   ================================================== */


/*
   Auch hier werden die zwei sichtbaren Kästen
   unabhängig voneinander behandelt.
*/

.scriptorium-chronica .scriptorium-footer,
.scriptorium-cycle .scriptorium-footer {

    display:
        block;

    gap:
        0;

}


/* obere Box */

.scriptorium-chronica .scriptorium-footer-primary,
.scriptorium-cycle .scriptorium-footer-primary {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    bottom:
        auto;

    width:
        100%;

    height:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    padding:
        0;

    transform:
        none;

    line-height:
        1;

}


/* untere Box */

.scriptorium-chronica .scriptorium-footer-secondary,
.scriptorium-cycle .scriptorium-footer-secondary {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        50%;

    bottom:
        auto;

    width:
        100%;

    height:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0;

    padding:
        0;

    transform:
        none;

    line-height:
        1;

}


/* ==================================================
   V3-0.2.13 SCRIPTORIUM TEXT CENTER LOCK END
   ================================================== */

/* ==================================================
   V3-0.2.14 SCRIPTORIUM TOP ROW PARITY START
   ================================================== */

/*
   Ziel:
   Die obere Reihe soll textlich exakt nach derselben
   Logik funktionieren wie die untere Reihe.

   Bedeutet:
   - Titelzeile mittig im oberen Beschriftungskasten
   - zweite Zeile mittig im unteren Beschriftungskasten
   - gleiche Zentrierlogik
   - keine schleichenden Offsets, Transforms oder Margins
*/

.scriptorium-information .scriptorium-footer,
.scriptorium-dossier .scriptorium-footer,
.scriptorium-note .scriptorium-footer {
    position: absolute;
    left: 8.4%;
    right: 20.8%;
    bottom: 8.6%;
    height: 18.2%;
    display: block;
    margin: 0;
    padding: 0;
}

/* obere Textbox */
.scriptorium-information .scriptorium-footer-primary,
.scriptorium-dossier .scriptorium-footer-primary,
.scriptorium-note .scriptorium-footer-primary {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    transform: none;
    line-height: 1;
    text-align: center;
}

/* untere Textbox */
.scriptorium-information .scriptorium-footer-secondary,
.scriptorium-dossier .scriptorium-footer-secondary,
.scriptorium-note .scriptorium-footer-secondary {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    transform: none;
    line-height: 1;
    text-align: center;
}

/*
   Leichter optischer Feinschliff:
   Die Headline minimal tiefer, damit sie visuell
   genauso sitzt wie unten.
*/
.scriptorium-information .scriptorium-footer-primary span,
.scriptorium-dossier .scriptorium-footer-primary span,
.scriptorium-note .scriptorium-footer-primary span,
.scriptorium-information .scriptorium-footer-primary,
.scriptorium-dossier .scriptorium-footer-primary,
.scriptorium-note .scriptorium-footer-primary {
    padding-top: 2px;
}

/*
   Zweite Zeile etwas kräftiger lesbar,
   aber ohne Positionsverlust.
*/
.scriptorium-information .scriptorium-footer-secondary,
.scriptorium-dossier .scriptorium-footer-secondary,
.scriptorium-note .scriptorium-footer-secondary {
    font-size: 1.08em;
}

/* ==================================================
   V3-0.2.14 SCRIPTORIUM TOP ROW PARITY END
   ================================================== */

/* ==================================================
   V3-0.3.0 SCRIPTORIUM UNIVERSAL WRITER START
   ================================================== */

.writer-scene-information {
    --writer-accent: rgba(158, 190, 112, .96);
    --writer-soft: rgba(158, 190, 112, .15);
}

.writer-scene-dossier {
    --writer-accent: rgba(190, 165, 97, .96);
    --writer-soft: rgba(190, 165, 97, .15);
}

.writer-scene-gespraechsnotiz {
    --writer-accent: rgba(125, 169, 158, .96);
    --writer-soft: rgba(125, 169, 158, .15);
}

.scriptorium-writer-stage {
    position: absolute;
    z-index: 20;

    left: 16.5%;
    right: 16.5%;
    top: 12.5%;
    bottom: 7.5%;

    pointer-events: auto;
}

.scriptorium-writer-panel {
    position: relative;

    box-sizing: border-box;

    width: 100%;
    height: 100%;

    padding: 1.15rem 1.35rem 1rem;

    display: flex;
    flex-direction: column;
    gap: .8rem;

    overflow: hidden;

    font-family:
        "Courier New",
        Courier,
        monospace;

    color: rgba(185, 201, 151, .96);

    background:
        linear-gradient(
            180deg,
            rgba(3, 8, 5, .84),
            rgba(2, 6, 4, .72)
        );

    border:
        1px solid
        var(
            --writer-accent,
            rgba(164, 183, 119, .95)
        );

    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, .72),
        0 0 16px var(--writer-soft);
}

.writer-header {
    flex: 0 0 auto;

    padding-bottom: .65rem;

    border-bottom:
        1px solid
        var(--writer-accent);
}

.writer-desk-code {
    font-size:
        clamp(.58rem, .70vw, .78rem);

    letter-spacing: .16em;

    color: var(--writer-accent);
}

.writer-header h1 {
    margin: .28rem 0 0;

    font-size:
        clamp(1rem, 1.55vw, 1.75rem);

    line-height: 1;

    letter-spacing: .13em;

    font-weight: 600;

    color: var(--writer-accent);
}

.writer-meta-grid {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: .55rem;
}

.writer-meta-field {
    min-width: 0;

    padding: .45rem .55rem;

    border:
        1px solid
        rgba(150, 172, 112, .35);

    background:
        rgba(3, 10, 6, .50);
}

.writer-meta-field span,
.writer-field > span {
    display: block;

    margin-bottom: .22rem;

    font-size:
        clamp(.48rem, .58vw, .66rem);

    letter-spacing: .15em;

    color:
        rgba(137, 158, 105, .9);
}

.writer-meta-field strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size:
        clamp(.60rem, .72vw, .80rem);

    font-weight: 500;

    color: var(--writer-accent);
}

.writer-field {
    display: flex;
    flex-direction: column;

    min-height: 0;
}

.writer-title-field {
    flex: 0 0 auto;
}

.writer-content-field {
    flex: 1 1 auto;
}

.writer-field input,
.writer-field textarea {
    box-sizing: border-box;

    width: 100%;

    border:
        1px solid
        rgba(153, 176, 111, .48);

    outline: none;
    border-radius: 0;

    font-family: inherit;

    color:
        rgba(201, 213, 174, .98);

    background:
        rgba(0, 5, 2, .68);

    caret-color:
        var(--writer-accent);

    box-shadow:
        inset 0 0 15px
        rgba(0, 0, 0, .56);
}

.writer-field input {
    height: 2.3rem;

    padding: .38rem .65rem;

    font-size:
        clamp(.75rem, .90vw, 1rem);
}

.writer-field textarea {
    flex: 1 1 auto;

    min-height: 8rem;

    resize: none;

    padding: .70rem .78rem;

    overflow: auto;

    font-size:
        clamp(.70rem, .82vw, .93rem);

    line-height: 1.42;
}

.writer-field input:focus,
.writer-field textarea:focus {
    border-color:
        var(--writer-accent);

    box-shadow:
        inset 0 0 15px
        rgba(0, 0, 0, .56),
        0 0 8px
        var(--writer-soft);
}

.writer-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: .9rem;
}

#scriptorium-writer-seal {
    appearance: none;

    border:
        1px solid
        var(--writer-accent);

    border-radius: 0;

    padding: .58rem 1.05rem;

    font-family: inherit;

    font-size: .72rem;

    letter-spacing: .13em;

    color: var(--writer-accent);

    background:
        rgba(2, 9, 4, .78);

    cursor: pointer;
}

#scriptorium-writer-seal:hover {
    background:
        var(--writer-soft);
}

#scriptorium-writer-seal:disabled {
    cursor: default;
    opacity: .55;
}

.writer-state {
    font-size: .60rem;

    letter-spacing: .11em;

    color:
        rgba(130, 151, 101, .82);
}

.writer-ceremony {
    flex: 0 0 auto;

    min-height: 3.65rem;

    margin: 0;
    padding: .45rem .60rem;

    overflow: hidden;

    border-top:
        1px solid
        rgba(148, 169, 108, .25);

    font-family: inherit;

    font-size:
        clamp(.55rem, .66vw, .74rem);

    line-height: 1.32;

    letter-spacing: .05em;

    color: var(--writer-accent);

    background:
        rgba(0, 4, 2, .46);
}

.scriptorium-writer-stage[data-sealed="1"]
.writer-field input,

.scriptorium-writer-stage[data-sealed="1"]
.writer-field textarea {
    opacity: .75;
}

@media (max-width: 1100px) {

    .scriptorium-writer-stage {
        left: 8%;
        right: 8%;
    }

    .writer-meta-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

/* ==================================================
   V3-0.3.0 SCRIPTORIUM UNIVERSAL WRITER END
   ================================================== */

/* ==================================================
   V3-0.3.1 SCRIPTORIUM WRITER GEOMETRY START
   ================================================== */

/*
   GEOMETRY ONLY.

   Target:
   physical central monitor area of
   10_scriptorium-neuer-eintrag_master.png

   No writer fields, logic, routes or save
   behaviour are changed here.
*/

.scriptorium-writer-stage {

    left:
        4.7%;

    right:
        5.5%;

    top:
        11.4%;

    bottom:
        12.6%;

}

/* ==================================================
   V3-0.3.1 SCRIPTORIUM WRITER GEOMETRY END
   ================================================== */