.port-h1{font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(24px,4.5vw,42px);letter-spacing:-.02em;margin-bottom:8px}
.port-sub{color:var(--sand);font-size:13.5px;max-width:640px;line-height:1.5;margin-bottom:24px}

.port-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pf-btn{background:none;border:1px solid var(--line);color:var(--paper);font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:7px 14px;cursor:pointer;transition:border-color .15s,color .15s}
.pf-btn:hover{border-color:var(--sand)}
.pf-btn.on{border-color:var(--red);color:var(--red)}

.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--ink);margin-bottom:28px}
.port-card{background:var(--panel);display:flex;flex-direction:column;outline:1px solid var(--line);outline-offset:-1px}
.port-card.is-hidden{display:none}

.port-thumb{aspect-ratio:16/9;background:var(--ink);position:relative;overflow:hidden;display:block}
.port-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
a.port-thumb:hover img{transform:scale(1.03)}
.port-thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--paper);background:rgba(0,0,0,.15);opacity:0;transition:opacity .15s}
a.port-thumb:hover .play{opacity:1}
.port-thumb.soon{display:flex;align-items:center;justify-content:center}
.port-thumb.soon span{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}

/* знак способа: рука (руками) / AI (в нейросетях) — серый, в строке с годом */
.mi-list{display:inline-flex;align-items:center;gap:8px}
.mi{display:inline-flex;align-items:center;color:var(--sand)}
.mi--ai{font-family:'Unbounded',sans-serif;font-weight:800;font-size:10px;letter-spacing:.3px}
.mi--hand svg{width:14px;height:14px;display:block}

.port-body{padding:14px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.port-tags{display:flex;gap:5px;flex-wrap:wrap}
.port-tag{font-size:8.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border:1px solid var(--line);padding:2px 6px;line-height:1.4}
.port-title{font-family:'Unbounded',sans-serif;font-weight:700;font-size:14.5px;line-height:1.25;margin-top:2px}
.port-desc{font-size:11.5px;color:var(--sand);line-height:1.4}
.port-meta{font-size:10.5px;color:var(--muted);margin-top:auto;padding-top:6px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.port-year{color:var(--muted)}

.port-cta{display:inline-block;background:var(--red);color:var(--paper);font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px;padding:14px 26px;margin-bottom:12px}
.port-cta:hover{opacity:.85}

@media(max-width:480px){ .port-grid{grid-template-columns:1fr 1fr} }