/* channel */
.media{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.card{grid-column:span 4;border:1px solid var(--line);background:var(--paper);border-radius:var(--r);padding:24px;display:grid;gap:12px;align-content:start;text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:8px 8px 0 var(--accent)}
.card p{color:var(--muted);font-size:.97rem}
.card .k{font:600 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card .arrow{font:600 .88rem/1 var(--mono);color:var(--ink);margin-top:6px}
.card.yt{grid-column:span 8;grid-row:span 2;background:var(--panel);color:var(--panel-ink);border-color:var(--panel-line);padding:clamp(24px,4vw,44px);gap:18px}
.card.yt p{color:var(--panel-muted);max-width:50ch;font-size:1.05rem} .card.yt .k{color:var(--hl)} .card.yt .arrow{color:var(--panel-ink)}
.card.yt h3{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800}
.play{width:64px;height:64px;border-radius:50%;background:var(--hl);display:grid;place-items:center;position:relative}
.play::before{content:"";border-left:18px solid var(--on-hl);border-block:11px solid transparent;margin-left:5px}
.play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--hl);animation:ring 2.2s infinite}
.vids{list-style:none;margin:0;padding:0;border-top:1px solid var(--panel-line)}
.vids a{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--panel-line);text-decoration:none;font-weight:500;transition:padding .2s,color .2s}
.vids a:hover{padding-left:8px;color:var(--hl)} .vids small{font:400 .78rem/1.6 var(--mono);color:var(--panel-muted);white-space:nowrap}

@keyframes ring{to{transform:scale(1.7);opacity:0}}

@media (max-width:900px){ .card,.card.yt{grid-column:span 12} }