: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);
    }

}