@layer pages {
    .ways {
        display: grid;
        align-content: start;
        gap: clamp(2rem, 3.5vw, 2.75rem);
    }

    .way {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: clamp(1rem, 2vw, 1.5rem);
        max-inline-size: 34rem;

        & p {
            color: var(--text-muted);
            line-height: 1.7;
            font-size: var(--text-sm);
        }

        & strong {
            font-weight: 500;
            color: var(--text-ink);
        }
    }

    .way__icon {
        --illus-pen: 1.15px;
        --illus-main: var(--text-muted-2);
        inline-size: 1.75rem;
        margin-block-start: 0.2rem;
    }

    .sponsors {
        display: grid;
        align-content: start;
        gap: 1.25rem;
    }

    .sponsor-list {
        display: grid;
        gap: 1rem;
    }

    .sponsor {
        --nav-card-pad-block: clamp(1.1rem, 2.5vw, 1.5rem);
        --nav-card-pad-inline: clamp(1.25rem, 2.5vw, 1.6rem);
        gap: 0.35rem;

        & a {
            color: inherit;
            text-decoration: none;
        }

        &.empty {
            border-style: dashed;

            & .sponsor-name { color: var(--text-muted-2); font-weight: 200; }

            &:hover {
                transform: none;
                background: none;
                border-color: var(--border-card);
            }

            &:hover::before { opacity: 0; }
        }
    }

    .sponsor-name { font-size: var(--text-lg); font-weight: 500; }
    .sponsor-note { font-size: var(--text-xs); color: var(--text-muted-2); letter-spacing: 0.02em; }

    .sponsor-since {
        margin-block-start: 0.3rem;
        font-family: var(--font-mono);
        font-size: var(--text-2xs);
        color: var(--text-muted-2);
    }

    .sponsor-cta {
        justify-self: start;
        padding-block: 1.1rem;
        padding-inline: 2rem;

        --control-shadow: 0 1px 2px color-mix(in oklch, var(--text-ink) 4%, transparent);
        --control-shadow-hover: 0 2px 5px color-mix(in oklch, var(--text-ink) 8%, transparent);

        & svg {
            opacity: 0.5;
            scale: 0.95;
            transition: opacity var(--duration-slow) ease, scale 400ms var(--ease-elastic);
        }

        &:hover svg {
            opacity: 1;
            scale: 1;
        }
    }
}