/* FreeBSD Corner: a red theme for pages marked <html class="bsd">, plus the home page card. Layout and type come from style.css. */
html.bsd {
    --bg: #12090a;
    --bg-glow-1: rgba(171, 43, 40, 0.22);
    --bg-glow-2: rgba(150, 160, 175, 0.09);
    --surface: #1d1214;
    --surface-2: #281719;
    --border: #4a2527;
    --text: #f0e8e8;
    --text-muted: #b6a0a1;
    --heading: #ffffff;
    --accent: #ef5b55;
    --accent-2: #c5ccd6;
    --accent-soft: rgba(239, 91, 85, 0.15);
    --code-bg: #0d0708;
    --code-text: #eadada;
    --code-border: #3d1f21;
}
@media (prefers-color-scheme: light) {
    html.bsd {
        --bg: #fbf6f5;
        --bg-glow-1: rgba(171, 43, 40, 0.10);
        --bg-glow-2: rgba(110, 120, 135, 0.07);
        --surface: #ffffff;
        --surface-2: #f8eceb;
        --border: #ecd5d3;
        --text: #2a1a1a;
        --text-muted: #7a6162;
        --heading: #1a0d0d;
        --accent: #ab2b28;
        --accent-2: #566070;
        --accent-soft: rgba(171, 43, 40, 0.09);
        --code-bg: #1c0f10;
        --code-text: #f0e2e2;
        --code-border: #1c0f10;
    }
}
.bsd-hero { display: flex; align-items: center; gap: 22px; margin: 6px 0 18px; }
.bsd-hero img { width: 120px; height: 120px; flex: none; }
.bsd-hero p { margin: 0; }
@media (max-width: 560px) { .bsd-hero { flex-direction: column; text-align: center; } }

/* Home page card that leads to the FreeBSD Corner (same colours in light and dark) */
.corner-card { display: flex; align-items: center; gap: 18px; margin: 22px 0; padding: 16px 20px; border-radius: 14px; text-decoration: none;
    background: linear-gradient(135deg, #8f2320, #ab2b28 55%, #c73a36); color: #fff; border: 1px solid #6e1a18; box-shadow: 0 8px 24px rgba(171, 43, 40, 0.28); }
.corner-card:hover { filter: brightness(1.08); }
.corner-card img { width: 72px; height: 72px; flex: none; background: #fff3f2; border-radius: 50%; padding: 4px; }
.corner-card strong { display: block; font-size: 1.15rem; color: #fff; }
.corner-card span { color: #ffe9e8; }
@media (max-width: 560px) { .corner-card { flex-direction: column; text-align: center; } }