/* leadedspunk.net — terminal native, rendered beautifully */

:root {
    --bg-0: #000000;
    --bg-1: #070708;
    --bg-2: #0d0d10;
    --bg-3: #15151a;

    --fg-0: #f5f2ea;
    --fg-1: #dedad2;
    --fg-2: #b0ada6;
    --fg-3: #787570;
    --fg-4: #3e3c3a;

    /* Oxblood / dried-rust red — muted, oxidized, NOT siren red */
    --red: #9c4136;
    --red-bright: #c2655a;
    --red-deep: #5a1f17;
    --red-glow:
        0 0 2px rgba(156, 65, 54, 0.45), 0 0 10px rgba(156, 65, 54, 0.12);

    /* Steel slate blue — dusted, navy under fluorescent, NOT cobalt */
    --blue: #506b8a;
    --blue-bright: #7589a7;
    --blue-deep: #2c405c;
    --blue-glow:
        0 0 2px rgba(80, 107, 138, 0.45), 0 0 10px rgba(80, 107, 138, 0.12);

    --amber: #a37a2b;
    /* Blood-amber — third accent. Burnt amber + dried rust. Used sparingly
     for dividers, hover states, the RESTRICTED section, signal pips. */
    --amber-blood: #b5651d;
    --amber-blood-bright: #d28e3c;
    --amber-blood-deep: #6e3a0c;
    --amber-glow:
        0 0 2px rgba(181, 101, 29, 0.55), 0 0 10px rgba(181, 101, 29, 0.15);

    /* Wine — deep sensual red for personal moments, lipstick, wax seal */
    --wine: #6e2535;
    --wine-bright: #9c3a4f;
    --wine-deep: #3d1620;
    --wine-glow:
        0 0 2px rgba(110, 37, 53, 0.5), 0 0 12px rgba(110, 37, 53, 0.18);

    /* Champagne nude — paired with wine, used on the persona accents */
    --nude: #b8a89a;
    --nude-warm: #c89993;

    /* Blood — raw arterial red. carnal, ritual, occult. the body, not the glass. */
    --blood: #8b0000;
    --blood-bright: #c62828;
    --blood-deep: #3b0000;
    --blood-glow: 0 0 2px rgba(139, 0, 0, 0.65), 0 0 14px rgba(139, 0, 0, 0.28);

    /* Flesh — warm skin tone. the body beneath the operator. */
    --flesh: #c4a090;
    --flesh-warm: #d4a898;

    --display-italic: "Italiana", "Cormorant Garamond", serif;

    --mono:
        "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
        Consolas, monospace;
    --mono-display: "VT323", "JetBrains Mono", monospace;
    --mono-spread: "Major Mono Display", "JetBrains Mono", monospace;

    --scanline-opacity: 0.18;
    --noise-opacity: 0.06;
    --flicker-opacity: 0.025;
    --phosphor-bleed: 0px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg-0);
}

html,
body {
    margin: 0;
    padding: 0;
    color: var(--fg-0);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(80, 107, 138, 0.045) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 50% 110%,
            rgba(156, 65, 54, 0.04) 0%,
            transparent 55%
        ),
        transparent;
    overflow-x: hidden;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(
            ellipse 60% 40% at 100% 100%,
            rgba(181, 101, 29, 0.06),
            transparent 70%
        ),
        radial-gradient(
            ellipse 50% 35% at 0% 100%,
            rgba(139, 0, 0, 0.06),
            transparent 70%
        );
    animation: candle-breath 9s ease-in-out infinite;
    mix-blend-mode: screen;
}
@keyframes candle-breath {
    0%,
    100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

.blackwall-fixed {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--blackwall-intensity, 0.85);
}
.blackwall-fixed .blackwall-tint,
.blackwall-fixed .blackwall {
    position: absolute;
    inset: 0;
}

.blackwall {
    overflow: hidden;
    pointer-events: none;
}
.blackwall::before {
    content: "";
    position: absolute;
    inset: -10% -5%;
    background:
    /* fine red vertical pickets (the wall) */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 2px,
            rgba(156, 65, 54, 0.42) 2px,
            rgba(156, 65, 54, 0.42) 3px,
            transparent 3px,
            transparent 5px
        ),
        /* coarser red vertical bars, slightly offset feel */
        repeating-linear-gradient(
                90deg,
                transparent 0px,
                transparent 11px,
                rgba(90, 31, 23, 0.32) 11px,
                rgba(90, 31, 23, 0.32) 12px,
                transparent 12px,
                transparent 19px
            ),
        /* blue chromatic bleed - same picket pattern shifted */
        repeating-linear-gradient(
                90deg,
                transparent 0px,
                transparent 2px,
                rgba(80, 107, 138, 0.16) 2px,
                rgba(80, 107, 138, 0.16) 3px,
                transparent 3px,
                transparent 5px
            );
    background-position:
        0 0,
        0 0,
        1px 0; /* offset blue picket = RGB split */
    /* deep red void core */
    mask-image: radial-gradient(
        ellipse 70% 60% at 50% 45%,
        #000 0%,
        rgba(0, 0, 0, 0.85) 35%,
        rgba(0, 0, 0, 0.45) 60%,
        transparent 90%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 70% 60% at 50% 45%,
        #000 0%,
        rgba(0, 0, 0, 0.85) 35%,
        rgba(0, 0, 0, 0.45) 60%,
        transparent 90%
    );
    filter: contrast(1.02) saturate(0.9);
}
.blackwall::after {
    /* horizontal smear / glitch streak — sweeps slowly */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 28%,
        rgba(156, 65, 54, 0.1) 30%,
        transparent 33%,
        transparent 60%,
        rgba(80, 107, 138, 0.07) 62%,
        transparent 64%,
        transparent 100%
    );
    mix-blend-mode: screen;
    animation: wall-sweep 11s linear infinite;
}
@keyframes wall-sweep {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* a subtle red wash behind the wall to deepen the void */
.blackwall-tint {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 55% 50% at 50% 50%,
        rgba(90, 31, 23, 0.14) 0%,
        transparent 65%
    );
    pointer-events: none;
    z-index: 0;
}

::selection {
    background: var(--red);
    color: #000;
}
::-moz-selection {
    background: var(--red);
    color: #000;
}

a {
    color: var(--blue-bright);
    text-decoration: none;
    border-bottom: 1px dotted var(--blue);
}
a:hover {
    color: var(--red-bright);
    border-bottom-color: var(--red);
}
.kit,
.signal-row {
    border-bottom: none;
}
.kit:hover,
.signal-row:hover {
    color: inherit !important;
}
.kit:hover *,
.signal-row:hover * {
    color: inherit !important;
}

button {
    font-family: var(--mono);
    background: transparent;
    border: 1px solid var(--fg-3);
    color: var(--fg-0);
    cursor: pointer;
    padding: 6px 12px;
    font-size: 12px;
    letter-spacing: 0.04em;
}
button:hover {
    border-color: var(--red);
    color: var(--red-bright);
}

.crt-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    mix-blend-mode: normal;
}

.scanlines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, var(--scanline-opacity)) 3px,
        rgba(0, 0, 0, var(--scanline-opacity)) 3px
    );
    mix-blend-mode: multiply;
}

.flicker {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    animation: flicker 7s infinite;
}

@keyframes flicker {
    0%,
    100% {
        opacity: 0;
    }
    3% {
        opacity: var(--flicker-opacity);
    }
    3.5% {
        opacity: 0;
    }
    4% {
        opacity: calc(var(--flicker-opacity) * 0.5);
    }
    4.5% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    72% {
        opacity: var(--flicker-opacity);
    }
    72.4% {
        opacity: 0;
    }
}

.vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

.noise {
    position: absolute;
    inset: -50%;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    animation: noisepan 1.4s steps(6) infinite;
}
@keyframes noisepan {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-40px, -40px);
    }
}

.shell {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px 80px;
}

@media (max-width: 720px) {
    .shell {
        padding: 0 14px 60px;
    }
}

.status-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-0);
    border-bottom: 1px solid var(--fg-4);
    padding: 8px 32px;
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-2);
    font-weight: 500;
    flex-wrap: wrap;
}

.status-bar .pip {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--red);
    box-shadow: var(--red-glow);
    animation: pip-pulse 1.4s infinite;
    margin-right: 6px;
    vertical-align: middle;
}
.status-bar .pip.blue {
    background: var(--blue);
    box-shadow: var(--blue-glow);
}
.status-bar .pip.dim {
    background: var(--fg-2);
    box-shadow: none;
    animation: none;
}

@keyframes pip-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

.status-bar .seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.status-bar .seg .k {
    color: var(--fg-3);
}
.status-bar .seg .v {
    color: var(--fg-0);
    font-weight: 600;
}
.status-bar .seg .v.red {
    color: var(--red-bright);
    text-shadow: var(--red-glow);
}
.status-bar .seg .v.blue {
    color: var(--blue-bright);
    text-shadow: var(--blue-glow);
}
.status-bar .seg .v.blood {
    color: var(--blood-bright);
    text-shadow: var(--blood-glow);
}
.status-bar .spacer {
    flex: 1;
}

/* Cigarette ember in status bar — a tiny glowing tip with curling smoke */
.ember-seg {
    position: relative;
}
.ember-pip {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}
.ember-pip .ember-dot {
    position: absolute;
    left: 1px;
    top: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffb060 0%, #c4711a 55%, #6e3a0c 100%);
    box-shadow:
        0 0 4px rgba(255, 176, 96, 0.85),
        0 0 12px rgba(196, 113, 26, 0.65),
        0 0 22px rgba(139, 0, 0, 0.35);
    animation: ember-glow 3.2s ease-in-out infinite;
}
.ember-pip .ember-smoke {
    position: absolute;
    left: 4px;
    top: -2px;
    width: 8px;
    height: 12px;
    background: radial-gradient(
        ellipse at 50% 80%,
        rgba(200, 195, 185, 0.18) 0%,
        transparent 65%
    );
    animation: ember-smoke 4.5s ease-out infinite;
    pointer-events: none;
}
@keyframes ember-glow {
    0%,
    100% {
        box-shadow:
            0 0 4px rgba(255, 176, 96, 0.6),
            0 0 12px rgba(196, 113, 26, 0.4),
            0 0 22px rgba(139, 0, 0, 0.25);
        background: radial-gradient(
            circle,
            #d68a4a 0%,
            #a8552a 60%,
            #5a1f17 100%
        );
    }
    50% {
        box-shadow:
            0 0 6px rgba(255, 210, 140, 0.95),
            0 0 18px rgba(214, 138, 74, 0.7),
            0 0 30px rgba(156, 65, 54, 0.45);
        background: radial-gradient(
            circle,
            #ffd28e 0%,
            #d6884a 50%,
            #6e3a0c 100%
        );
    }
}
@keyframes ember-smoke {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-18px) scaleX(0.4);
        opacity: 0;
    }
}

.boot-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.boot-bg .boot-output {
    margin: 0;
    padding: 24px 32px;
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(180, 180, 180, 0.32);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.2);
    opacity: var(--boot-bg-opacity, 0.55);
    white-space: pre;
    min-height: 0;
    /* Stick to bottom so newly added lines push older ones up the page */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}
.boot-bg .boot-output .ok {
    color: rgba(76, 170, 106, 0.42);
}
.boot-bg .boot-output .warn {
    color: rgba(163, 122, 43, 0.55);
}
.boot-bg .boot-output .err {
    color: rgba(186, 105, 92, 0.7);
}
.boot-bg .boot-output .blue {
    color: rgba(125, 145, 175, 0.6);
}
.boot-bg .boot-output .dim {
    color: rgba(110, 110, 110, 0.35);
}
.boot-bg .boot-output .em {
    color: rgba(220, 220, 220, 0.55);
}
.boot-bg .boot-output .boot-line {
    animation: line-in 240ms ease-out;
}
@keyframes line-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-fg-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.hero {
    position: relative;
    padding: 40px 0 24px;
    isolation: isolate;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero > * {
    position: relative;
    z-index: 2;
}

.boot-output {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg-2);
    white-space: pre;
    overflow: hidden;
    margin: 0;
}
.boot-output .ok {
    color: #4caa6a;
}
.boot-output .warn {
    color: var(--amber);
}
.boot-output .err {
    color: var(--red-bright);
    text-shadow: var(--red-glow);
}
.boot-output .blue {
    color: var(--blue-bright);
}
.boot-output .dim {
    color: var(--fg-3);
}
.boot-output .em {
    color: var(--fg-0);
    font-weight: 600;
}
.boot-line {
    display: block;
}

.cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--fg-0);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
    0%,
    50% {
        opacity: 1;
    }
    50.01%,
    100% {
        opacity: 0;
    }
}

.title-block {
    position: relative;
    padding: 18px 0 6px;
}

.title-orig {
    position: relative;
    isolation: isolate;
}
.title-orig .t-leaded,
.title-orig .t-spunk {
    position: relative;
    animation: signal-jitter 7s steps(40, end) infinite;
}
.title-orig .t-spunk {
    animation-delay: 0.3s;
}
@keyframes signal-jitter {
    0%,
    60%,
    100% {
        transform: translateX(0);
        clip-path: none;
    }
    62% {
        transform: translateX(2px);
        clip-path: polygon(
            0 0,
            100% 0,
            100% 30%,
            0 30%,
            0 32%,
            100% 32%,
            100% 100%,
            0 100%
        );
    }
    63% {
        transform: translateX(-2px);
        clip-path: polygon(
            0 0,
            100% 0,
            100% 70%,
            0 70%,
            0 72%,
            100% 72%,
            100% 100%,
            0 100%
        );
    }
    64% {
        transform: translateX(0);
        clip-path: none;
    }
    84% {
        transform: translateX(-3px);
        filter: blur(0.4px);
    }
    85% {
        transform: translateX(2px);
        filter: none;
    }
    86% {
        transform: translateX(0);
    }
}
/* Periodic horizontal "tear" — a row of static across the title */
.title-orig::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        180deg,
        transparent 0 14px,
        rgba(181, 101, 29, 0.04) 14px 15px
    );
    mix-blend-mode: screen;
    animation: tear-band 11s steps(1) infinite;
    --tear-y: 25%;
}
@keyframes tear-band {
    0%,
    33% {
        opacity: 0;
    }
    34% {
        opacity: 0.9;
        transform: translateY(-5px);
    }
    35% {
        opacity: 0;
    }
    68% {
        opacity: 0;
    }
    69% {
        opacity: 0.9;
        transform: translateY(35px);
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.title-orig {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    line-height: 1;
}
.title-orig pre {
    margin: 0;
    white-space: pre;
    font-size: clamp(8px, 1.4vw, 18px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
}
.title-orig .t-leaded {
    color: #7a7e87;
    text-shadow:
        -1px 0 0 rgba(139, 0, 0, 0.45),
        /* blood ghost left */ 1px 0 0 rgba(80, 107, 138, 0.3),
        /* steel slate ghost right */ 0 1px 0 rgba(0, 0, 0, 0.85),
        0 2px 10px rgba(0, 0, 0, 0.6);
}
.title-orig .t-spunk {
    color: #c4a090; /* flesh — warm, carnal */
    text-shadow:
        -1px 0 0 rgba(139, 0, 0, 0.35),
        1px 0 0 rgba(80, 107, 138, 0.22),
        0 1px 0 rgba(0, 0, 0, 0.85),
        0 3px 12px rgba(0, 0, 0, 0.7);
}
/* Drip rows pool and darken: flesh → blood rose → arterial */
.title-orig .drip-a {
    color: #c09080;
} /* flesh */
.title-orig .drip-b {
    color: #922020;
} /* blood mid */
.title-orig .drip-c {
    color: #6b0000;
} /* arterial pool */
.title-orig .t-drip {
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.7),
        0 2px 8px rgba(0, 0, 0, 0.5);
}

/* LEADED — heavy metallic lead grey. Pencil-graphite. Cool undertone. */
.title-ascii .leaded {
    color: #5b5e64;
    text-shadow:
        0 -1px 0 rgba(150, 155, 165, 0.4),
        /* top highlight */ 0 1px 0 rgba(0, 0, 0, 0.85),
        /* drop shadow */ 0 0 1px rgba(40, 42, 46, 0.9),
        /* edge density */ 0 2px 6px rgba(0, 0, 0, 0.7),
        /* ambient sink */ 0 0 12px rgba(91, 94, 100, 0.18); /* faint cool aura */
    filter: contrast(1.05);
}
.title-ascii .leaded.drip {
    color: #3a3d44;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.title-ascii .spunk {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image:
    /* glossy top highlight */
        linear-gradient(
            180deg,
            rgba(255, 253, 248, 0.95) 0%,
            rgba(244, 238, 222, 0.85) 22%,
            rgba(232, 224, 200, 0.85) 55%,
            rgba(208, 198, 172, 0.85) 100%
        ),
        /* warm cream base */
        radial-gradient(
                ellipse 80% 120% at 35% -10%,
                rgba(255, 255, 252, 0.55),
                transparent 60%
            );
    background-size:
        100% 100%,
        100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: normal, screen;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='200'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.022' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -0.08'/></filter><rect width='800' height='200' filter='url(%23m)'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='200'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.022' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -0.08'/></filter><rect width='800' height='200' filter='url(%23m)'/></svg>");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7))
        drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55))
        drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 14px rgba(244, 232, 200, 0.1));
}
.title-ascii .spunk.drip {
    color: rgba(225, 215, 195, 0.62);
    -webkit-text-fill-color: rgba(225, 215, 195, 0.62);
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.title-ascii .spunk.drip-faint {
    color: rgba(180, 168, 148, 0.4);
    -webkit-text-fill-color: rgba(180, 168, 148, 0.4);
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

/* Keep .red / .blue available for any other ASCII bits that still use them */
.title-ascii .red {
    color: var(--red-bright);
    text-shadow:
        0 0 6px var(--red),
        0 0 22px rgba(156, 65, 54, 0.45);
}
.title-ascii .blue {
    color: var(--blue-bright);
    text-shadow:
        0 0 6px var(--blue),
        0 0 22px rgba(80, 107, 138, 0.45);
}

@keyframes chroma-jitter {
    0%,
    96%,
    100% {
        filter: none;
    }
    96.5% {
        filter: blur(0.4px) saturate(1.3);
        transform: translateX(1px);
    }
    97% {
        filter: none;
        transform: translateX(-1px);
    }
    97.5% {
        transform: translateX(0);
    }
}

/* Keep .red / .blue available for any other ASCII bits that still use them */
.title-ascii .red {
    color: var(--red-bright);
    text-shadow:
        0 0 6px var(--red),
        0 0 22px rgba(156, 65, 54, 0.45);
}
.title-ascii .blue {
    color: var(--blue-bright);
    text-shadow:
        0 0 6px var(--blue),
        0 0 22px rgba(80, 107, 138, 0.45);
}

@keyframes chroma-jitter {
    0%,
    96%,
    100% {
        filter: none;
    }
    96.5% {
        filter: blur(0.4px) saturate(1.3);
        transform: translateX(1px);
    }
    97% {
        filter: none;
        transform: translateX(-1px);
    }
    97.5% {
        transform: translateX(0);
    }
}

.title-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.5em;
    color: var(--fg-2);
    text-transform: uppercase;
    margin: 16px 0 0;
    display: flex;
    gap: 10px;
    align-items: center;
}
.title-tag::before,
.title-tag::after {
    content: "";
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        var(--fg-3) 0 4px,
        transparent 4px 8px
    );
}

.id-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 28px;
    border: 1px solid var(--fg-4);
}
.id-grid > div {
    padding: 12px 14px;
    border-right: 1px solid var(--fg-4);
    font-size: 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.id-grid > div:last-child {
    border-right: 0;
}
.id-grid .k {
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
}
.id-grid .v {
    color: var(--fg-0);
    font-weight: 600;
    font-size: 13px;
}
.id-grid .v.red {
    color: var(--red-bright);
}
.id-grid .v.blue {
    color: var(--blue-bright);
}
.id-grid .pronoun {
    color: var(--fg-2);
    font-weight: 400;
    font-style: italic;
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

/* Side card — femme/occult persona variant */
.side-card.femme {
    border-color: rgba(139, 0, 0, 0.4);
    background:
        linear-gradient(180deg, rgba(139, 0, 0, 0.05), transparent), var(--bg-0);
}
.side-card.femme .label {
    color: var(--flesh-warm);
    letter-spacing: 0.12em;
}

/* <em> tag — occult accent in manifesto, display italic flesh */
.manifesto-file .lines em {
    color: var(--flesh-warm);
    font-weight: 600;
}

@media (max-width: 720px) {
    .id-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .id-grid > div:nth-child(2) {
        border-right: 0;
    }
    .id-grid > div:nth-child(1),
    .id-grid > div:nth-child(2) {
        border-bottom: 1px solid var(--fg-4);
    }
}

.hero-handle {
    margin-top: 20px;
    text-align: right;
    font-family: var(--mono);
    font-size: 13px;
}
.hh-k {
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
}
.hh-v {
    color: var(--red-bright);
    font-weight: 600;
}
.hh-pronoun {
    color: var(--fg-2);
    font-weight: 400;
    font-size: 11.5px;
}

/* ===========================================================
   SECTIONS
   =========================================================== */
.section {
    padding: 56px 0 28px;
    position: relative;
}

.section-head {
    display: flex;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.section-head .marker {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--red);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-shadow: var(--red-glow);
}
.section-head .marker.blue {
    color: var(--blue);
    text-shadow: var(--blue-glow);
}

.section-head h2 {
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--fg-0);
}

.section-head .sub {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: auto;
}

/* ASCII section divider, used as decorative line */
.ascii-rule {
    font-family: var(--mono);
    color: var(--fg-3);
    font-size: 12px;
    line-height: 1;
    white-space: pre;
    overflow: hidden;
    user-select: none;
    margin: 0 0 24px;
}

/* Vertical-bar wall divider — between sections */
.wall-divider {
    position: relative;
    height: 24px;
    margin: 0 -32px;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 4px,
            rgba(156, 65, 54, 0.28) 4px 5px,
            transparent 5px 16px
        ),
        linear-gradient(
            180deg,
            transparent,
            rgba(156, 65, 54, 0.03),
            transparent
        );
    mask-image: linear-gradient(
        180deg,
        transparent,
        #000 30%,
        #000 70%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent,
        #000 30%,
        #000 70%,
        transparent
    );
    opacity: var(--blackwall-intensity, 0.85);
}
.ascii-rule .red {
    color: var(--red);
}
.ascii-rule .blue {
    color: var(--blue);
}

/* ===========================================================
   MANIFESTO
   =========================================================== */
.manifesto {
    display: grid;
    grid-template-columns: 1fr;
}

.manifesto-inner {
    display: flex;
    min-width: 0;
}
.manifesto-inner .body {
    flex: 1;
    min-width: 0;
}

.manifest-art {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 32px;
    overflow: hidden;
    width: 360px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.manifest-art pre {
    margin: 0;
    font-size: 4.5px;
    line-height: 1.15;
    color: var(--flesh);
    text-shadow: 0 0 8px rgba(139, 0, 0, 0.35);
    user-select: none;
    white-space: pre;
    overflow: hidden;
}

@media (max-width: 820px) {
    .manifesto {
        grid-template-columns: 1fr;
    }
    .manifest-art {
        display: none;
    }
}

.manifesto-file {
    background:
        linear-gradient(
            180deg,
            rgba(156, 65, 54, 0.03),
            rgba(80, 107, 138, 0.03)
        ),
        rgba(0, 0, 0, 0.6);
    padding: 0;
}
.manifesto-file .file-head {
    padding: 8px 14px;
    border-bottom: 1px solid var(--fg-4);
    font-size: 11px;
    color: var(--fg-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.012);
}
.manifesto-file .file-head .path {
    color: var(--fg-0);
    font-weight: 600;
}
.manifesto-file .body {
    display: grid;
    grid-template-columns: 44px 1fr;
    font-size: 13.5px;
    line-height: 1.75;
}
.manifesto-file .gutter {
    padding: 12px 8px 12px 12px;
    text-align: right;
    color: var(--fg-3);
    border-right: 1px solid var(--fg-4);
    user-select: none;
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.3);
}
.manifesto-file .lines {
    padding: 12px 16px;
    color: var(--fg-1);
    white-space: pre-wrap;
    word-break: break-word;
}
.manifesto-file .lines b {
    color: var(--red-bright);
    font-weight: 600;
}
.manifesto-file .lines i {
    color: var(--blue-bright);
    font-style: normal;
    font-weight: 600;
}
.manifesto-file .lines s {
    color: var(--fg-3);
    text-decoration: line-through;
}

.manifesto-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.side-card {
    border: 1px solid var(--fg-4);
    padding: 14px 16px;
}
.side-card.red {
    border-color: rgba(156, 65, 54, 0.45);
}
.side-card.blue {
    border-color: rgba(80, 107, 138, 0.45);
}
.side-card .label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 8px;
}
.side-card.red .label {
    color: var(--red);
}
.side-card.blue .label {
    color: var(--blue);
}
.side-card .value {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--fg-0);
    line-height: 1.5;
}
.side-card .bar {
    height: 4px;
    margin-top: 10px;
    background: var(--fg-4);
    position: relative;
    overflow: hidden;
}
.side-card .bar > i {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--fg-0);
}
.side-card.red .bar > i {
    background: var(--red);
    box-shadow: var(--red-glow);
}
.side-card.blue .bar > i {
    background: var(--blue);
    box-shadow: var(--blue-glow);
}

/* ===========================================================
   THREAT MATRIX
   =========================================================== */
.matrix-wrap {
    border: 1px solid var(--fg-4);
    overflow-x: auto;
    background: var(--bg-0);
}
.matrix {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    min-width: 1050px;
}
.matrix .col-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--fg-4);
    border-right: 1px solid var(--fg-4);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.matrix .col-head:last-child {
    border-right: 0;
}
.matrix .col-head .ph {
    color: var(--red);
    font-weight: 700;
    font-size: 11px;
}
.matrix .col-head .ph.blue {
    color: var(--blue);
}
.matrix .cell {
    border-right: 1px solid var(--fg-4);
    border-bottom: 1px solid var(--fg-4);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--fg-1);
    cursor: pointer;
    position: relative;
    transition:
        background 0.12s,
        color 0.12s;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-0);
}
.matrix .cell:hover {
    background: rgba(255, 255, 255, 0.025);
    color: var(--fg-0);
}
.matrix .cell.r {
    border-left: 2px solid transparent;
}
.matrix .cell.r.lvl-1 {
    border-left-color: rgba(156, 65, 54, 0.25);
}
.matrix .cell.r.lvl-2 {
    border-left-color: rgba(156, 65, 54, 0.6);
}
.matrix .cell.r.lvl-3 {
    border-left-color: var(--red);
    background: rgba(156, 65, 54, 0.06);
}
.matrix .cell.r.lvl-3:hover {
    background: rgba(156, 65, 54, 0.12);
}
.matrix .cell.b {
    border-left: 2px solid transparent;
}
.matrix .cell.b.lvl-1 {
    border-left-color: rgba(80, 107, 138, 0.25);
}
.matrix .cell.b.lvl-2 {
    border-left-color: rgba(80, 107, 138, 0.6);
}
.matrix .cell.b.lvl-3 {
    border-left-color: var(--blue);
    background: rgba(80, 107, 138, 0.06);
}
.matrix .cell.b.lvl-3:hover {
    background: rgba(80, 107, 138, 0.12);
}
.matrix .cell .id {
    font-size: 9.5px;
    color: var(--fg-3);
    letter-spacing: 0.05em;
}
.matrix .cell .name {
    font-weight: 500;
    letter-spacing: -0.005em;
    color: inherit;
}
.matrix .cell .blip {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
}
.matrix .cell.r .blip {
    background: var(--red);
    box-shadow: var(--red-glow);
}
.matrix .cell.b .blip {
    background: var(--blue);
    box-shadow: var(--blue-glow);
}
.matrix .cell.lvl-0 .blip {
    opacity: 0.3;
    box-shadow: none;
}
.matrix .cell.lvl-1 .blip {
    opacity: 0.55;
}

.matrix-legend {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 12px;
    font-size: 10.5px;
    color: var(--fg-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-wrap: wrap;
}
.matrix-legend .swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    vertical-align: middle;
}

/* ===========================================================
   TOOLKITS — repo catalogue
   =========================================================== */
.kits-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.kits-meta .k {
    color: var(--fg-2);
}
.kits-meta .k.red {
    color: var(--red-bright);
}
.kits-meta .k.blue {
    color: var(--blue-bright);
}

.kits {
    display: flex;
    flex-direction: column;
}
.kit {
    border-bottom: 1px solid var(--fg-4);
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--fg-0);
    text-decoration: none;
    display: grid;
    grid-template-columns: 200px 1fr auto 130px;
    gap: 16px;
    align-items: center;
    transition: background 0.15s;
}
.kit:last-child {
    border-bottom: 0;
}
.kit.red,
.kit.blue {
    border-left: 2px solid rgba(156, 65, 54, 0.5);
}

.kit-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.kit .team {
    display: none;
}
.kit .name {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kit .name .owner {
    color: var(--fg-3);
}
.kit .name .repo {
    color: var(--fg-1);
}
.kit .ext {
    display: none;
}

.kit-desc {
    margin: 0;
    font-size: 12px;
    color: var(--fg-2);
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kit-tags {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}
.kit .tag {
    font-size: 10px;
    color: var(--fg-3);
    border: 1px dashed var(--fg-4);
    padding: 1px 5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.kit-foot {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 10.5px;
    color: var(--fg-2);
    letter-spacing: 0.04em;
    justify-content: flex-end;
}
.kit-foot .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kit-foot .lang {
    color: var(--fg-2);
    font-weight: 500;
}
.kit-foot .stat {
    font-variant-numeric: tabular-nums;
}
.kit-foot .upd {
    color: var(--fg-3);
}

@media (max-width: 820px) {
    .kit {
        grid-template-columns: 1fr auto;
    }
    .kit-desc,
    .kit-tags {
        display: none;
    }
}

/* ===========================================================
   DOCKET — disclosures table
   =========================================================== */
.docket-meta {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.docket-meta .k.red {
    color: var(--red-bright);
}

.docket {
    border: 1px solid var(--fg-4);
    background: var(--bg-0);
    font-family: var(--mono);
    font-size: 12.5px;
    overflow: hidden;
}
.docket-row {
    display: grid;
    grid-template-columns: 150px 1.6fr 1.1fr 70px 110px 100px;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--fg-4);
    transition: background 0.1s;
    cursor: default;
}
.docket-row.head {
    background: rgba(255, 255, 255, 0.02);
    color: var(--fg-3);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
}
.docket-row:not(.head):hover {
    background: rgba(255, 255, 255, 0.022);
}
.docket-row:last-child {
    border-bottom: 0;
}
.docket-row .id {
    color: var(--fg-0);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.docket-row.sev-critical .id {
    color: var(--red-bright);
    text-shadow: 0 0 3px rgba(156, 65, 54, 0.35);
}
.docket-row .vp .vendor {
    color: var(--fg-0);
    font-weight: 500;
    display: block;
}
.docket-row .vp small {
    color: var(--fg-3);
    font-size: 11px;
}
.docket-row .cls {
    color: var(--fg-1);
}
.docket-row .cvss {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border: 1px solid var(--fg-4);
    text-align: center;
    width: max-content;
    font-size: 12px;
}
.docket-row .cvss.sev-critical {
    color: var(--red-bright);
    border-color: var(--red);
    background: rgba(156, 65, 54, 0.06);
}
.docket-row .cvss.sev-high {
    color: #a87340;
    border-color: rgba(168, 115, 64, 0.55);
}
.docket-row .cvss.sev-medium {
    color: var(--amber);
    border-color: rgba(163, 122, 43, 0.45);
}
.docket-row .status {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.docket-row .status.sfixed {
    color: #4caa6a;
}
.docket-row .status.sembargoed {
    color: var(--amber);
}
.docket-row .status.sdisputed {
    color: var(--fg-2);
}
.docket-row .date {
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}

@media (max-width: 900px) {
    .docket-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 4px;
    }
    .docket-row.head {
        display: none;
    }
    .docket-row .cvss {
        justify-self: start;
    }
}

/* ===========================================================
   TRANSMISSIONS — empty log placeholder
   =========================================================== */
.transmissions {
    border: 1px solid var(--fg-4);
    background: var(--bg-0);
    font-family: var(--mono);
}
.trx-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--fg-4);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-2);
    background: rgba(255, 255, 255, 0.012);
}
.trx-head .path {
    color: var(--fg-0);
    font-weight: 600;
}
.trx-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--amber-blood-bright);
}
.trx-status .pip {
    width: 7px;
    height: 7px;
    background: var(--amber-blood);
    box-shadow: var(--amber-glow);
    animation: pip-pulse 1.8s infinite;
}
.trx-body {
    margin: 0;
    padding: 20px 22px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--fg-1);
    white-space: pre-wrap;
    min-height: 240px;
}
.trx-body .dim {
    color: var(--fg-3);
}
.trx-body .amber {
    color: var(--amber-blood-bright);
}
.cursor.inline {
    display: inline-block;
    vertical-align: text-bottom;
}

/* ===========================================================
   SIGNAL — comms channels
   =========================================================== */
.signal {
    background: transparent;
}
.signal-row {
    display: grid;
    grid-template-columns: 24px 90px 1fr 110px;
    gap: 14px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--fg-4);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--fg-1);
    text-decoration: none;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.18s;
}
.signal-row .pip-sig {
    width: 9px;
    height: 9px;
    justify-self: center;
}
.signal-row .pip-sig.pip-red {
    background: var(--red);
    box-shadow: var(--red-glow);
    animation: pip-pulse 1.4s infinite;
}
.signal-row .pip-sig.pip-blue {
    background: var(--blue);
    box-shadow: var(--blue-glow);
    animation: pip-pulse 1.8s infinite;
}
.signal-row .pip-sig.pip-amber {
    background: var(--amber-blood);
    box-shadow: var(--amber-glow);
    animation: pip-pulse 2.2s infinite;
}
.signal-row .ch-name {
    color: var(--fg-0);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11.5px;
}
.signal-row .ch-handle {
    color: var(--fg-1);
    font-size: 13px;
}
.signal-row .ch-status {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
}
.signal-row .ch-status.s-read {
    color: var(--amber-blood-bright);
}
.signal-row .ch-status.s-active {
    color: #4caa6a;
}
.signal-row .ch-status.s-online {
    color: #4caa6a;
}
.signal-row .ch-status.s-standby {
    color: var(--amber-blood);
}
.signal-row .ch-status.s-gated {
    color: var(--red-bright);
}
.signal-row:last-of-type {
    border-bottom: 0;
}
.signal-foot {
    padding: 12px 18px;
    border-top: 1px dashed var(--fg-4);
    color: var(--fg-2);
    font-size: 12px;
    font-style: italic;
}

@media (max-width: 720px) {
    .signal-row {
        grid-template-columns: 20px 70px 1fr;
    }
    .signal-row .ch-status {
        display: none;
    }
}

/* ===========================================================
   RESTRICTED — 18+ gate
   =========================================================== */
.section-head .marker.amber {
    color: var(--blood-bright);
    text-shadow: var(--blood-glow);
}
.section-restricted .section-head h2 {
    color: var(--blood-bright);
    text-shadow: var(--blood-glow);
}
.rs-italic {
    color: var(--flesh-warm);
    font-weight: 600;
}

/* ===========================================================
   AFTER DARK — atmosphere panel
   =========================================================== */
.section-head .marker.wine {
    color: var(--wine-bright);
    text-shadow: var(--wine-glow);
}
.section-afterdark .section-head h2 {
    color: var(--nude-warm);
    text-shadow: 0 0 12px rgba(200, 153, 147, 0.25);
    font-family: var(--display-italic);
    letter-spacing: 0.04em;
    font-weight: 400;
    font-size: 36px;
}
.section-afterdark .section-head .sub {
    font-style: italic;
    color: var(--nude);
}

.afterdark {
    border: 1px solid rgba(110, 37, 53, 0.45);
    background:
        radial-gradient(
            ellipse 60% 60% at 100% 100%,
            rgba(110, 37, 53, 0.1),
            transparent 75%
        ),
        radial-gradient(
            ellipse 80% 50% at 0% 0%,
            rgba(181, 101, 29, 0.05),
            transparent 70%
        ),
        var(--bg-0);
    padding: 30px 36px 28px;
    position: relative;
    overflow: hidden;
}
.afterdark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 38%,
        rgba(200, 153, 147, 0.04) 40%,
        transparent 44%,
        transparent 100%
    );
    pointer-events: none;
}

.ad-ember {
    position: absolute;
    top: 22px;
    right: 28px;
    width: 14px;
    height: 30px;
    pointer-events: none;
}
.ad-ember .ember-tip {
    position: absolute;
    left: 4px;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffc680 0%, #c4711a 55%, #6e3a0c 100%);
    box-shadow:
        0 0 6px rgba(255, 198, 128, 0.95),
        0 0 18px rgba(196, 113, 26, 0.7),
        0 0 32px rgba(110, 37, 53, 0.4);
    animation: ember-glow 3.2s ease-in-out infinite;
}
.ad-ember .ember-trail {
    position: absolute;
    left: 6px;
    bottom: 6px;
    width: 2px;
    height: 28px;
    background: linear-gradient(180deg, rgba(220, 215, 205, 0.18), transparent);
    filter: blur(2px);
    animation: ember-trail 4.5s ease-out infinite;
    transform-origin: bottom;
}
@keyframes ember-trail {
    0% {
        transform: translateY(4px) scaleY(0.6) rotate(-2deg);
        opacity: 0;
    }
    25% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-30px) scaleY(1.3) rotate(3deg);
        opacity: 0;
    }
}

.ad-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
.ad-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(110, 37, 53, 0.18);
}
.ad-row:last-child {
    border-bottom: 0;
}
.ad-k {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wine-bright);
    font-weight: 600;
}
.ad-dot {
    display: none;
}
.ad-v {
    color: var(--fg-0);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.005em;
}
.ad-v.italic {
    font-family: var(--display-italic);
    font-style: italic;
    color: var(--nude-warm);
    font-size: 17px;
    letter-spacing: 0.01em;
}

.ad-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed rgba(110, 37, 53, 0.3);
    text-align: right;
    font-family: var(--display-italic);
    font-style: italic;
    font-size: 18px;
    color: var(--nude-warm);
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}
.ad-foot .quote-mark {
    color: var(--wine);
    font-size: 24px;
    vertical-align: -2px;
    margin: 0 4px;
}
.ad-foot .quote {
    color: var(--nude-warm);
}

@media (max-width: 720px) {
    .afterdark {
        padding: 22px 18px 18px;
    }
    .ad-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ad-ember {
        top: 12px;
        right: 14px;
    }
}

/* ===========================================================
   BLOOD / OCCULT FEMME
   =========================================================== */
.section-head .marker.blood {
    color: var(--blood-bright);
    text-shadow: var(--blood-glow);
}

/* Wax seal / occult sigil in signoff */
.signoff-art .wax {
    color: var(--wine-bright);
    text-shadow:
        0 0 3px rgba(156, 58, 79, 0.65),
        0 0 12px rgba(110, 37, 53, 0.5);
    filter: contrast(1.1);
}

/* Occult femme accent */
.sigil-text {
    color: var(--flesh-warm);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.restricted {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(139, 0, 0, 0.1),
            transparent 70%
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(139, 0, 0, 0.05),
            transparent 60%
        ),
        var(--bg-0);
    padding: 0;
    position: relative;
}
.rs-rule {
    height: 8px;
    display: flex;
    align-items: center;
    padding: 0 18px;
}
.rs-rule .bar {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        var(--blood) 0 8px,
        transparent 8px 12px
    );
    box-shadow: 0 0 8px rgba(139, 0, 0, 0.55);
}
.rs-body {
    margin: 0;
    padding: 20px 22px 8px;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.85;
    color: var(--fg-0);
    white-space: pre-wrap;
}
.rs-prompt {
    color: var(--blood-bright);
    font-weight: 700;
}

.rs-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 8px 22px 18px;
    padding: 12px 20px;
    border: 1px solid var(--blood);
    background: rgba(139, 0, 0, 0.1);
    color: var(--flesh-warm);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    transition:
        background 0.12s,
        color 0.12s,
        box-shadow 0.12s;
    cursor: pointer;
}
.rs-button:hover {
    background: rgba(139, 0, 0, 0.22);
    color: #ffe8e0;
    box-shadow:
        0 0 18px rgba(139, 0, 0, 0.5),
        inset 0 0 14px rgba(139, 0, 0, 0.18);
}
.rs-button .rs-tag {
    color: var(--blood-bright);
    font-weight: 700;
}
.rs-button .rs-arr {
    font-size: 18px;
}
.rs-foot {
    padding: 4px 22px 18px;
    font-style: italic;
    color: var(--fg-2);
    font-size: 12.5px;
}

.rs-inner {
    display: grid;
    grid-template-columns: 1fr 420px;
}
.rs-left {
    display: flex;
    flex-direction: column;
}
.rs-art {
    padding: 28px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 0, 0, 0.03);
}
.rs-art pre {
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
    color: var(--flesh);
    text-shadow: 0 0 8px rgba(139, 0, 0, 0.35);
    user-select: none;
    white-space: pre;
}

@media (max-width: 820px) {
    .rs-inner {
        grid-template-columns: 1fr;
    }
    .rs-art {
        border-top: 1px solid rgba(139, 0, 0, 0.35);
    }
}

/* ===========================================================
   REACH — rewritten
   =========================================================== */
.reach {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    background: rgba(0, 0, 0, 0.55);
}
@media (max-width: 820px) {
    .reach {
        grid-template-columns: 1fr;
    }
}

.reach-statement {
    padding: 22px 26px;
    border-right: 1px solid var(--fg-4);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--fg-1);
}
.reach-statement p {
    margin: 0 0 14px;
}
.reach-statement p:last-child {
    margin-bottom: 0;
}
.reach-lead {
    color: var(--fg-0);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.01em;
    display: block;
    margin-bottom: 4px;
}
.reach-fine {
    color: var(--fg-2);
    font-size: 12.5px;
    border-top: 1px dashed var(--fg-4);
    padding-top: 12px;
    font-style: italic;
}

.reach-side {
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reach-block {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px dashed var(--fg-4);
}
.reach-block:last-of-type {
    border-bottom: 0;
}
.reach-block .reach-k {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.reach-block .reach-v {
    color: var(--fg-0);
    font-size: 13px;
}
.reach-block .reach-v.amber {
    color: var(--amber-blood-bright);
    font-weight: 500;
}
.reach-side .mail-link {
    margin-top: 14px;
}
@media (max-width: 820px) {
    .reach-statement {
        border-right: 0;
        border-bottom: 1px solid var(--fg-4);
    }
}
.hire-row {
    display: flex;
    gap: 14px;
    align-items: center;
}
.pip-lg {
    width: 14px;
    height: 14px;
    background: var(--blue);
    box-shadow: var(--blue-glow);
    animation: pip-pulse 1.4s infinite;
    flex-shrink: 0;
}
.pip-lg.red {
    background: var(--red);
    box-shadow: var(--red-glow);
}
.hire-state {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--blue-bright);
    text-shadow: var(--blue-glow);
    line-height: 1;
}
.hire-sub {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-2);
    margin-top: 4px;
}
.hire-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--fg-1);
}
.hire-list li {
    padding-left: 14px;
    position: relative;
}
.hire-list li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--blue);
}
.hire-list li .b {
    color: var(--fg-0);
    font-weight: 600;
}
.hire-foot {
    margin-top: 6px;
    border-top: 1px dashed var(--fg-4);
    padding-top: 10px;
    font-size: 11px;
    color: var(--fg-2);
    font-style: italic;
}

.mail-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mail-link {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--fg-0);
    text-decoration: none;
    border-bottom: 1px dashed var(--fg-3);
    padding-bottom: 6px;
    letter-spacing: 0.01em;
    word-break: break-all;
    transition:
        color 0.1s,
        border-color 0.1s;
}
.mail-link:hover {
    color: var(--red-bright);
    border-bottom-color: var(--red);
    text-shadow: var(--red-glow);
}
.mail-hint {
    font-size: 12px;
    color: var(--fg-2);
}
.ops {
    border: 1px solid var(--fg-4);
    font-family: var(--mono);
    font-size: 12.5px;
    background: var(--bg-0);
    overflow: hidden;
}
.ops-head {
    padding: 8px 14px;
    border-bottom: 1px solid var(--fg-4);
    background: rgba(80, 107, 138, 0.04);
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-2);
    flex-wrap: wrap;
}
.ops-head .meta {
    color: var(--fg-0);
    font-weight: 600;
}
.ops-head .meta.red {
    color: var(--red-bright);
}
.ops-head .meta.blue {
    color: var(--blue-bright);
}

.ops-row {
    display: grid;
    grid-template-columns: 70px 90px 90px 1fr 120px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--fg-4);
    cursor: pointer;
    gap: 12px;
    transition: background 0.1s;
}
.ops-row.head {
    background: rgba(255, 255, 255, 0.02);
    color: var(--fg-3);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: default;
    padding: 6px 14px;
}
.ops-row:not(.head):hover {
    background: rgba(255, 255, 255, 0.025);
}
.ops-row .pid {
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
}
.ops-row .team {
    font-size: 10px;
    padding: 2px 7px;
    border: 1px solid;
    letter-spacing: 0.1em;
    text-align: center;
    font-weight: 600;
    width: max-content;
}
.ops-row .team.red {
    color: var(--red-bright);
    border-color: var(--red);
}
.ops-row .team.blue {
    color: var(--blue-bright);
    border-color: var(--blue);
}
.ops-row .state {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}
.ops-row .state.run {
    color: #4caa6a;
}
.ops-row .state.idle {
    color: var(--fg-2);
}
.ops-row .state.alert {
    color: var(--red-bright);
    text-shadow: var(--red-glow);
}
.ops-row .name {
    color: var(--fg-0);
    font-weight: 500;
}
.ops-row .name small {
    color: var(--fg-2);
    font-weight: 400;
    display: block;
    font-size: 11px;
    margin-top: 2px;
}
.ops-row .load {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--fg-2);
}
.ops-row .load .bar {
    flex: 1;
    height: 6px;
    background: var(--fg-4);
    position: relative;
}
.ops-row .load .bar > i {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--fg-1);
}
.ops-row .load.red .bar > i {
    background: var(--red);
}
.ops-row .load.blue .bar > i {
    background: var(--blue);
}
.ops-row:last-child {
    border-bottom: 0;
}

@media (max-width: 820px) {
    .ops-row {
        grid-template-columns: 60px 80px 1fr;
    }
    .ops-row .state,
    .ops-row .load {
        display: none;
    }
    .ops-row.head {
        display: none;
    }
}

/* ===========================================================
   CONTACT / FOOTER
   =========================================================== */
.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
@media (max-width: 720px) {
    .contact {
        grid-template-columns: 1fr;
    }
}
.contact > div {
    padding: 20px 22px;
    border-right: 1px solid var(--fg-4);
}
.contact > div:last-child {
    border-right: 0;
}
@media (max-width: 720px) {
    .contact > div {
        border-right: 0;
        border-bottom: 1px solid var(--fg-4);
    }
    .contact > div:last-child {
        border-bottom: 0;
    }
}
.contact .label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 12px;
}
.contact .channels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}
.contact .channels .row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    align-items: center;
}
.contact .channels .row .k {
    color: var(--fg-3);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.contact .channels .row .v {
    color: var(--fg-0);
    font-weight: 500;
}
.contact .pgp {
    font-size: 10px;
    color: var(--fg-2);
    word-break: break-all;
    line-height: 1.5;
    margin-top: 10px;
    border-top: 1px dashed var(--fg-4);
    padding-top: 10px;
}

.signoff {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px dashed var(--fg-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}
.signoff pre {
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    color: var(--fg-3);
}
.signoff pre .r {
    color: var(--red);
}
.signoff pre .b {
    color: var(--blue);
}
.signoff-socials {
    display: flex;
    align-items: center;
    gap: 18px;
}
.signoff-socials a {
    font-size: 20px;
    color: var(--fg-2);
    border-bottom: none;
    text-decoration: none;
    line-height: 1;
    transition: color 0.12s;
}
.signoff-socials a:hover {
    color: var(--fg-0);
    border-bottom: none;
}
.signoff .meta {
    font-size: 10.5px;
    color: var(--fg-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
}
.signoff .meta b {
    color: var(--fg-0);
    font-weight: 600;
}

/* ===========================================================
   GLITCH
   =========================================================== */
.glitch {
    position: relative;
    display: inline-block;
}
.glitch:hover::before,
.glitch:hover::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.glitch:hover::before {
    color: var(--red);
    transform: translate(-1px, 0);
    mix-blend-mode: screen;
    clip-path: inset(0 0 60% 0);
}
.glitch:hover::after {
    color: var(--blue);
    transform: translate(1px, 0);
    mix-blend-mode: screen;
    clip-path: inset(60% 0 0 0);
}

/* drip indicator for hero */
.drip-rule {
    font-family: var(--mono);
    white-space: pre;
    font-size: 12px;
    line-height: 1;
    color: var(--fg-3);
    user-select: none;
    margin: 8px 0;
}
.drip-rule .r {
    color: var(--red);
}
.drip-rule .b {
    color: var(--blue);
}