.intro{display:grid;gap:14px;padding-block:28px 8px;max-width:720px}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding-block:24px}
.filters button{font:600 15px/1 var(--display);padding:10px 16px;border-radius:99px;border:1.5px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;transition:background .2s,border-color .2s}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.list{grid-template-columns:1fr}}
.post{display:grid;gap:10px;align-content:start;padding:22px;border-radius:var(--r);background:var(--card);text-decoration:none;color:var(--fg);transition:transform .25s,box-shadow .25s;min-width:0}
a.post:hover{transform:translateY(-4px);box-shadow:0 14px 28px -18px rgba(0,0,0,.45)}
.post .tag{justify-self:start;font:600 12px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:6px 10px;border-radius:99px}
.post p{font-size:16px;color:var(--muted)}
.post .meta{font-size:14px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.post.soon{background:transparent;border:1.5px dashed var(--line)}
.post.soon h3{color:var(--muted)}
.post.featured{grid-column:span 2}
@media (max-width:600px){.post.featured{grid-column:auto}}
.post.featured h3{font-size:24px}
.ask{margin-top:40px;padding:28px;border-radius:20px;background:var(--accent-soft);display:grid;gap:14px;max-width:820px}
/* На телефонах :hover залипает после касания: без сдвигов и теней. */
@media (hover:none){.btn:hover,.card:hover,a.post:hover,.media a:hover{transform:none;box-shadow:none}}