:root {
    --bg: #09080b;
    --bg2: #100d12;

    --panel: #111015;
    --panel2: #17141a;
    --panel3: #1c181f;

    --line: rgba(224, 210, 218, .09);
    --line2: rgba(224, 210, 218, .14);

    --text: #e4dde1;
    --soft: #aaa0a7;
    --dim: #716870;

    --red: #8c2737;
    --red-bright: #b63a4d;
    --wine: #49151e;

    --green: #759d78;
}


* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    margin: 0;

    min-height: 100vh;

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 70% -10%,
            rgba(103, 29, 44, .20),
            transparent 38%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(57, 21, 44, .17),
            transparent 34%
        ),
        linear-gradient(
            140deg,
            #08070a,
            #0c090d 60%,
            #09070a
        );
}


body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.008) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.28),
            transparent 80%
        );
}


.grain {
    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: .04;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            #fff 0,
            transparent 1px,
            transparent 4px
        );

    background-size: 7px 7px;
}


.shell {
    width: min(1380px, calc(100% - 42px));

    margin: 0 auto;

    padding: 24px 0 30px;
}


.topbar {
    height: 68px;

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

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


.brand {
    display: flex;
    align-items: center;

    gap: 14px;
}


.sigil {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(192, 59, 78, .5);

    color: #d25a6b;

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

    font-size: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(110, 27, 42, .35),
            rgba(26, 14, 21, .8)
        );

    box-shadow:
        inset 0 0 20px rgba(143, 28, 46, .15);
}


.brand-name {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    letter-spacing: 4px;
}


.brand-subtitle {
    margin-top: 3px;

    color: var(--dim);

    font-size: 10px;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.top-status {
    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--dim);

    font-size: 11px;

    letter-spacing: .7px;
}


.status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 12px rgba(117,157,120,.42);
}


.workspace {
    min-height: 730px;

    display: grid;

    grid-template-columns: 210px 1fr;

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


.sidebar {
    padding: 38px 24px 24px 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right:
        1px solid var(--line);
}


.side-title {
    margin: 0 0 14px 12px;

    color: #5f565d;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.nav-item {
    margin-bottom: 5px;

    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-left:
        1px solid transparent;

    color: #847a81;

    font-size: 12px;
}


.nav-item.active {
    border-left-color:
        var(--red-bright);

    color: #d7ced3;

    background:
        linear-gradient(
            90deg,
            rgba(139,38,54,.15),
            transparent
        );
}


.nav-icon {
    width: 15px;

    color: #695b64;

    text-align: center;
}


.nav-item.active .nav-icon {
    color: #b84556;
}


.side-bottom {
    padding-left: 12px;
}


.node-label {
    color: #554c52;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.node-value {
    margin-top: 6px;

    color: #786d74;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 10px;
}


.content {
    padding:
        52px 0 40px 52px;
}


.hero {
    padding-bottom: 50px;

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


.eyebrow {
    margin-bottom: 18px;

    color: #7f303f;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.1px;
}


h1 {
    margin: 0;

    max-width: 800px;

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

    font-size:
        clamp(50px, 7vw, 87px);

    font-weight: 400;

    line-height: .95;

    letter-spacing: -3.8px;
}


h1 span {
    color: #7c2737;
}


.lead {
    max-width: 640px;

    margin:
        27px 0 0;

    color: var(--soft);

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

    font-size: 16px;

    line-height: 1.75;
}


.hero-meta {
    margin-top: 34px;

    display: flex;

    gap: 48px;
}


.meta-label {
    margin-bottom: 6px;

    color: #584e55;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.meta-value {
    color: #9f959b;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 10px;
}


.meta-value.good {
    color: #789779;
}


.section-heading {
    margin: 34px 0 15px;

    display: flex;
    justify-content: space-between;

    color: #a99da4;

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

    font-size: 15px;
}


.section-heading span {
    color: #594e55;

    font-family:
        Inter,
        sans-serif;

    font-size: 9px;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.chronicles {
    display: grid;

    grid-template-columns:
        1.25fr 1fr 1fr;

    gap: 12px;
}


.chronicle {
    min-height: 240px;

    padding: 22px;

    display: flex;
    flex-direction: column;

    border:
        1px solid var(--line);

    background:
        linear-gradient(
            145deg,
            rgba(24,20,26,.88),
            rgba(15,13,17,.9)
        );
}


.chronicle.primary {
    border-color:
        rgba(147, 44, 61, .28);

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(120,31,47,.18),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #191318,
            #110e12
        );
}


.chronicle-top {
    display: flex;
    justify-content: space-between;
}


.tag,
.chapter {
    color: #78404a;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.tag.muted,
.chapter {
    color: #554b52;
}


.chronicle h2 {
    margin:
        34px 0 12px;

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

    font-size: 24px;

    font-weight: 400;
}


.chronicle p {
    margin: 0;

    color: #81767d;

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

    font-size: 13px;

    line-height: 1.65;
}


.chronicle-footer {
    margin-top: auto;

    padding-top: 24px;

    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    color: #554b51;

    font-size: 9px;
}


.lower-grid {
    margin-top: 12px;

    display: grid;

    grid-template-columns:
        1.4fr .8fr;

    gap: 12px;
}


.activity-panel,
.quote-panel {
    min-height: 210px;

    padding: 22px;

    border:
        1px solid var(--line);

    background:
        rgba(17,15,19,.66);
}


.panel-title {
    margin-bottom: 15px;

    color: #8c8187;

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

    font-size: 14px;
}


.activity-line {
    min-height: 48px;

    display: grid;

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

    align-items: center;

    gap: 12px;

    border-top:
        1px solid rgba(226,210,219,.05);
}


.activity-mark {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #793041;
}


.activity-line strong {
    display: block;

    color: #93888e;

    font-size: 10px;

    font-weight: 500;
}


.activity-line small {
    display: block;

    margin-top: 3px;

    color: #5d5359;

    font-size: 9px;
}


.activity-line time {
    color: #544a50;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 9px;
}


.quote-panel {
    display: flex;
    flex-direction: column;

    justify-content: space-between;

    background:
        radial-gradient(
            circle at 0 100%,
            rgba(104,24,40,.12),
            transparent 55%
        ),
        rgba(17,15,19,.66);
}


.quote-mark {
    color: #632433;

    font-family:
        Georgia,
        serif;

    font-size: 45px;

    line-height: 1;
}


blockquote {
    margin: 0;

    color: #9e9299;

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

    font-size: 16px;

    font-style: italic;

    line-height: 1.55;
}


.quote-footer {
    color: #51464d;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.footer {
    padding-top: 18px;

    display: flex;
    justify-content: space-between;

    color: #4d444a;

    font-size: 9px;

    letter-spacing: .8px;
}


.footer code {
    color: #63565f;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;
}


@media (max-width: 900px) {

    .shell {
        width:
            min(100% - 28px, 1380px);
    }


    .workspace {
        grid-template-columns: 1fr;
    }


    .sidebar {
        display: none;
    }


    .content {
        padding:
            42px 0 35px;
    }


    .chronicles {
        grid-template-columns:
            1fr;
    }


    .lower-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .topbar {
        height: 74px;
    }


    .top-status {
        display: none;
    }


    h1 {
        font-size: 51px;

        letter-spacing: -2.5px;
    }


    .hero-meta {
        gap: 22px;

        flex-wrap: wrap;
    }


    .footer {
        gap: 10px;

        flex-direction: column;
    }

}