.author-profile {
  padding: var(--space-16) 0 var(--space-8);
}

.author-profile__photo {
  margin: 0 0 var(--space-6);
}

/* Fills the column instead of a fixed cap — the column's own width
   (col-md-3, with the standard grid gutter before .author-profile__info)
   is what actually bounds it, so it stays left-aligned with the
   Must-Read banner/Favorite Films below instead of centering inside
   the column with unwanted space on either side. */
.author-profile__photo img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Docked directly under the photo. */
.author-profile__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.author-profile__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  opacity: 0.8;
  margin-right: 0;
  font-size: 24px;
  transition: all var(--transition-fast);
}

.author-profile__socials a:hover {
  color: var(--color-accent);
  opacity: 1;
}

/* Font Awesome's brand glyphs (Facebook, Instagram, LinkedIn) render
   visually heavier than the theme's own custom SVG icons (X,
   Letterboxd, Linktree, Bluesky) at the same nominal size — the glyphs
   themselves carry less internal padding than the custom artwork.
   Sized down a notch so the row reads as one consistent icon set. */
.author-profile__socials a i {
  font-size: 20px;
}

.mato-x-logo,
.mato-letterboxd-logo,
.mato-linktree-logo,
.mato-social-icon-custom {
  width: 1em;
  height: 1em;
  fill: currentColor;
  object-fit: contain;
  vertical-align: middle;
}

.author-profile__name {
  font-size: var(--font-size-h2);
  font-weight: bold;
  margin: 0 0 var(--space-2);
}

.author-profile__role {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

/* This page runs on the site's default dark scheme (no light-scheme
   override) — var(--color-text-muted) is a dark gray meant for light
   backgrounds and was nearly invisible here. */
.author-profile__bio {
  color: rgba(255, 255, 255, 0.75);
  max-width: 65ch;
}

.author-profile__badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
}

.author-profile__badge {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-light);
  padding: 5px 12px;
  border-radius: 999px;
}

/* "Hosts [Show]" — filled with that show's own color (set inline from
   mato_get_hosted_shows(), which reads Shows → the show → Color) so it
   reads as a fact tied to a specific show, distinct from the neutral,
   freeform Taste Badges next to it. Accent is only a fallback for the
   rare case a show has no color of its own. */
.author-profile__badge--host {
  background: var(--color-accent);
  border-color: var(--color-accent);
  padding: 0;
}
.author-profile__badge--host a {
  display: block;
  color: var(--color-white);
  text-decoration: none;
  padding: 5px 12px;
}

.author-articles {
  padding: var(--space-8) 0 var(--space-16);
}

/* ==== Publications / Podcasts toggle ==== */
.author-articles__tabs-nav {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.author-articles__tabs-nav button {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.author-articles__tabs-nav button:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}

.author-articles__tabs-nav button.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

[data-tab-panel] {
  display: none;
}

[data-tab-panel].is-active {
  display: block;
}

/* ==== Publications / Podcasts pager — prev/next arrows (as opposed
   to a full numbered page list), same circular-arrow-button treatment
   as the episode calendar's month nav. ==== */
.author-articles__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.author-articles__pager-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.author-articles__pager-btn svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

a.author-articles__pager-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.author-articles__pager-btn.is-disabled {
  opacity: 0.3;
  cursor: default;
}

.author-articles__pager-label {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

/* Keep the redesigned blog cards legible on this dark page. */
.author-articles .blog-item .title a { color: var(--color-white); }
.author-articles .blog-item .desc { color: rgba(255, 255, 255, 0.68); }
.author-articles .blog-item__meta { color: rgba(255, 255, 255, 0.62); }
.author-articles .blog-item__meta .blog-item__byline { color: rgba(255, 255, 255, 0.9); }

.author-profile__loc-inline {
  margin-top: var(--space-3);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* ==== Favorite films + Festivals covered, side by side in the space
   the films grid (max-width: 460px) leaves free next to it. ==== */
.author-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

/* min-width: 0 lets this shrink below its grid's min-content width
   (the default for a flex item is auto, i.e. "never smaller than my
   content wants to be") — without it, a long favorite-film title with
   nothing to wrap against could force the whole row wider than the
   viewport on a phone. */
.author-faves { flex: 0 0 auto; min-width: 0; max-width: 100%; }
.author-festivals { flex: 1 1 260px; min-width: 0; }

.author-faves__h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); margin-bottom: var(--space-3);
}
.author-faves__h .dot { width: 8px; height: 8px; border-radius: 50%; background: #00e054; }
.author-faves__jump {
  font-size: 11px; font-weight: 700; letter-spacing: normal; text-transform: none;
  color: var(--color-accent); text-decoration: none; white-space: nowrap;
}
.author-faves__jump:hover { text-decoration: underline; }
.author-faves__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); max-width: 620px; }
.author-fave { display: block; text-decoration: none; }
.author-fave__poster {
  aspect-ratio: 2 / 3; border-radius: var(--radius-sm); display: block;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6); position: relative; overflow: hidden;
  transition: transform var(--transition-fast);
  background-size: cover; background-position: center; background-color: var(--color-off-black);
}
.author-fave:hover .author-fave__poster { transform: translateY(-3px); }
.author-fave__title {
  display: block; margin-top: var(--space-2); color: rgba(255, 255, 255, 0.85);
  font-weight: 700; font-size: 12px; line-height: 1.3;
}
@media (max-width: 560px) { .author-faves__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==== Letterboxd modules (recent reviews, festivals, location) ==== */
.author-lb { padding: 0 0 var(--space-16); }
.author-lb__mod { margin-bottom: var(--space-12); }
.author-lb__h {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: 1rem; font-weight: 800; color: var(--color-white); margin-bottom: var(--space-4);
}
.author-lb__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lb-green);
}
.author-lb__tag .dot { width: 8px; height: 8px; border-radius: 50%; }

/* Dark variant of the reused review cards. */
.author-lb .rev { background: #2b2822; border-color: #3a352c; color: #ece3d2; }
.author-lb .rev__who { color: var(--color-white); }
.author-lb .rev__when { color: #a89d8b; }
.author-lb .rev__text { color: #c6bca9; }
.author-lb .rev-nav { background: #2b2822; border-color: #4a4438; color: #ece3d2; }

/* Festival stamps — link to the real festival page. Uses the site's own
   retro palette (not Letterboxd green) since this data comes from the
   site's own publication history, not Letterboxd. */
/* A horizontal scroll strip, capped to one row, rather than open
   wrapping — keeps this tidy as a prolific reporter's festival count
   grows over time instead of the section quietly getting taller. */
.author-stamps { display: flex; flex-wrap: nowrap; gap: var(--space-4); overflow-x: auto; padding: 2px 2px 6px; }
.author-stamp {
  display: inline-block; flex: none; text-decoration: none;
  border: 2px solid var(--color-retro-1); color: var(--color-retro-1); border-radius: var(--radius-md);
  padding: 9px 14px; transform: rotate(-3deg); text-align: center; background: #2b2822;
  transition: transform var(--transition-fast);
}
.author-stamp:nth-child(even) { transform: rotate(2.5deg); border-color: var(--color-retro-2); color: var(--color-retro-2); }
.author-stamp:nth-child(3n) { border-color: var(--color-retro-6); color: var(--color-retro-6); }
.author-stamp:hover { transform: rotate(0); }
.author-stamp .fest { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.author-stamp .cnt { font-size: 10px; margin-top: 2px; opacity: 0.7; }

/* Must-Read Pick — one of the author's own pieces, pinned from their
   Team Profile (team_pinned_post_id). Promoted to a full-width banner
   between the bio and Favorite Films/Festival Reporting so it's the
   most prominent single thing on the page after the name — a flat
   translucent accent tint, not a gradient, with a large thumbnail. */
.dot--accent { background: var(--color-accent); }
.author-mustread {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6);
  background: rgba(222, 75, 45, 0.1);
  border: 1px solid rgba(222, 75, 45, 0.35);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}
.author-mustread:hover { border-color: var(--color-accent); }
.author-mustread__art { flex: none; width: 168px; height: 118px; border-radius: var(--radius-sm); overflow: hidden; }
.author-mustread__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-mustread__body { min-width: 0; }
.author-mustread__kicker {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ff8a68;
}
.author-mustread__kicker svg { width: 12px; height: 12px; fill: currentColor; }
.author-mustread__title {
  display: block; margin-top: var(--space-2); color: var(--color-white); font-weight: 800; font-size: 1.2rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.author-mustread__cta { flex: none; margin-left: auto; color: var(--color-accent); font-size: 12px; font-weight: 700; white-space: nowrap; }

@media (max-width: 620px) {
  .author-mustread { flex-wrap: wrap; }
  .author-mustread__art { width: 100%; height: 160px; }
  .author-mustread__cta { margin-left: 0; }
}