/* media.css :: the media page's tiles and subscribe dialog. Everything else
   comes from base.css and article.css. */

.md-grid {
  display: grid; gap: 12px; margin-top: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.md-tile {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; text-decoration: none;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-card);
  transition: border-color 120ms, transform 120ms;
}
.md-tile:hover { border-color: var(--cyan-text); transform: translateY(-2px); }
.md-logo { width: 52px; height: 52px; font-size: 19px; border-radius: 13px; flex: none; }
.md-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.md-name { font-weight: 800; font-size: var(--fs-md); letter-spacing: -0.01em; }
.md-pick {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .08em; color: var(--ink-2); white-space: nowrap;
}
.md-kind {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 10px;
  vertical-align: 2px;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.md-kind svg { flex: none; }
.md-who { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.md-blurb { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.md-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; }
.md-count .num { font-weight: 700; color: var(--ink); }

.md-recommend { margin-top: 18px; }

/* ------------------------------------------------------------ subscribe */
.sub-band {
  margin-top: 48px; padding: 28px; text-align: left;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-card);
}