article :is(h1, h2) {
    font-weight: 500;
    font-size: 35px;
    letter-spacing: 0px;
}

article a.tag, article span.date {
    font-weight: 500;
}

article.mixtape span.curated {
    font-size: 22px
}

article.mixtape .tracklist {
    font-size: 22px
}

article.mixtape ul li {
    margin-bottom: 4px;
}

article.mixtape ul li a {
    font-weight: 500;
    font-size: 20px;
}

article.mixtape ul li a.playing {
    text-decoration: none;
    border-bottom: solid 2px CurrentColor;
    padding-bottom: 1px;
}

@media (max-width:575px) {
    article.mixtape ul li a {
        cursor: not-allowed;
        pointer-events: none
    }
}

article.mixtape .buttons .like-btn {
    background: 0 0;
    border-radius: 3px;
    border: 1px solid #e9ebee;
    color: #fff;
    margin: 18px 0 0 10px;
    padding: 0 10px;
    cursor: pointer;
}

article.mixtape .buttons .like-btn:active {
    transform: translateY(1px)
}

/* Phase Recette F-7 — restored tada animation (was a leftover
 * marker class from the Animate.css CDN removed in Phase 1 self-host;
 * the markup + JS still added the class but no keyframe existed,
 * making the like a silent operation). 600ms gentle rotate+scale,
 * synced with the JS setTimeout that delays the "Already liked"
 * switch until the animation completes. */
@keyframes lmt-tada {
    0%                  { transform: scale(1); }
    10%, 20%            { transform: scale(0.95) rotate(-1.5deg); }
    30%, 50%, 70%, 90%  { transform: scale(1.05) rotate(1.5deg); }
    40%, 60%, 80%       { transform: scale(1.05) rotate(-1.5deg); }
    100%                { transform: scale(1); }
}
.like__btn.tada {
    animation: lmt-tada 600ms ease-in-out;
}

/* Phase Recette F-7 — persistent "already liked" state. Set client-side
 * in main.js when localStorage flag lmt_liked_<post_id> is present
 * (either fresh on AJAX success, or hydrated from a prior session at
 * page load). Greys out the button so the user sees their previous
 * like was registered. The count is preserved inside the label. */
.like__btn--already-liked,
.like__btn--already-liked:hover {
    opacity: 0.6;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .like__btn.tada { animation: none; }
}

article.mixtape img.illustration {
    border: solid 1px RGBA(255, 255, 255, .2);
    border-radius: 3px
}

article.mixtape .author-1 {
    display: none!important
}

article .action-buttons {
    width: 100%;
    display: inline-flex;
    margin-top: 20px;
}

article .action-buttons a,
article .action-buttons button {
    width: 33.3%;
    text-align: center;
    border: solid 2px currentColor;
    padding: 10px;
    font-size: 20px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

article .action-buttons a.middle,
article .action-buttons button.middle {
    border-left: 0;
    border-right: 0;
}

@media (max-width: 768px) {
    article .action-buttons {
        width: 100%;
        display: grid;
        margin-top: 24px;
    }

    article .action-buttons a,
    article .action-buttons button {
        width: 100%;
        text-align: center;
        border: solid 2px currentColor;
        padding: 10px;
        font-size: 20px;
        background: transparent;
        color: inherit;
        font-family: inherit;
        cursor: pointer;
    }

    article .action-buttons a.middle,
    article .action-buttons button.middle {
        border: solid 2px currentColor;
        border-top: 0;
        border-bottom: 0;
    }
}