.top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px clamp(14px, 4vw, 44px);
    border-bottom: 2px solid var(--line);
    background: #ece7dad9;
    backdrop-filter: blur(14px);
}

.mark,
.mini {
    font-weight: 950;
    text-transform: uppercase;
}

nav {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 3vw, 28px);
    color: var(--mut);
    font-size: 13px;
}

nav a:hover { color: var(--ink); }

.mini {
    border: 2px solid var(--ink);
    background: var(--acid);
    padding: 8px 12px;
    box-shadow: 4px 4px 0 var(--ink);
}

.tag,
.cap p {
    margin: 0 0 10px;
    color: var(--red);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.btn {
    border: 2px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    padding: 12px 16px;
    box-shadow: 5px 5px 0 var(--ink);
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--ink);
    background: var(--acid);
}

.hot {
    background: var(--ink);
    color: var(--paper);
}