@layer components {
    .colofon {
        grid-column: 1 / -1;
        display: grid;
        gap: var(--space-32);
        margin-block-end: var(--space-40);

        & > .colofon-hero {
            display: grid;
            gap: var(--space-16);

            & h1 {
                margin: 0;
                color: var(--color-text-strong);
                font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
                font-weight: var(--font-weight-bold);
                line-height: var(--line-height-title);
            }

            & p {
                margin: 0;
                color: var(--color-text-muted);
                font-size: var(--text-base);
                line-height: var(--leading-relaxed);
            }
        }

        & > .colofon-section {
            display: grid;
            gap: var(--space-16);

            &.colofon-section--wof {
                padding: clamp(var(--space-20), 3vw, var(--space-32));
                border: 1px solid var(--color-card-border);
                border-radius: var(--radius-corner);
                background:
                    radial-gradient(circle at top left, color-mix(in oklch, var(--color-brand-primary) 14%, transparent), transparent 22rem),
                    var(--color-card-bg);
                box-shadow: 0 var(--space-12) var(--space-32) var(--color-shadow-soft);
            }
        }

        & .colofon-section__header {
            display: flex;
            align-items: center;
            gap: var(--space-12);

            &::after {
                content: "";
                width: var(--space-40);
                height: var(--space-2);
                border-radius: var(--radius-round);
                background: var(--color-brand-primary);
            }

            & h2 {
                margin: 0;
                color: var(--color-text-strong);
                font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
                font-weight: var(--font-weight-bold);
                line-height: var(--line-height-title);
            }
        }

        & .colofon-section__text {
            margin: 0;
            color: var(--color-text-muted);
            font-size: var(--text-base);
            line-height: var(--leading-relaxed);
        }

        & .colofon-team-grid,
        & .colofon-wof-grid {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        & .colofon-team-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: var(--space-16);
            justify-content: start;
        }

        & .colofon-team-card,
        & .colofon-wof-card {
            min-width: 0;
        }

        & .colofon-card-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-12);
            height: 100%;
            padding: var(--space-20) var(--space-14);
            border: 1px solid var(--color-card-border);
            border-radius: var(--radius-corner-m);
            background: var(--color-card-bg);
            color: var(--color-text);
            text-align: center;
            text-decoration: none;
            box-shadow: 0 var(--space-8) var(--space-24) var(--color-shadow-soft);
            transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;

            &:hover,
            &:focus-visible {
                border-color: color-mix(in oklch, var(--color-brand-primary) 58%, var(--color-card-border));
                background: var(--color-card-bg-hover);
                color: var(--color-text-strong);
                outline: none;
                box-shadow: 0 var(--space-12) var(--space-32) var(--color-shadow-medium);
                transform: translateY(calc(var(--space-2) * -1));
            }
        }

        & .colofon-avatar {
            display: grid;
            place-items: center;
            width: 5.75rem;
            height: 5.75rem;
            overflow: hidden;
            border: var(--space-4) solid var(--color-brand-primary);
            border-radius: var(--radius-round);
            background: var(--color-brand-primary);
            box-shadow: 0 var(--space-4) var(--space-12) var(--color-shadow-soft);

            &.colofon-avatar--small {
                width: 4.5rem;
                height: 4.5rem;
                border-width: 0.1875rem;
            }
        }

        & .colofon-avatar__image {
            width: 100%;
            height: 100%;
            border-radius: inherit;
            object-fit: cover;
            transform: scale(1);
            transition: transform .2s ease, filter .2s ease, opacity .2s ease;
        }

        & .colofon-card-link:hover .colofon-avatar__image,
        & .colofon-card-link:focus-visible .colofon-avatar__image,
        & .colofon-wof-link:hover .colofon-avatar__image,
        & .colofon-wof-link:focus-visible .colofon-avatar__image {
            transform: scale(1.04);
        }

        & .colofon-card-details,
        & .colofon-wof-details {
            display: grid;
            min-width: 0;
            justify-items: center;
        }

        & .colofon-card-details {
            gap: var(--space-4);
        }

        & .colofon-wof-details {
            gap: var(--space-2);
        }

        & .colofon-card-name,
        & .colofon-wof-name {
            color: var(--color-text-strong);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-title);
        }

        & .colofon-card-role,
        & .colofon-card-period,
        & .colofon-wof-period {
            color: var(--color-text-muted);
            font-size: var(--text-sm);
            line-height: var(--leading-normal);
        }

        & .colofon-card-period,
        & .colofon-wof-period {
            margin-block-start: var(--space-8);
            font-size: var(--font-size-meta);
        }

        & .colofon-wof-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(5.75rem, 1fr));
            gap: var(--space-18) var(--space-14);
            margin-block-start: var(--space-12);
        }

        & .colofon-wof-link {
            display: grid;
            justify-items: center;
            gap: var(--space-8);
            min-width: 0;
            padding: var(--space-8);
            border-radius: var(--radius-corner-m);
            color: var(--color-text);
            text-align: center;
            text-decoration: none;
            transition: background-color .18s ease, transform .18s ease;

            &:hover,
            &:focus-visible {
                background: var(--color-bg-surface-soft);
                color: var(--color-text-strong);
                outline: none;
                transform: translateY(calc(var(--space-2) * -1));
            }
        }

        & .colofon-wof-name {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-4);
            max-width: 100%;
            font-size: var(--font-size-meta);
            overflow-wrap: anywhere;
        }

        & .colofon-wof-memoriam-icon {
            display: inline-grid;
            place-items: center;
            flex: 0 0 auto;
            width: .75rem;
            height: .75rem;
            color: color-mix(in oklch, var(--color-text-muted) 72%, transparent);
            opacity: .8;
        }

        & .colofon-wof-memoriam-svg.svg-sprite {
            position: static;
            display: block;
            width: .55rem;
            height: .75rem;
            overflow: visible;
            fill: currentColor;
        }

        & .colofon-wof-card--memoriam {
            & .colofon-avatar {
                border-color: color-mix(in oklch, var(--color-text-muted) 45%, transparent);
                background: color-mix(in oklch, var(--color-text-muted) 24%, var(--color-bg-surface));
            }

            & .colofon-avatar__image {
                filter: grayscale(1);
                opacity: .58;
            }
        }

        @media (max-width: 72rem) {
            & .colofon-team-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 40rem) {
            gap: var(--space-24);

            & .colofon-team-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--space-12);
            }

            & .colofon-card-link {
                padding: var(--space-16) var(--space-10);
            }

            & .colofon-avatar {
                width: 4.75rem;
                height: 4.75rem;

                &.colofon-avatar--small {
                    width: 3.75rem;
                    height: 3.75rem;
                }
            }

            & .colofon-wof-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
    }
}