/* What remains of the poster treatment outside the menu (css/nav.css):
   a quieter wordmark, and captions that line up with the film's edge. */
body.portfolio-page .header .wordmark { font-size: clamp(22px, 2vw, 30px); }

/* Captions: the client lines up with the film's edge and the + moves to the far side. */
.confidence-mockup-page .film figcaption a { grid-template-columns: minmax(0, 1fr) 16px; column-gap: 12px; }
.confidence-mockup-page .film-client,
.confidence-mockup-page .film .film-title { grid-column: 1; }
.confidence-mockup-page .film figcaption a::before { grid-column: 2; justify-self: end; }

/* The category symbol leads the filter row, large: it is the page's mark now that there is no big title. */
.moving-page .index-toolbar { justify-content: flex-start; column-gap: clamp(20px, 2.3vw, 34px); margin-top: clamp(18px, 1.8vw, 28px); margin-bottom: clamp(12px, 1.4vw, 22px); }
.moving-page .index-toolbar .filter-symbol { order: -1; width: clamp(58px, 5.2vw, 78px); height: clamp(58px, 5.2vw, 78px); margin-left: 0; }
.moving-page .index-toolbar .filter-symbol svg { width: 100%; height: 100%; }
/* Each drawing has its own empty margin; shift it so the visible mark starts on the page's left edge. */
.moving-page .index-toolbar .filter-symbol [data-symbol="SELECTED"] { transform: translateX(-18.6%); }
.moving-page .index-toolbar .filter-symbol [data-symbol="COMMERCIAL"],
.moving-page .index-toolbar .filter-symbol [data-symbol="FILM"],
.moving-page .index-toolbar .filter-symbol [data-symbol="ALL"] { transform: translateX(-15.6%); }
.moving-page .index-toolbar .filter-symbol [data-symbol="AUTOMOTIVE"] { transform: translateX(-4.7%); }
.moving-page .index-toolbar .filter-symbol [data-symbol="MUSIC VIDEO"] { transform: translateX(-18.75%); }
.moving-page .index-toolbar .filters { flex: 1 1 auto; margin-bottom: 0; }

@media (max-width: 700px) {
  body.portfolio-page .header .wordmark { font-size: 26px; }
  /* Phones: the symbol sits beside two lines of filters. */
  .moving-page .index-toolbar { column-gap: 8px; align-items: center; margin-top: 14px; }
  .moving-page .index-toolbar .filter-symbol { width: 56px; height: 56px; margin-left: 0; }
  .moving-page .index-toolbar .filters { flex: 1 1 0; min-width: 0; gap: 4px 16px; }
  .confidence-mockup-page .index-toolbar .filters a[data-filter] { font-size: 13px; }
}