/* Agreed homepage (CX) additions on top of AU: "All …" buttons in the sections, and the about section
   (logo · Hi, I'm Olly · My favourite film). */

/* ---------- "All reviews / lists / essays" pill buttons */
.more-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 2rem; }
.more-row .btn { margin-top: 0; }
.more { display: inline-block; padding: 0.8rem 1.4rem; border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; transition: background-color 0.25s, color 0.25s; }
.more:hover, .more:focus-visible { background: var(--c1); }
.blk--4 .more:hover, .blk--4 .more:focus-visible { background: var(--c2); color: #fff; } /* on the yellow block, blue like its cards */
.blk--3 .btn { transition: background-color 0.25s, color 0.25s; }
.blk--3 .btn:hover { background: var(--c1); color: var(--ink); }
/* in the red list block, "All lists" matches the existing "All ten" button */
.blk--3 .more { padding: 0.8rem 1.4rem; color: var(--ink); }
.blk--3 .btn { border: 3px solid var(--ink); color: var(--ink); } /* both list buttons: black outline, black text */
.blk--3 .more:hover, .blk--3 .more:focus-visible { background: var(--c1); color: var(--ink); }

/* ---------- about: logo, bio with numbers and tags, favourite film */
.ab .bio { max-width: 34ch; }
.ab--portrait { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ab-logo { overflow: hidden; aspect-ratio: 1; border: 4px solid var(--ink); border-radius: var(--r); background: var(--c5); }
.ab-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab--portrait { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); align-items: center; }
.ab--portrait .ab__text { text-align: center; }
.ab--portrait .bio { margin-inline: auto; }
.ab--portrait .ab-stats, .ab--portrait .tags { justify-content: center; }
.ab-fav { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ab-fav .lbl { margin-bottom: 0.7rem; justify-content: center; }
.ab-fav a { width: 64%; } /* smaller, so the column sits about level with the logo */
.ab-fav a { display: flex; flex-direction: column; gap: 0.35rem; }
.ab-fav figure { aspect-ratio: 3 / 4; overflow: hidden; border: 4px solid var(--ink); border-radius: calc(var(--r) - 8px); }
.ab-fav img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.ab-fav a:hover img { transform: scale(1.06); }
.ab-fav .t { margin-top: 0.3rem; font-family: "Archivo", sans-serif; font-weight: 900; font-style: italic; font-size: 1.15rem; line-height: 1.05; letter-spacing: -0.03em; }
.ab-fav .y { font-family: var(--type); font-size: 0.8rem; }
.ab-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.ab-stats li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 1.1rem; border: 3px solid var(--ink); border-radius: 999px; background: var(--c1); }
.ab-stats li:nth-child(2) { background: var(--c2); color: #fff; }
.ab-stats li:nth-child(3) { background: var(--c3); color: #fff; }
.ab-stats li:nth-child(4) { background: var(--c5); }
.ab-stats strong { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 1.5rem; letter-spacing: -0.02em; }
.ab-stats span { font-family: var(--type); font-size: 0.85rem; }
.ab-favs .lbl { margin-bottom: 0.8rem; }
.ab-favs .big { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 64em) {
  .ab--portrait { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab--portrait .ab__text { grid-column: 1 / -1; grid-row: 1; }
  .ab-logo, .ab-fav { max-width: 16rem; width: 100%; justify-self: center; }
}
@media (max-width: 44em) {
  .ab-logo, .ab-fav { max-width: none; }
  .more { padding: 0.65rem 1.1rem; }
  .blk--3 .more { padding: 0.8rem 1.4rem; }
}
/* favourite film without a review: same tile, not a link */
.ab-fav__in { display: flex; flex-direction: column; gap: 0.35rem; width: 64%; }
/* favourite film without a picture: its title on a yellow tile */
.ab-fav__type { display: grid; place-items: center; height: 100%; padding: 0.8rem; background: var(--c1); font-family: "Archivo", sans-serif; font-weight: 900; font-style: italic; font-size: 1.5rem; line-height: 1; letter-spacing: -0.03em; text-align: center; }