/* Videos page: one row per walkthrough, video left, text right. */
.vids { display: flex; flex-direction: column; gap: 28px; margin-bottom: 20px; }
.vid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgba(9,9,11,.05); scroll-margin-top: 20px; }
.vid:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -22px rgba(1,88,255,.45); }
.vid video { width: 100%; height: auto; display: block; border-radius: 12px; background: #0d0d11; aspect-ratio: 16 / 10; }
.vid__num { font: 500 12px/1 Geist, system-ui, sans-serif; color: var(--faint); letter-spacing: .02em; }
.vid h2 { margin-top: 10px; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.vid__meta > p:not(.vid__num):not(.vid__links) { margin-top: 10px; color: var(--muted); }
.vid__links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 18px; font-weight: 600; font-size: .95rem; }
.vid__links a { color: var(--accent); text-decoration: none; }
.vid__links a:last-child { color: var(--muted); font-weight: 500; }
.vid__links a:hover { text-decoration: underline; }
@media (max-width: 860px) { .vid { grid-template-columns: 1fr; gap: 14px; } .vid__meta { padding: 0 6px 6px; } }