/*
 * About page: the hero of the game page, then chapters of the home page (the parchment slab of its steps, its closing
 * call). Only the link with Nysux is its own: a partner card bearing the logo of the community.
 */
.about-page {
    --about-highlight: light-dark(
        color-mix(in srgb, var(--color-gold) 25%, transparent),
        color-mix(in srgb, var(--color-gold-light) 20%, transparent)
    );
}

/* The name of the site in the lead, as if marked with a gold highlighter over the lower half of the letters. */
.about-highlight {
    background-image: linear-gradient(var(--about-highlight), var(--about-highlight));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 45%;
    color: var(--home-text);
    font-weight: 600;
    /* Each line keeps its own stroke when the name wraps. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.about-nysux {
    display: grid;
    justify-items: start;
    gap: var(--space-l);
}

.about-nysux .home-section__header {
    margin-bottom: 0;
}

.about-partner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-m);
    width: min(100%, 32rem);
    padding: var(--space-m) var(--space-l) var(--space-m) var(--space-m);
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius-inner);
    background-color: var(--home-surface);
    color: var(--home-text);
    text-decoration: none;
    transition:
        transform 0.6s var(--home-ease),
        box-shadow 0.6s var(--home-ease),
        border-color 0.6s ease;
}

.about-partner:hover {
    border-color: color-mix(in srgb, var(--home-gold) 60%, transparent);
    color: var(--home-text);
    box-shadow: 0 30px 70px -30px var(--home-glow-gold);
    transform: translateY(-4px);
}

.about-partner__logo {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: url("../images/webp/logo_nysux-contest-G7WIefB.webp") center / cover;
}

.about-partner__name,
.about-partner__text {
    display: block;
}

.about-partner__name {
    font-family: var(--font-family-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.about-partner__text {
    color: var(--home-text-muted);
    font-size: 1rem;
}

.about-partner__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--home-gold);
    transition: transform 0.4s var(--home-ease);
}

.about-partner:hover .about-partner__icon {
    transform: translate(3px, -3px);
}

.about-nysux__note {
    max-width: 36rem;
    margin: 0;
    color: var(--home-text-muted);
    font-size: 1rem;
}