.pegboard {
    --pitch: 1.75rem; /* distance between the board's holes */
    --hole: color-mix(in srgb, var(--text) 18%, var(--surface));

    /* The box's four corner screws, then a grid of holes */
    background-image: var(--screws), radial-gradient(circle, var(--hole) 0 2px, transparent 2.5px);
    background-size:
        auto,
        auto,
        auto,
        auto,
        var(--pitch) var(--pitch);
    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        calc(var(--pitch) / 2) calc(var(--pitch) / 2);
}

.pegs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 2rem var(--space-md);
    list-style: none;
}

.peg {
    position: relative;
    padding: 1.9rem 0.9rem 0.8rem;
    background: color-mix(in srgb, var(--text) 7%, var(--surface));
    border: 2px solid var(--border);
    border-radius: 3px;
    box-shadow: 3px 3px 0 var(--hard-shadow);
    transform-origin: 50% 0.9rem; /* swings from its hole */
    transition: transform 0.15s;
}

.peg:nth-child(odd) {
    transform: rotate(-0.8deg);
}

.peg:nth-child(even) {
    transform: rotate(0.7deg);
}

.peg:hover,
.peg:focus-within {
    transform: rotate(0);
}

/* The tag's own hole, with the peg showing through it */
.peg::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 0.85rem;
    height: 0.85rem;
    margin-left: -0.425rem;
    background: radial-gradient(circle, var(--accent) 0 0.17rem, var(--surface) 0.2rem);
    border: 2px solid var(--border);
    border-radius: 50%;
}

.peg > a {
    font-weight: 700;
    text-decoration: none;
}

.peg > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.peg:hover > a {
    text-decoration: underline;
}

.peg > a:focus-visible {
    outline: none;
}

.peg:has(> a:focus-visible) {
    outline: 2px solid var(--deco);
    outline-offset: 3px;
}

.peg .chips {
    margin-top: 0.4rem;
}

.peg p {
    margin-top: 0.4rem;
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .peg {
        transition: none;
    }
}