:root {

    color-scheme: dark;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


* {

    box-sizing: border-box;

}


html,
body {

    min-height: 100%;
    margin: 0;

}


body {

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(112, 92, 54, .20),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #1a1814,
            #0e0d0b
        );

    color: #eee4cd;

}


.page {

    min-height: 100dvh;

    display: grid;
    place-items: center;

    padding:
        max(28px, env(safe-area-inset-top))
        24px
        max(28px, env(safe-area-inset-bottom));

}


.seal {

    width: min(100%, 560px);

    text-align: center;

    border:
        1px solid
        rgba(214, 190, 137, .35);

    padding:
        48px
        26px
        40px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,0)
        );

    box-shadow:
        0
        30px
        80px
        rgba(0,0,0,.38);

}


.ornament {

    font-size: 22px;
    opacity: .76;
    margin-bottom: 26px;

}


.eyebrow {

    font-size: 11px;
    letter-spacing: .32em;
    opacity: .68;

}


h1 {

    font-weight: 400;

    letter-spacing: .13em;

    font-size:
        clamp(
            32px,
            9vw,
            55px
        );

    margin:
        20px
        0
        18px;

}


.rule {

    width: 72px;
    height: 1px;

    background:
        rgba(
            214,
            190,
            137,
            .58
        );

    margin:
        0
        auto
        30px;

}


.state {

    text-transform: uppercase;

    letter-spacing: .20em;

    font-size: 12px;

    margin:
        0
        0
        18px;

}


.message {

    max-width: 360px;

    margin:
        0
        auto;

    line-height: 1.65;

    opacity: .72;

    font-style: italic;

}


.folio {

    margin-top: 48px;

    font-size: 9px;

    letter-spacing: .28em;

    opacity: .42;

}


/* ==========================================================
   MOTOR 1
   ========================================================== */

.chapter {

    margin:
        8px
        auto
        22px;

    max-width: 390px;

    font-size: 17px;

    line-height: 1.45;

    letter-spacing: .05em;

    color: #e8d8b5;

}


.activity {

    margin-top: 32px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: .24em;

    opacity: .62;

}


.pulse {

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 8px;

    border-radius: 50%;

    background: #d7c18e;

    animation:
        orsiniPulse
        2s
        infinite;

}


@keyframes orsiniPulse {

    0%,
    100% {
        opacity: .28;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

}



/* ==========================================================
   CAPITULO 1 · APERTURA
   ========================================================== */

.page {

    align-content:
        center;

    gap:
        28px;

}


.chapter-one {

    width:
        min(
            100%,
            760px
        );

    padding:
        30px
        0
        70px;

}


.archive-head {

    margin-bottom:
        20px;

    text-align:
        left;

}


.archive-head h2 {

    margin:
        5px
        0
        0;

    font-size:
        clamp(
            28px,
            7vw,
            42px
        );

    font-weight:
        400;

}


.archive-kicker {

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        .24em;

    color:
        #bca77c;

}


.custodian-card,
.document-card,
.archive-opened {

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .25
        );

    background:
        rgba(
            255,
            255,
            255,
            .025
        );

}


.custodian-card {

    margin-bottom:
        18px;

    padding:
        24px;

    line-height:
        1.65;

}


.custodian-card p {

    margin:
        12px
        0
        0;

}


.quiet {

    opacity:
        .58;

    font-style:
        italic;

}


.document-grid {

    display:
        grid;

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

    gap:
        16px;

}


.document-card {

    padding:
        18px;

}


.document-card h3 {

    margin:
        9px
        0
        14px;

    font-size:
        17px;

    font-weight:
        400;

}


.document-link {

    position:
        relative;

    display:
        block;

    min-height:
        220px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .18
        );

    background:
        #090806;

    color:
        inherit;

    text-decoration:
        none;

}


.document-link img {

    display:
        block;

    width:
        100%;

    min-height:
        220px;

    object-fit:
        cover;

}


.asset-fallback {

    display:
        none;

    padding:
        40px
        20px;

    text-align:
        center;

    line-height:
        1.55;

    opacity:
        .56;

}


.document-link.missing img {

    display:
        none;

}


.document-link.missing
.asset-fallback {

    display:
        block;

}


.archive-opened {

    margin-top:
        18px;

    padding:
        28px;

    text-align:
        center;

}


.archive-opened h3 {

    margin:
        9px
        0
        14px;

    font-size:
        25px;

    font-weight:
        400;

}


.archive-opened strong {

    display:
        inline-block;

    margin:
        10px
        0;

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .45
        );

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        .20em;

    color:
        #dfc996;

}


@media (
    max-width:
        680px
) {

    .page {

        display:
            block;

    }


    .seal {

        margin:
            18px
            auto
            0;

    }


    .document-grid {

        grid-template-columns:
            1fr;

    }


    .chapter-one {

        padding-bottom:
            40px;

    }

}



/* ==========================================================
   CAPITULO 1 · NAVEGACION POR PANTALLAS
   ========================================================== */

.screen {

    width:
        min(
            100%,
            760px
        );

    margin:
        auto;

}


.page-card {

    width:
        100%;

    padding:
        30px;

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .30
        );

    background:
        rgba(
            255,
            255,
            255,
            .025
        );

    box-shadow:
        0
        30px
        80px
        rgba(
            0,
            0,
            0,
            .35
        );

}


.page-card h2 {

    margin:
        10px
        0
        24px;

    font-size:
        clamp(
            27px,
            7vw,
            42px
        );

    font-weight:
        400;

}


.page-card p {

    line-height:
        1.7;

}


.document-full {

    display:
        block;

    width:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .20
        );

    background:
        #080705;

}


.document-full img {

    display:
        block;

    width:
        100%;

    height:
        auto;

}


.page-nav {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        26px;

}


.page-nav button,
.nav-primary {

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .35
        );

    padding:
        12px
        18px;

    color:
        #eadfc7;

    background:
        transparent;

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    letter-spacing:
        .08em;

    cursor:
        pointer;

}


.nav-primary {

    background:
        #c9b17d !important;

    color:
        #17140f !important;

}


#enterChapter {

    margin-top:
        28px;

}


.archive-final {

    text-align:
        center;

}


.access-badge {

    display:
        inline-block;

    margin:
        18px
        0;

    padding:
        10px
        15px;

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .45
        );

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    letter-spacing:
        .20em;

}


@media (
    max-width:
        680px
) {

    .page-card {

        padding:
            22px
            18px;

    }


    .page-nav {

        position:
            sticky;

        bottom:
            12px;

        padding:
            10px;

        background:
            rgba(
                14,
                13,
                11,
                .92
            );

        backdrop-filter:
            blur(12px);

    }

}


/* ==========================================================
   CAPITULO 2 · VERSION DE 1937
   ========================================================== */

.media-fallback {

    display:
        none;

    min-height:
        240px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    text-align:
        center;

    opacity:
        .55;

    font-style:
        italic;

}


.media-with-fallback.missing-media
img {

    display:
        none;

}


.media-with-fallback.missing-media
.media-fallback {

    display:
        flex;

}


#screenCap2Wait .page-card,
#screenCap2Resolved .page-card {

    max-width:
        620px;

    margin:
        auto;

}


/* ==========================================================
   CANAL RESERVADO DEL ARCHIVO
   ========================================================== */

.orsini-chat-launcher {

    position:
        fixed;

    right:
        18px;

    bottom:
        max(
            18px,
            env(safe-area-inset-bottom)
        );

    z-index:
        90;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        11px
        15px;

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .45
        );

    border-radius:
        30px;

    color:
        #17140f;

    background:
        #c9b17d;

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    cursor:
        pointer;

    box-shadow:
        0
        15px
        45px
        rgba(
            0,
            0,
            0,
            .38
        );

}


.orsini-chat-launcher[hidden] {

    display:
        none;

}


.orsini-chat-launcher.chat-open {

    display:
        none;

}


.orsini-chat-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #375b3f;

}


.orsini-chat-badge {

    min-width:
        18px;

    height:
        18px;

    padding:
        0
        5px;

    border-radius:
        20px;

    line-height:
        18px;

    color:
        white;

    background:
        #772f2f;

    font-size:
        10px;

    text-align:
        center;

}


.orsini-chat {

    position:
        fixed;

    right:
        18px;

    bottom:
        18px;

    z-index:
        100;

    width:
        min(
            420px,
            calc(100vw - 36px)
        );

    height:
        min(
            720px,
            calc(100dvh - 36px)
        );

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            214,
            190,
            137,
            .32
        );

    border-radius:
        14px;

    background:
        #14120f;

    box-shadow:
        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            .58
        );

    font-family:
        Arial,
        sans-serif;

}


.orsini-chat[hidden] {

    display:
        none;

}


.orsini-chat-header {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px
        14px;

    border-bottom:
        1px solid
        #332d24;

    background:
        #1d1a15;

}


.orsini-chat-close {

    padding:
        2px
        8px;

    border:
        0;

    color:
        #ddd3bd;

    background:
        transparent;

    font-size:
        29px;

    cursor:
        pointer;

}


.orsini-chat-avatar {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid
        #776747;

    border-radius:
        50%;

    font-family:
        Georgia,
        serif;

    color:
        #d8c190;

}


.orsini-chat-identity {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.orsini-chat-identity strong {

    font-size:
        14px;

    font-weight:
        600;

}


.orsini-chat-identity span {

    color:
        #9e927c;

    font-size:
        10px;

}


.orsini-chat-notice {

    margin:
        12px;

    padding:
        12px
        14px;

    border:
        1px solid
        rgba(
            201,
            177,
            125,
            .20
        );

    border-radius:
        8px;

    color:
        #a99b82;

    background:
        rgba(
            201,
            177,
            125,
            .05
        );

    font-family:
        Georgia,
        serif;

    font-size:
        11px;

    line-height:
        1.45;

}


.orsini-chat-notice strong {

    display:
        block;

    margin-bottom:
        5px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        .15em;

    color:
        #c4ae7e;

}


.orsini-chat-notice p {

    margin:
        0;

}


.orsini-chat-messages {

    flex:
        1;

    overflow-y:
        auto;

    padding:
        10px
        12px
        18px;

}


.orsini-chat-row {

    display:
        flex;

    margin:
        7px
        0;

}


.orsini-chat-row.mine {

    justify-content:
        flex-end;

}


.orsini-chat-row.theirs {

    justify-content:
        flex-start;

}


.orsini-chat-bubble {

    max-width:
        82%;

    padding:
        9px
        11px
        7px;

    border-radius:
        10px;

    line-height:
        1.42;

    font-size:
        13px;

}


.orsini-chat-row.mine
.orsini-chat-bubble {

    color:
        #17140f;

    background:
        #c8b17f;

    border-bottom-right-radius:
        3px;

}


.orsini-chat-row.theirs
.orsini-chat-bubble {

    color:
        #e7e0d2;

    background:
        #2a2620;

    border-bottom-left-radius:
        3px;

}


.orsini-chat-bubble img {

    display:
        block;

    max-width:
        100%;

    max-height:
        310px;

    margin-bottom:
        7px;

    border-radius:
        6px;

}


.orsini-chat-text {

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

}


.orsini-chat-meta {

    margin-top:
        5px;

    text-align:
        right;

    font-size:
        9px;

    opacity:
        .60;

}


.orsini-chat-typing {

    padding:
        7px
        16px;

    color:
        #a79778;

    font-size:
        11px;

    font-style:
        italic;

}


.orsini-chat-compose {

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        end;

    gap:
        8px;

    padding:
        10px;

    border-top:
        1px solid
        #332d24;

    background:
        #1b1814;

}


.orsini-chat-compose textarea {

    min-height:
        42px;

    max-height:
        110px;

    resize:
        none;

    padding:
        11px;

    border:
        1px solid
        #40392e;

    border-radius:
        18px;

    color:
        #eee7da;

    background:
        #0e0d0b;

    font-family:
        Arial,
        sans-serif;

    outline:
        none;

}


.orsini-chat-attach {

    display:
        grid;

    place-items:
        center;

    width:
        40px;

    height:
        40px;

    border:
        1px solid
        #4a4134;

    border-radius:
        50%;

    color:
        #d8c391;

    font-size:
        22px;

    cursor:
        pointer;

}


.orsini-chat-send {

    min-height:
        40px;

    padding:
        0
        13px;

    border:
        0;

    border-radius:
        18px;

    color:
        #17140f;

    background:
        #c9b17d;

    font-family:
        Arial,
        sans-serif;

    cursor:
        pointer;

}


@media (
    max-width:
        680px
) {

    .orsini-chat {

        inset:
            0;

        width:
            100%;

        height:
            100dvh;

        border:
            0;

        border-radius:
            0;

    }


    .orsini-chat-header {

        padding-top:
            max(
                13px,
                env(safe-area-inset-top)
            );

    }


    .orsini-chat-compose {

        padding-bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );

    }

}


/* ==========================================================
   CUSTODIO · SALIDA CLARA DEL CANAL
   ========================================================== */

.orsini-chat-close {
    width: auto;
    min-width: 92px;
    min-height: 38px;
    padding: 5px 9px;
    border: 0;
    border-radius: 7px;
    color: #d8c391;
    background: transparent;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    z-index: 5;
}

.orsini-chat-close:hover {
    background: rgba(201, 177, 125, .08);
}

.orsini-chat-header {
    flex: 0 0 auto;
}


/* ==========================================================
   CUSTODIO · POSICION DEFINITIVA
   No invade la navegación inferior del expediente.
   ========================================================== */

.orsini-chat-launcher {
    top:
        max(
            76px,
            calc(
                env(safe-area-inset-top)
                + 64px
            )
        );

    right:
        14px;

    bottom:
        auto;

    padding:
        9px
        13px;

    z-index:
        90;
}


@media (max-width: 680px) {

    .orsini-chat-launcher {
        top:
            max(
                68px,
                calc(
                    env(safe-area-inset-top)
                    + 58px
                )
            );

        right:
            10px;

        bottom:
            auto;
    }

}


/* ==========================================================
   CHAT_UX_FINAL_20260901
   Botón universal para cerrar Canal Custodio
   ========================================================== */

.orsini-chat-close-fixed {
    position: fixed !important;

    top:
        max(
            10px,
            calc(
                env(safe-area-inset-top)
                + 8px
            )
        ) !important;

    right: 12px !important;

    left: auto !important;
    bottom: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    border:
        1px solid
        rgba(224, 204, 164, .55) !important;

    border-radius: 50% !important;

    background:
        rgba(18, 16, 13, .96) !important;

    color: #f0dfbd !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 42px !important;

    text-align: center !important;

    cursor: pointer !important;

    z-index: 2147483000 !important;

    box-shadow:
        0 4px 20px
        rgba(0, 0, 0, .48) !important;
}


.orsini-chat-close-fixed:hover,
.orsini-chat-close-fixed:focus-visible {
    color: #ffffff !important;

    border-color:
        rgba(240, 223, 189, .9) !important;

    outline: none !important;
}


/* ==========================================================
   CUSTODIO_THINKING_20260901
   Estado efímero de pensamiento del Custodio
   ========================================================== */

.orsini-chat-thinking {
    display: block;

    width: fit-content;
    max-width: calc(100% - 36px);

    margin: 8px 18px 10px 18px;
    padding: 0;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        linear-gradient(
            100deg,
            rgba(150, 135, 105, .42) 0%,
            rgba(150, 135, 105, .42) 34%,
            rgba(245, 226, 185, 1) 48%,
            rgba(255, 248, 225, 1) 52%,
            rgba(245, 226, 185, 1) 56%,
            rgba(150, 135, 105, .42) 70%,
            rgba(150, 135, 105, .42) 100%
        );

    background-size: 240% 100%;
    background-position: 140% 0;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent !important;
    -webkit-text-fill-color: transparent;

    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .025em;

    box-shadow: none !important;

    animation:
        orsiniCustodioThinking
        1.8s
        linear
        infinite;

    pointer-events: none;
}


.orsini-chat-thinking[hidden] {
    display: none !important;
}


@keyframes orsiniCustodioThinking {

    0% {
        background-position: 140% 0;
        opacity: .65;
    }

    45% {
        opacity: 1;
    }

    100% {
        background-position: -140% 0;
        opacity: .65;
    }
}


@media (prefers-reduced-motion: reduce) {

    .orsini-chat-thinking {
        animation: none;

        color: #a8997d !important;
        -webkit-text-fill-color: #a8997d;
        background: none;
    }

}


/* ==========================================================
   CASO FORTI · CAP1 + MESA DE AMPLIACION
   ========================================================== */


.forti-page {

    max-width:
        1050px;
}


.forti-letter {

    max-width:
        680px;

    margin:
        28px auto;

    padding:
        34px 36px;

    border:
        1px solid rgba(110,92,62,.28);

    background:
        #e9e0cd;

    color:
        #262018;

    box-shadow:
        0 18px 60px rgba(0,0,0,.18);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        17px;

    line-height:
        1.72;
}


.forti-letter p {

    margin:
        0 0 18px;
}


.forti-signature {

    margin-top:
        32px !important;

    text-align:
        right;

    font-style:
        italic;

    font-size:
        20px;
}


.forti-technical {

    max-width:
        660px;

    margin:
        28px auto;

    padding:
        28px 30px;

    border:
        1px solid #3c372d;

    background:
        #12110f;

    font-family:
        "Courier New",
        monospace;

    line-height:
        1.65;
}


.forti-tech-line {

    display:
        inline-block;

    margin-bottom:
        24px;

    padding:
        7px 10px;

    border:
        1px solid #665a45;

    letter-spacing:
        .12em;

    font-size:
        12px;

    color:
        #c9b791;
}


.forti-no-instruction {

    text-align:
        center;
}


.forti-desk-card {

    width:
        min(
            96vw,
            1180px
        );

    max-width:
        none;
}


.forti-desk-toolbar {

    display:
        grid;

    grid-template-columns:
        46px 1fr 46px auto;

    align-items:
        center;

    gap:
        10px;

    margin:
        24px 0 12px;
}


.forti-desk-toolbar button {

    min-height:
        42px;
}


.forti-desk-toolbar input[type="range"] {

    width:
        100%;
}


.forti-desk-viewport {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        min(
            67vh,
            760px
        );

    min-height:
        440px;

    overflow:
        hidden;

    border:
        1px solid #312d25;

    background:

        linear-gradient(
            45deg,
            #171512 25%,
            transparent 25%
        ),

        linear-gradient(
            -45deg,
            #171512 25%,
            transparent 25%
        ),

        linear-gradient(
            45deg,
            transparent 75%,
            #171512 75%
        ),

        linear-gradient(
            -45deg,
            transparent 75%,
            #171512 75%
        ),

        #12110f;

    background-size:
        28px 28px;

    background-position:
        0 0,
        0 14px,
        14px -14px,
        -14px 0;
}


#deskPhoto {

    display:
        block;

    max-width:
        94%;

    max-height:
        94%;

    object-fit:
        contain;

    transform-origin:
        center center;

    transition:
        transform .08s linear;

    cursor:
        grab;

    touch-action:
        none;

    user-select:
        none;
}


#deskPhoto.dragging {

    cursor:
        grabbing;

    transition:
        none;
}


.forti-desk-missing {

    max-width:
        420px;

    padding:
        22px;

    text-align:
        center;

    color:
        #998c76;

    font-size:
        13px;

    letter-spacing:
        .05em;
}


.forti-desk-footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        10px 2px;

    font-size:
        9px;

    letter-spacing:
        .16em;

    color:
        #8d806c;
}


.forti-desk-note {

    margin-top:
        12px;

    text-align:
        center;
}


@media (max-width: 720px) {

    .forti-letter {

        padding:
            26px 22px;

        font-size:
            16px;
    }


    .forti-desk-toolbar {

        grid-template-columns:
            42px 1fr 42px;

    }


    #zoomReset {

        grid-column:
            1 / -1;
    }


    .forti-desk-viewport {

        min-height:
            380px;

        height:
            62vh;
    }
}


/* ==========================================================
   GIULIA FERRETTI · CARTA 1937
   ========================================================== */

.forti-letter {

    position: relative;

    overflow: hidden;

    max-width: 690px;

    margin: 30px auto;

    padding: 54px 52px 58px;

    border: 1px solid rgba(72,53,30,.42);

    border-radius: 1px;

    background:
        radial-gradient(
            circle at 11% 13%,
            rgba(105,71,31,.10) 0,
            rgba(105,71,31,.035) 14%,
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(92,60,26,.10) 0,
            transparent 25%
        ),
        linear-gradient(
            94deg,
            rgba(86,59,31,.055),
            transparent 13%,
            transparent 88%,
            rgba(86,59,31,.05)
        ),
        #e5d5b4;

    color: #33281c;

    box-shadow:
        0 2px 2px rgba(0,0,0,.12),
        0 14px 42px rgba(0,0,0,.30);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    line-height: 1.72;

    transform: rotate(-0.18deg);
}


.forti-letter::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .30;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(77,52,29,.025) 4px
        );
}


.forti-letter::after {

    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -47px;
    top: -52px;

    border-radius: 50%;

    border: 2px solid rgba(95,51,31,.12);
}


.forti-letter p {

    position: relative;

    margin:
        0 0 19px;

    z-index: 1;
}


.forti-letter-date {

    position: relative;

    z-index: 1;

    margin-bottom: 34px;

    text-align: right;

    font-size: 15px;

    font-style: italic;

    color: #544432;
}


.forti-signature {

    margin-top: 42px !important;

    margin-right: 28px !important;

    text-align: right;

    font-size: 23px;

    font-style: italic;

    transform: rotate(-3deg);
}


@media (max-width: 720px) {

    .forti-letter {

        padding:
            38px 27px 42px;

        font-size:
            16px;
    }

}