.card {
    background-color: var(--ivory);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
    box-shadow:
        0 0.5rem 1rem rgba(0, 0, 0, 0.05),
        0 0.125rem 0.25rem rgba(0, 0, 0, 0.03);
    transition:
        transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
}

/* Subtle interactive hover effect for clickable or featured cards */
.card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0.75rem 1.5rem rgba(0, 0, 0, 0.08),
        0 0.25rem 0.5rem rgba(0, 0, 0, 0.04);
}

.card-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.card-center-page {
    margin-left: auto;
    margin-right: auto;
    max-width: 650px; /* Keeps centered single-page cards at an optimal reading width */
}

.card-advanced {
    background-color: #121212;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 4px 4px;
    background-position:
        0 0,
        0 2px,
        2px -2px,
        -2px 0px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    transition:
        border-color 0.25s ease-in-out,
        box-shadow 0.25s ease-in-out;
}

.card-advanced:hover {
    border-color: rgba(11, 59, 44, 0.8);
    box-shadow:
        0 1rem 3rem rgba(0, 0, 0, 0.6),
        0 0 20px rgba(11, 59, 44, 0.25);
}