/*
 * Standalone The Links page.
 *
 * The shared Links component remains owned by home.css because it also
 * appears on the homepage. This file owns only the standalone page shell
 * and restrained page-specific presentation.
 */

.sf-the-links-page {
    min-height: 100vh;
    margin: 0;
    color: var(--sf-text);
    background:
        radial-gradient(
            circle at 10% 4%,
            rgba(228, 59, 50, 0.13),
            transparent 31%
        ),
        radial-gradient(
            circle at 90% 4%,
            rgba(39, 136, 216, 0.13),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #07090d 0%,
            #05080b 100%
        );
}

.sf-the-links-shell {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 54px;
}

.sf-the-links-topbar {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 5px 4px 21px;
    border-bottom: 1px solid var(--sf-line);
}

.sf-the-links-brand {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 270px;
    max-width: 62vw;
    color: var(--sf-text);
    text-decoration: none;
}

.sf-the-links-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.sf-the-links-tagline {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.sf-the-links-home {
    grid-column: 3;
    justify-self: end;
    color: var(--sf-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-decoration: none;
    text-transform: uppercase;
}

.sf-the-links-home:hover,
.sf-the-links-home:focus-visible {
    color: var(--sf-gold-light);
}

.sf-the-links-main .sf-home-links-panel {
    position: relative;
    overflow: hidden;
    margin-top: 22px;
    border-color: var(--sf-line-strong);
    background:
        radial-gradient(
            circle at 0 0,
            rgba(228, 59, 50, 0.075),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 0,
            rgba(39, 136, 216, 0.075),
            transparent 34%
        ),
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.025),
            transparent 45%
        ),
        rgba(16, 20, 27, 0.94);
}

.sf-the-links-main .sf-home-links-panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--sf-sizzle) 0%,
        var(--sf-sizzle) 42%,
        var(--sf-fizzle) 58%,
        var(--sf-fizzle) 100%
    );
    opacity: 0.9;
}

@media (max-width: 560px) {
    .sf-the-links-shell {
        width: min(100% - 20px, 760px);
        padding-top: 12px;
    }

    .sf-the-links-topbar {
        gap: 12px;
        padding-bottom: 14px;
    }

    .sf-the-links-brand {
        width: 190px;
        max-width: 58vw;
        gap: 5px;
    }

    .sf-the-links-tagline {
        font-size: 10px;
    }

    .sf-the-links-home {
        font-size: 10px;
    }
}