.workbench-page {
    background: #e9e6de;
}

/* Keep project stages in the same warm accent family as the Workbench title
   and the free-design catalogue, while retaining legibility at badge size. */
.workbench-page .status-badge {
    color: #25120e;
    background: #e47b58;
    border: 1px solid rgba(92, 42, 27, .48);
    box-shadow:
        0 0 0 1px rgba(255, 206, 185, .16),
        0 0 15px rgba(214, 104, 69, .32);
}

.workbench-page .site-header {
    color: #f4efe5;
    border-color: rgba(235, 223, 202, .23);
    background:
        linear-gradient(90deg, rgba(31, 14, 10, .58), rgba(7, 25, 37, .74)),
        repeating-linear-gradient(94deg, #28120e 0, #61301f 9px, #24100d 19px, #784127 28px);
    box-shadow: inset 0 -1px rgba(255, 255, 255, .06);
}

.workbench-page .brand span {
    color: #152129;
    background: radial-gradient(circle at 35% 28%, #f8f6e8, #c8d0cf 55%, #768487);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 0 0 2px rgba(214, 104, 69, .15), 0 0 14px rgba(214, 104, 69, .4);
}

.workbench-hero {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    color: #f5f0e6;
    background:
        linear-gradient(180deg, rgba(6, 22, 33, .66), rgba(13, 31, 40, .9)),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(166, 205, 216, .07) 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(166, 205, 216, .07) 40px),
        repeating-linear-gradient(95deg, #2b130f 0, #6e3522 10px, #26110e 21px, #7d4329 31px);
    box-shadow: inset 0 -110px 125px rgba(7, 19, 27, .5);
}

.workbench-hero::before {
    content: '';
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: min(58%, 370px);
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0,
        rgba(57, 70, 73, .08) 20%,
        rgba(79, 89, 88, .2) 42%,
        rgba(146, 148, 142, .5) 68%,
        rgba(206, 206, 198, .86) 88%,
        #d9d9d2 100%);
}

.workbench-hero::after {
    content: '';
    position: absolute;
    width: min(42vw, 620px);
    aspect-ratio: 1;
    right: -6vw;
    top: 5%;
    border: 1px solid rgba(214, 104, 69, .42);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(214, 104, 69, .035), 0 0 0 78px rgba(174, 208, 219, .025);
    opacity: .72;
}

.workbench-hero > * { position: relative; z-index: 2; }
.workbench-hero h1 em {
    color: #e47b58;
    text-shadow: 0 0 24px rgba(214, 104, 69, .32);
}
.workbench-hero > p:last-child { color: #c4cdd0; }

.workbench-list {
    margin-top: -1px;
    background: linear-gradient(180deg, #d9d9d2, #e5e3dc 105px, #f1efe8 260px);
    box-shadow: inset 0 1px rgba(255, 255, 255, .65);
}

@media (max-width: 760px) {
    .workbench-page .site-nav {
        color: #f4efe5;
        background: rgba(17, 22, 26, .97);
        border-color: rgba(235, 223, 202, .2);
    }
    .workbench-hero { min-height: 520px; }
    .workbench-hero::before { height: 62%; }
    .workbench-hero::after { width: 72vw; right: -30vw; }
}