/* ============================================
   ATTRIBUTIONS PAGE
   ============================================ */

/* Lead paragraph */
.attr-lead {
    max-width: 800px;
    margin: 0 auto var(--spacing-8);
    padding: var(--spacing-12) var(--spacing-6) 0;
}

.attr-lead p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Credit list */
.attr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.attr-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background: #FFFFFF;
    border: 1px solid rgba(40, 26, 77, 0.1);
    border-radius: 16px;
}

.attr-item p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.attr-item a {
    color: var(--color-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Icon styling */
.attr-icon {
    width: 40px;
    height: 40px;
    flex: none;
    display: block;
    background-color: var(--color-purple-ink);
}

.attr-icon.ic-frog {
    -webkit-mask: url(/assets/frog-mark.png) center/contain no-repeat;
    mask: url(/assets/frog-mark.png) center/contain no-repeat;
}

.attr-icon.ic-computer {
    -webkit-mask: url(/assets/hero-illustration.png) center/contain no-repeat;
    mask: url(/assets/hero-illustration.png) center/contain no-repeat;
}

.attr-icon.ic-upload {
    -webkit-mask: url(/assets/stage-upload-arrow.png) center/contain no-repeat;
    mask: url(/assets/stage-upload-arrow.png) center/contain no-repeat;
}

.attr-icon.ic-artwork {
    -webkit-mask: url(/assets/stage-upload.png) center/contain no-repeat;
    mask: url(/assets/stage-upload.png) center/contain no-repeat;
}

.attr-icon.ic-support {
    -webkit-mask: url(/assets/stage-after.png) center/contain no-repeat;
    mask: url(/assets/stage-after.png) center/contain no-repeat;
}

.attr-icon.ic-painting {
    -webkit-mask: url(/assets/sample-art.png) center/contain no-repeat;
    mask: url(/assets/sample-art.png) center/contain no-repeat;
}

.attr-icon.ic-defense {
    -webkit-mask: url(/assets/scriblink-shield.png) center/contain no-repeat;
    mask: url(/assets/scriblink-shield.png) center/contain no-repeat;
}

.attr-icon.ic-metadata {
    -webkit-mask: url(/assets/ss-hero-metadata.png) center/contain no-repeat;
    mask: url(/assets/ss-hero-metadata.png) center/contain no-repeat;
}