.np-colophon {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    padding: 2.5rem 0 calc(1.5rem + var(--np-nav-h) + var(--np-safe-bottom));
    text-align: center;
    background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--np-foam) 70%, transparent) 30%, color-mix(in srgb, var(--np-pink) 25%, var(--np-cream)));
    border-top: 1px dashed color-mix(in srgb, var(--np-mint) 55%, transparent);
}

.np-colophon__bloom {
    position: absolute;
    top: -1.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--np-paper);
    border-radius: 50%;
    box-shadow: var(--np-shadow-soft);
}

.np-colophon__hippo {
    margin: 0.5rem auto 0.75rem;
    width: min(150px, 42vw);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(47, 93, 74, 0.14));
}

.np-colophon__name {
    margin: 0;
    font-family: var(--np-font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--np-green-deep);
}

.np-colophon__meta {
    margin: 0.35rem 0 0;
    color: var(--np-muted);
    font-size: 0.92rem;
}

.np-colophon__social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.np-colophon__social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--np-paper);
    border: 1px solid var(--np-border);
    color: var(--np-green);
    transition: transform var(--np-transition), background var(--np-transition);
}

.np-colophon__social a:hover {
    background: var(--np-pink);
    transform: translateY(-2px);
}

.np-colophon__copy {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--np-muted);
}