/* Media kit — estende styles.css; só usa tokens de :root */
.mk-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.mk-nav a { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.mk-nav a:hover { border-color: var(--clay); color: var(--clay-deep); }
.mk-group { padding-block: var(--section-y); border-top: 1px solid var(--line-soft); scroll-margin-top: 1rem; }
.mk-group h2 { font-family: var(--display); margin: 0 0 .25rem; }
.mk-count { color: var(--ink-3); margin: 0 0 1.5rem; font-size: .9rem; }
.mk-grid { columns: 260px; column-gap: 1rem; }
.mk-card { break-inside: avoid; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.mk-thumb {
    display: block; width: 100%; background-color: var(--paper-3);
    background-image: linear-gradient(45deg, var(--paper-2) 25%, transparent 25%, transparent 75%, var(--paper-2) 75%),
        linear-gradient(45deg, var(--paper-2) 25%, transparent 25%, transparent 75%, var(--paper-2) 75%);
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.mk-thumb img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .3s; }
.mk-thumb img.is-loaded { opacity: 1; }
/* fundo escuro de apoio para versões brancas/transparentes */
.mk-thumb.on-dark { background: var(--stage); }
.mk-card figcaption { padding: .6rem .75rem; font-size: .8rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.mk-card figcaption span { overflow-wrap: anywhere; }
.mk-card figcaption a { color: var(--clay-deep); white-space: nowrap; font-weight: 600; text-decoration: none; }
.mk-card figcaption a:hover { text-decoration: underline; }
.mk-path { display: block; color: var(--ink-3); font-size: .72rem; }

.mk-sub { margin-top: 1.75rem; }
.mk-sub h3 { font-family: var(--display); font-size: 1.05rem; color: var(--ink-2); margin: 0 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line-soft); }

.mk-actions { display: flex; gap: .75rem; align-items: baseline; flex-shrink: 0; }
.mk-copy { font: inherit; font-weight: 600; color: var(--clay-deep); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.mk-copy:hover { text-decoration: underline; }