.status-main {
    padding: var(--s6) 0 var(--pad);
}

.status-head {
    max-width: 60ch;
    margin-bottom: var(--s5);
}

.status-head h1 {
    font-size: clamp(1.75rem, 3.2vw, 2.625rem);
    margin-bottom: var(--s3);
}

.status-note {
    font-size: 0.9375rem;
    color: var(--muted);
}

.status-note em {
    font-style: normal;
    color: var(--ink);
}

.banner {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid #CFE3D7;
    background: #EDF5F0;
}

.banner-icon {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--ok);
}

.banner-body {
    flex: 1;
}

.meta-date {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8125rem;
    color: var(--muted);
}

.banner b {
    font-size: 1.125rem;
    color: var(--ok);
}

.banner-body>span {
    display: block;
    margin-top: 4px;
    font-size: 0.9375rem;
    color: var(--body);
}

#server-date:empty {
    display: none;
}

.status-group {
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
}

.status-group h2 {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
}

.incident {
    margin-top: var(--s5);
}

.incident-title {
    font-size: 1.25rem;
}

.updates {
    margin-top: var(--s4);
    list-style: none;
    border-left: 2px solid var(--rule);
    padding-left: var(--s4);
}

.updates li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: var(--s4);
}

.updates li:last-child {
    padding-bottom: 0;
}

.update-icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.update-icon--ok {
    color: var(--ok);
}

.update-icon--open {
    color: var(--warn);
}

.update-label {
    font-weight: 600;
    color: var(--ink);
}

.update-time {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--muted);
}

.status-foot {
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--muted);
}

.status-foot a {
    color: var(--muted);
}

.status-foot a:hover {
    color: var(--ink);
}

@media (max-width: 700px) {
    .banner {
        padding: var(--s3);
    }

    .updates {
        padding-left: var(--s3);
    }
}