body.suite {
    margin: 0;
    color: var(--suite-fg);
    background: var(--suite-bg);
}

:root {
    --suite-bg: #faf3e1;
    --suite-fg: #222;
    --suite-accent: #fa8112;
    --suite-border: #f5e7c6;
    --suite-card: #fff;
}

/* Shared nav only. Namespaced so it doesn't collide. */
.suite-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--suite-border);
    background: rgba(250, 243, 225, 0.9);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
}

.suite-nav a {
    color: var(--suite-fg);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 14px;
}
.suite-nav a:is-active {
    background: var(--suite-card);
    border: 1px solid var(--suite-border);
}

.suite-nav a:hover {
    color: var(--suite-accent);
}

.suite-nav a:active {
    background: var(--suite-card);
    border: 1px solid var(--suite-border);
}

.suite-page {
    padding: 18px;
}

.suite-nav .nav-home {
    font-weight: 600;
}