/* Reading routes after articles and streamer biographies. */
.reading-next { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.reading-next h2 { margin: 0 0 16px; font-family: Manrope, sans-serif; font-size: 22px; line-height: 1.3; font-weight: 800; }
.reading-next .reading-list, .reading-next .profile-next-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.reading-next li { min-width: 0; margin: 0; }
.reading-card { display: flex; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); color: var(--text) !important; }
.reading-card:hover, .profile-next-card:hover { border-color: var(--accent); text-decoration: none; }
.reading-thumb { flex: none; width: 100px; height: 76px; overflow: hidden; border-radius: 8px; }
.reading-thumb img { width: 100%; height: 100%; object-fit: cover; }
.reading-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.reading-title { font-size: 17px; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
.reading-excerpt, .reading-intro { font-size: 14px; line-height: 1.55; color: var(--muted); }
.reading-action, .reading-all { color: var(--link); font-size: 14px; line-height: 1.5; font-weight: 600; }
.reading-topics { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.reading-topics > span { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.reading-topics ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.reading-topics a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text) !important; font-size: 14px; }
.reading-topics a:hover { border-color: var(--accent); text-decoration: none; }
.streamer-next { order: 5; margin-top: 32px; }
.reading-intro { margin: -4px 0 16px; }
.profile-next-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); color: var(--text) !important; }
.profile-next-card > .ava { width: 48px; height: 48px; flex: none; }
.profile-next-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.profile-next-arrow { flex: none; color: var(--link); }
.profile-next-card--featured { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 16px 20px; padding: 22px; border-color: var(--accent); background: linear-gradient(135deg, var(--soft), var(--card2)); }
.profile-next-card--featured > .ava { width: 80px; height: 80px; font-size: 30px; }
.profile-next-card--featured .profile-next-info { gap: 5px; }
.profile-next-card--featured .reading-title { font-family: Manrope, sans-serif; font-size: 28px; line-height: 1.2; font-weight: 800; }
.profile-next-kicker { color: var(--link); font-size: 11px; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.profile-next-description { grid-column: 1 / -1; color: var(--text); font-size: 16px; line-height: 1.65; }
.profile-next-cta { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; line-height: 1.5; font-weight: 700; }
.profile-next-card--featured:hover .profile-next-cta { background: var(--accent-hover); }
.reading-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; }
@media (max-width: 820px) {
  .center > .reading-next { margin: 8px -16px 0; border-radius: 0; border-left: 0; border-right: 0; padding: 20px 16px; }
}
@media (max-width: 500px) {
  .profile-next-card--featured { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .profile-next-card--featured > .ava { width: 64px; height: 64px; font-size: 26px; }
  .profile-next-card--featured .reading-title { font-size: 24px; }
  .profile-next-description { font-size: 15px; }
  .reading-next { padding: 18px 16px; }
  .reading-card { flex-direction: column; padding: 14px; }
  .reading-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}