/* Author page */
.author-page { background: #f7f6f3; min-height: 100vh; }

.author-page__main {
  max-width: var(--layout-max, 1320px);
  margin: 0 auto;
  padding:
    clamp(1.25rem, 3.5vw, 2rem)
    max(var(--layout-gutter, clamp(0.9375rem, 2.85vw, 1.875rem)), env(safe-area-inset-right, 0))
    clamp(2rem, 5vw, 3.5rem)
    max(var(--layout-gutter, clamp(0.9375rem, 2.85vw, 1.875rem)), env(safe-area-inset-left, 0));
}

.author-breadcrumb {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  list-style: none; margin: 0 0 1rem; padding: 0;
  font-size: .8125rem; color: #888;
}
.author-breadcrumb a { color: #888; text-decoration: none; }
.author-breadcrumb a:hover { color: #c41e3a; }
.author-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: .35rem; color: #ccc; }

.author-layout {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: flex-start;
}

/* ── Left image panel ─────────────────────────────── */
.author-panel {
  width: 280px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e8e4df;
  border-radius: 12px;
  padding: 1.5rem;
  position: sticky;
  top: 1.25rem;
}
.author-panel__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 1.1rem;
  background: #f0eeea;
}
.author-panel__img--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: #c9c2b6; font-size: 3rem;
}
.author-panel__name { font-size: 1.4rem; font-weight: 800; color: #1f1b16; margin: 0 0 .35rem; line-height: 1.2; }
.author-panel__count { font-size: .82rem; color: #999; margin: 0 0 1rem; }
.author-panel__bio { font-size: .9rem; color: #555; line-height: 1.65; margin: 0; white-space: pre-line; }

/* ── Right content ────────────────────────────────── */
.author-content { flex: 1; min-width: 0; }
.author-content__header { margin-bottom: 1.25rem; }
.author-content__title { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 800; color: #1f1b16; margin: 0; }
.author-content__count { font-size: .85rem; color: #888; margin: .25rem 0 0; }

.author-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.author-empty { padding: 3rem 1rem; text-align: center; color: #999; }

@media (max-width: 820px) {
  .author-layout { flex-direction: column; }
  .author-panel { width: 100%; position: static; display: flex; gap: 1.25rem; }
  .author-panel__img { width: 130px; flex-shrink: 0; margin-bottom: 0; }
  .author-panel__info { flex: 1; min-width: 0; }
}