/* ==========================================================================
   AUDIOFREAKS MUSIC · site.css · the page layer
   Sits on top of styles.css (the brand system). Tokens only: no hex, no font
   names, no pixel values. The only literals are 0, 100%, 50%, 1, ratios and
   container-query breakpoints (CSS does not take var() there).
   scripts/lint-design.mjs checks this file.
   ========================================================================== */

[hidden] { display: none !important; }
/* Width and height attributes reserve space; CSS sets the real size. */
.af-sleeve, .af-gallery__photo, .af-photo, .af-lightbox__img { height: auto; }
.af-root { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.af-root main { flex: 1; }
.af-root p, .af-root h1, .af-root h2, .af-root h3, .af-root h4, .af-root figure { margin: 0; }
.af-root button { font: inherit; }
.af-stack--tight { gap: var(--space-2); }
.af-root .af-section__intro { margin-bottom: var(--space-7); margin-top: calc(var(--space-2) * -1); }
.af-measure-statement { max-width: var(--measure-statement); }
.af-measure { max-width: var(--measure); }
.af-skip {
  position: absolute; left: var(--space-4); top: calc(var(--space-9) * -1); z-index: 30;
  padding: var(--space-3) var(--space-4); background: var(--color-accent-fill); color: var(--color-on-accent);
}
.af-skip:focus { top: var(--space-4); }
html { scroll-behavior: smooth; }

/* -- Header: sticky, quiet ------------------------------------------------ */
.af-header { position: sticky; top: 0; z-index: 20; }
/* Links into the page land below the sticky menu. */
.af-root [id] { scroll-margin-top: calc(var(--size-touch) + var(--space-7)); }

/* Home masthead, under the menu (Matt, 23 October 2026): the eye, the
   AUDIOFREAKS MUSIC wordmark and #MakingHitsHappen, smaller than the old
   hero, centred. The menu bar above it is the same as on every page. */
.af-masthead { background: var(--gradient-eye-hero); padding-block: var(--space-6) var(--space-5); text-align: center; }
.af-masthead .af-container { display: grid; justify-items: center; gap: var(--space-4); }
.af-masthead__brand { display: grid; justify-items: center; gap: var(--space-4); text-decoration: none; color: inherit; }
.af-masthead .af-eye { width: min(15rem, 56vw); }
.af-root .af-masthead .af-hero__wordmark { margin: 0; font-size: clamp(0.85rem, 0.55rem + 0.9vw, 1.15rem); }
.af-root .af-masthead .af-hero__tag { font-size: clamp(1.1rem, 4.2vw, 2.4rem); margin: 0; }
.af-header__logo img { height: var(--space-3); width: auto; }
.af-menu-wrap > summary { list-style: none; cursor: pointer; }
.af-menu-wrap > summary::-webkit-details-marker { display: none; }
.af-menu-wrap:not([open]) > .af-menu { display: none; }
.af-menu-wrap[open] > .af-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-ground); border-bottom: var(--border-hair) solid var(--color-divider);
}
.af-menu .af-btn { margin-top: var(--space-5); }
.af-header__logo { flex: none; }
/* Eight links and the CTA need more room than the brand sheet's 60rem. */
@container (max-width: 72rem) {
  .af-nav, .af-header__cta { display: none; }
  .af-nav-toggle { display: inline-grid; }
}
@container (min-width: 72rem) { .af-menu-wrap { display: none; } }

/* -- Page head ------------------------------------------------------------- */
.af-page-head { padding-block: var(--space-9) var(--space-7); }
.af-page-head .af-filters { margin-top: var(--space-6); }
/* Search (Matt, 24 October 2026): artist or title, alongside the filters. */
.af-search { display: grid; gap: var(--space-2); width: min(100%, 28rem); margin-bottom: var(--space-4); }
.af-search .af-input { width: 100%; }

/* -- Filters: radio chips, no JavaScript needed ------------------------- */
.af-chip { position: relative; user-select: none; }
.af-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.af-chip:has(input:checked) { background: var(--color-text); color: var(--color-ground); border-color: var(--color-text); }
.af-chip:has(input:checked)::before { content: ""; width: var(--space-2); height: var(--space-2); background: currentColor; clip-path: var(--shape-triangle); }
.af-chip:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-halo-width) var(--color-focus-halo); }

.af-root:has([name="role"][value="producer"]:checked) [data-filterable] [data-role]:not([data-role~="producer"]),
.af-root:has([name="role"][value="remixer"]:checked) [data-filterable] [data-role]:not([data-role~="remixer"]),
.af-root:has([name="role"][value="consultant"]:checked) [data-filterable] [data-role]:not([data-role~="consultant"]),
.af-root:has([name="role"][value="publisher"]:checked) [data-filterable] [data-role]:not([data-role~="publisher"]),
.af-root:has([name="role"][value="manager"]:checked) [data-filterable] [data-role]:not([data-role~="manager"]),
.af-root:has([name="role"][value="tv"]:checked) [data-filterable] [data-role]:not([data-role~="tv"]),
.af-root:has([name="region"][value="west"]:checked) [data-filterable] [data-region]:not([data-region="west"]),
.af-root:has([name="region"][value="asia"]:checked) [data-filterable] [data-region]:not([data-region="asia"]) { display: none; }

/* -- Record tiles ----------------------------------------------------------- */
/* The position block is one <p> (lint-claims), so its parts are spans. */
.af-pos__chart { display: block; }
.af-pos__num { display: inline-block; }
.af-grid--records { gap: var(--space-5) var(--space-4); }
.af-tile { position: relative; }
.af-tile__title { overflow-wrap: anywhere; }
.af-tile__note { color: var(--color-text-muted); }
.af-tile--no1 .af-tile__note { color: var(--color-on-brand-muted); }
.af-sleeve--none { display: grid; place-items: center; background: var(--color-raised); color: var(--color-divider-strong); }
.af-sleeve--none .af-tri { width: var(--space-7); height: var(--space-7); }
.af-also { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.af-also li { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; }
.af-also .af-meta, .af-pos__chart .af-meta { color: var(--color-text-muted); }
.af-tile--no1 .af-also .af-meta { color: var(--color-on-brand-muted); }
.af-stats { display: grid; gap: var(--space-3); }
.af-tile__source { overflow-wrap: anywhere; }
.af-tile .af-original { background: transparent; }
.af-tile .af-original .af-meta { color: var(--color-text-muted); }
.af-tile:target { outline: var(--border-strong) solid var(--color-accent); outline-offset: var(--space-1); }

/* The tile Play sits on the seam between sleeve and body. */
.af-tile__play { z-index: 2; }
.af-play[data-state="playing"], .af-play[data-state="loading"] { background: var(--color-accent-fill-hover); }
.af-tile--no1 .af-play[data-state="playing"] { background: var(--color-on-brand); }

/* -- Record tiles, proof first (after mattmeyers.com) ---------------------
      The claim at the top, ruled-off numbers, the record with a small sleeve
      and its Play, then the credits and source pinned to the foot. */
.af-grid--records { gap: var(--space-4); }


.af-tile { border: var(--border-hair) solid var(--color-divider); }
.af-tile--top { border-top: var(--border-strong) solid var(--color-accent); }
.af-tile--top .af-pos__num { color: var(--color-accent); }
.af-tile--top .af-pos__num::after { content: ""; display: inline-block; width: 0.22em; height: 0.2em; margin-left: 0.12em; background: currentColor; clip-path: var(--shape-triangle); vertical-align: 0.7em; }
.af-credit { gap: var(--space-2); }
.af-credit .af-role { margin: 0; }
.af-tile .af-pos { border-top: 0; padding-block: 0 var(--space-4); gap: var(--space-2); }
.af-tile .af-pos__num { font-weight: var(--weight-light); }
.af-pos > * { min-width: 0; overflow-wrap: anywhere; }
.af-pos__chart {
  font-family: var(--font-display); font-size: var(--text-xs); line-height: var(--leading-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.af-pos__chart .af-meta { font-family: var(--font-display); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); margin-top: var(--space-1); }
.af-stats { gap: 0; }
.af-stat { display: grid; gap: var(--space-1); padding-block: 0 var(--space-4); margin-bottom: var(--space-4); border-bottom: var(--border-hair) solid var(--color-divider); }
.af-stats .af-stat:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.af-stat__value { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-regular); }
.af-stat__label {
  font-family: var(--font-display); font-size: var(--text-2xs); line-height: var(--leading-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted);
}
.af-tile--no1 .af-stat { border-color: var(--color-on-brand-muted); }
.af-tile__charted { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.af-tile--no1 .af-tile__charted { color: var(--color-on-brand-muted); }
.af-tile__thumb { width: var(--size-sleeve-md); height: var(--size-sleeve-md); object-fit: cover; display: grid; place-items: center; background: var(--color-placeholder); }
.af-tile__thumb .af-tri { width: var(--space-5); height: var(--space-5); }
.af-tile .af-tile__id { padding-right: 0; gap: var(--space-1); min-width: 0; }
.af-tile .af-tile__artist { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-md); line-height: var(--leading-sm); color: var(--color-text); margin: 0; overflow-wrap: anywhere; }
.af-tile .af-tile__title { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-sm); letter-spacing: var(--tracking-none); }
.af-tile .af-tile__label { font-family: var(--font-display); font-size: var(--text-2xs); line-height: var(--leading-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }
.af-tile--no1 .af-tile__artist, .af-tile--no1 .af-tile__title { color: var(--color-on-brand); }
.af-tile--no1 .af-also { border-color: var(--color-on-brand-muted); }

/* -- Record tiles, compact (Matt, 23 October 2026). The sleeve with Play
      beneath it and the record beside it; the chart position in one line
      (number, then chart, territory and date; no Billboard logo, Matt,
      24 October 2026); the numbers, smaller; everything else; the roles at the foot with the
      sources folded away beside them. Tiles in a row share a height and the
      foot sits on the bottom edge, so the roles line up across the row. */
.af-root .af-grid--records > .af-tile {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); container-type: normal;
}
.af-tile__work { display: grid; grid-template-columns: var(--size-sleeve-md) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.af-tile__media { display: grid; gap: var(--space-2); justify-items: start; }
.af-root .af-tile .af-tile__play { position: static; width: var(--size-sleeve-md); }
.af-tile .af-tile__id { align-self: start; }
.af-tile .af-pos {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); align-items: center;
  margin: 0; padding: var(--space-3) 0 0; border: 0; border-top: var(--border-hair) solid var(--color-divider);
}
.af-root .af-tile .af-pos__num { font-size: var(--text-3xl); line-height: 1; }
.af-tile .af-stats { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-hair) solid var(--color-divider); }
.af-root .af-tile .af-stat { padding: 0; margin: 0; border: 0; gap: 0; }
.af-root .af-tile .af-stat__value { font-size: var(--text-xl); line-height: var(--leading-xl); }
.af-tile .af-tile__certs { gap: var(--space-2); }
.af-tile .af-cert { padding: var(--space-1) var(--space-2); }
.af-tile .af-also { font-size: var(--text-sm); }
.af-tile .af-original { margin: 0; padding: var(--space-3); gap: var(--space-1); }

.af-tile__note { margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.af-tile__foot { margin-top: auto; padding-top: var(--space-3); border-top: var(--border-hair) solid var(--color-divider); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.af-tile__roles { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.af-tile__roles .af-role { margin: 0; }
.af-tile__src { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-muted); }
.af-tile__src summary { cursor: pointer; list-style: none; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.af-tile__src summary::-webkit-details-marker { display: none; }
.af-tile__src summary::after { content: " +"; }
.af-tile__src[open] summary::after { content: " −"; }
.af-tile__src[open] { flex-basis: 100%; }
.af-tile__src p { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.af-tile__src a { color: var(--color-text); }

/* -- Bands: white sections behind the black record blocks (after
      mattmeyers.com; Matt, 22 October 2026). The section re-points the
      tokens to light (data-theme="light"); each tile stays dark
      (data-theme="dark"), so the blocks stand out. The colour change is the
      divider, so bands and their neighbours drop the hairline. ---------- */
.af-band, .af-band + .af-section, .af-section + .af-band { border-top: 0; }
.af-band--join { padding-top: 0; }
.af-band .af-tile { border-color: transparent; }
.af-band .af-tile--top { border-top-color: var(--color-accent-on-dark); }

/* -- Even rows: the record grids step 1, 2, 3, 4 columns by the space they
      have; Home's eight featured records step 1, 2, 4, so no row is left
      half full. ---------------------------------------------------------- */
.af-section > .af-container { container-type: inline-size; }
.af-root .af-grid--records { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 36rem) { .af-root .af-grid--records { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 56rem) { .af-root .af-grid--records:not(.af-grid--featured) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 68rem) { .af-root .af-grid--records:not(.af-grid--none) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -- Home: the artist roll, quieter than a headline ---------------------- */
.af-root .af-featured { gap: var(--space-2) var(--space-5); max-width: calc(var(--container) * 0.85); }
.af-root .af-featured a, .af-root .af-featured span { font-size: var(--text-xl); line-height: var(--leading-xl); color: var(--color-text-muted); transition: color var(--motion-fast) var(--ease-out); }
.af-root .af-featured a:hover { color: var(--color-text); }

/* -- TV plates: logo, title, one short note, then role and Play --------- */
.af-plate__note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.af-plate__roles { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.af-plate .af-play--quiet { background: var(--color-accent-fill); color: var(--color-on-accent); }
.af-plate__source { font-size: var(--text-2xs); }

/* Seven TV credits: the flagship plate spans two columns, so the rows
   balance (3 + 4 at four columns, 1 + 2 + 2 + 2 at two). */
.af-root .af-plates--tv { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 36rem) {
  .af-root .af-plates--tv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-root .af-plates--tv > :first-child { grid-column: span 2; }
}
@container (min-width: 68rem) { .af-root .af-plates--tv { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -- Show more -------------------------------------------------------------- */
.af-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-7); }

/* The way on: "Show all records", "The full catalogue", "All news" and the
   rest sit at the foot of their section in a bold box, filling red on hover
   (Matt, 23 October 2026). They no longer pulse (24 October 2026): the pulse
   is kept for Start a conversation, so the one action that matters stands
   out. The brochure boxes keep their flash. */
.af-root .af-go-row { display: flex; justify-content: center; margin: var(--space-7) 0 0; }
.af-root .af-split .af-go-row { justify-content: flex-start; }
.af-go {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  min-height: calc(var(--size-touch) + var(--space-3)); padding: var(--space-4) var(--space-6);
  border: var(--border-strong) solid var(--color-text); background: var(--color-ground); color: var(--color-text); cursor: pointer;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.af-root a.af-go { text-decoration: none; }
.af-root button.af-go { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); }
.af-go--pulse::after {
  content: ""; position: absolute; inset: calc(-1 * var(--border-strong)); pointer-events: none;
  animation: af-pulse var(--motion-pulse) var(--ease-out) infinite;
}
.af-go__arrow { width: var(--size-tri); height: var(--size-tri); background: var(--color-accent); clip-path: var(--shape-triangle); rotate: 90deg; transition: translate var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out); }
.af-go__arrow--down { rotate: 180deg; }
.af-root .af-go:hover { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
.af-go:hover .af-go__arrow { background: var(--color-on-accent); translate: var(--space-1) 0; }
.af-go:hover .af-go__arrow--down { translate: 0 var(--space-1); }
.af-go:hover::after { animation: none; }
.af-go:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.af-more:has(.af-go) { flex-direction: column; justify-content: center; }
/* The brochure boxes swap between the black and the red scheme, so they are
   impossible to miss (Matt, 23 October 2026). 1.6 s a cycle: well under the
   three-flashes-a-second limit. */
.af-go--flash { animation: af-go-flash 1.6s steps(1, end) infinite; }
.af-go--flash .af-go__arrow { animation: af-go-flash-arrow 1.6s steps(1, end) infinite; }
@keyframes af-go-flash {
  0% { background: var(--color-ground); border-color: var(--color-text); color: var(--color-text); }
  50% { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
}
@keyframes af-go-flash-arrow {
  0% { background: var(--color-accent); }
  50% { background: var(--color-on-accent); }
}
.af-root .af-go--flash:hover, .af-go--flash:hover .af-go__arrow { animation: none; }
.af-empty { margin-block: var(--space-7); }
.af-empty__tri { width: var(--space-5); height: var(--space-5); color: var(--color-text-muted); }

/* -- Television plates ------------------------------------------------------ */
.af-plate--tv { grid-template-rows: var(--size-plate-h) 1fr; }
/* A white plate is a light surface in either theme: re-point the semantic
   tokens inside it so badges, links and focus read on white. */
.af-plate:not(.af-plate--dark) {
  --color-ground: var(--color-white);
  --color-text: var(--color-neutral-950);
  --color-text-muted: var(--color-neutral-600);
  --color-divider: var(--color-neutral-200);
  --color-divider-strong: var(--color-neutral-300);
  --color-accent: var(--color-accent-on-light);
  --color-focus: var(--color-neutral-950);
  --color-focus-halo: var(--color-white);
  color: var(--color-text);
}
.af-plate__logo img { max-height: var(--space-8); width: auto; }
.af-plate__name { font-family: var(--font-display); font-size: var(--text-xl); }
.af-plate__caption { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.af-plate__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-md); line-height: var(--leading-sm); }
.af-plate__note { color: var(--color-neutral-600); }
.af-plate__foot { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); }
.af-plate .af-play--quiet:hover, .af-plate .af-play[data-state="playing"] { background: var(--color-accent-fill); color: var(--color-on-accent); }

/* -- Discography ------------------------------------------------------------- */
.af-row__title b { font-weight: var(--weight-semibold); }
.af-row .af-meta { color: var(--color-text-muted); }

/* -- Docked player -------------------------------------------------------- */
.af-player--docked { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; }
.af-player__sleeve { flex: none; }
.af-player__embed { min-height: 0; border: 0; background: transparent; place-items: stretch; }
.af-player__embed iframe { display: block; width: 100%; border: 0; }
.af-player__embed--spotify iframe { height: var(--size-player-h); }
/* A YouTube video needs a real picture: it floats above the bar as a monitor. */
.af-player__embed--video {
  position: absolute; right: var(--gutter); bottom: calc(100% + var(--space-3));
  width: min(calc(var(--size-card-min) * 1.34), calc(100% - var(--gutter) * 2)); aspect-ratio: 16 / 9;
  background: var(--color-black); box-shadow: var(--shadow-lift); border: var(--border-hair) solid var(--color-divider-strong);
}
.af-player__embed--video iframe { height: 100%; }
.af-player__embed--video.is-min { width: 0; height: 0; border: 0; overflow: hidden; }
.af-root.has-player { padding-bottom: calc(var(--size-player-h) + var(--space-5)); }
.af-root.has-player .af-back-to-top { margin-bottom: 0; }
@container (max-width: 34rem) {
  .af-player__embed--video { position: absolute; right: var(--space-3); width: calc(100% - var(--space-6)); }
}

/* -- Home: the eye --------------------------------------------------------- */
.af-eye { width: min(var(--size-hero-eye), 78%); }
.af-eye svg { display: block; width: 100%; height: auto; overflow: visible; }
/* The wordmark under the eye, as on the logo: the drawn AUDIOFREAKS with
   its red triangle, then MUSIC set to the same letter height in the
   wordmark's thin, wide caps (Matt, 23 October 2026). */
.af-root .af-hero__wordmark {
  display: flex; align-items: center; justify-content: center; gap: 0.95em;
  margin: calc(-1 * var(--space-3)) 0 var(--space-2); font-size: clamp(0.95rem, 0.6rem + 1.4vw, 1.5rem); line-height: 1;
}
.af-hero__wordmark img { display: block; height: 0.74em; width: auto; }
/* MUSIC matched by eye to the drawn letters: light weight, pure white, 0.9 of
   the size and 0.5em tracking give the same stroke, height and spacing. */
.af-hero__wordmark .af-wordmark-type { color: var(--color-white); font-weight: var(--weight-light); font-size: 0.9em; letter-spacing: 0.5em; margin-right: -0.5em; }
/* About, on Home (Matt, 24 October 2026): the two intro paragraphs, bright,
   with the founders in bold, then the long biography. */
.af-about__intro { display: grid; gap: var(--space-5); max-width: var(--measure); }
.af-about__intro .af-lead { color: var(--color-text); }
.af-about__intro b { font-weight: var(--weight-semibold); }
.af-about__bio { display: grid; gap: var(--space-3); max-width: var(--measure); margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border-hair) solid var(--color-divider); }
.af-root .af-about__bio .af-body { margin: 0; }
/* The biography folds away under Read our story; the box sits under the intro. */
.af-root .af-about .af-go-row { justify-content: flex-start; }
.af-root .af-about .af-fold__bar--end { margin: var(--space-6) 0 0; }
/* The hero line: #MakingHitsHappen, medium weight, on one line at every
   width (the size follows the screen), with a slow pulse (Matt, 23 October
   2026). The pulse is off under reduced motion. */
.af-root .af-hero__tag {
  max-width: none; font-weight: var(--weight-medium); letter-spacing: var(--tracking-none);
  font-size: clamp(1.25rem, 5vw, 3.25rem); line-height: 1.1; white-space: nowrap;
  animation: af-tag-pulse 2.4s var(--ease-in-out) infinite;
}
.af-hero__hash { color: var(--color-accent); }
/* Hear us: the showreel button under the headline (Matt, 24 October 2026). */
.af-hearus { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border: var(--border-hair) solid var(--color-divider-strong); color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; transition: border-color var(--motion-base) var(--ease-out); }
.af-root a.af-hearus { text-decoration: none; }
.af-hearus:hover { border-color: var(--color-accent-fill); }
.af-hearus .af-play { pointer-events: none; }
/* On a phone, Hear us moves from the masthead to below the video (Matt, 30 October 2026). */
.af-hearus-bar { display: none; }
@media (max-width: 40rem) {
  .af-masthead .af-hearus { display: none; }
  .af-hearus-bar { display: flex; justify-content: center; padding: var(--space-5) var(--space-4) 0; }
}
@keyframes af-tag-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  50% { transform: scale(1.035); text-shadow: 0 0 var(--space-6) color-mix(in srgb, var(--color-accent-fill) 55%, transparent); }
}

/* The ticker under the hero: the records, moving slowly. Paused on hover. */
.af-marquee { overflow: hidden; border-block: var(--border-hair) solid var(--color-divider); padding-block: var(--space-4); }
.af-marquee__track { display: flex; gap: var(--space-7); width: max-content; animation: af-marquee calc(var(--motion-peak) * 60) linear infinite; }
.af-marquee:hover .af-marquee__track, .af-marquee:focus-within .af-marquee__track { animation-play-state: paused; }
.af-marquee__item { display: inline-flex; align-items: baseline; gap: var(--space-3); white-space: nowrap; font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-lg); text-decoration: none; color: var(--color-text); }
.af-marquee__item .af-meta { color: var(--color-text-muted); }
.af-marquee__item .af-tri { color: var(--color-accent); }
@keyframes af-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Home: the statement under the hero, a heading beside the text. */

/* The video bar (Matt, 23 October 2026): the montage of Asian music videos
   from audiofreaksmusic.com's home page, full width under the menu at its
   own shape, silent and looping, between two red rules as on the old site.
   Phones get a lighter file; with reduced motion or data saver the still
   frame shows instead (site.js). */
.af-video-bar {
  position: relative; width: 100%; aspect-ratio: 1920 / 856; max-height: 70vh; overflow: hidden;
  background: var(--color-ground); border-block: var(--space-2) solid var(--color-accent-fill);
}
.af-video-bar video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .af-video-bar video { display: none; }
  .af-video-bar { background: url(assets/video/hero-montage-poster.jpg) center / cover; }
}

/* Home: two columns that fold to one. */
.af-split { display: grid; gap: var(--space-8) var(--space-7); grid-template-columns: repeat(auto-fit, minmax(min(var(--size-card-min), 100%), 1fr)); }
.af-split > * { min-width: 0; }
/* News and Services on Home: each column runs to the foot, so All news and
   All services line up (Matt, 24 October 2026). */
.af-news-services > div { display: flex; flex-direction: column; }
.af-root .af-news-services .af-go-row { margin-top: auto; padding-top: var(--space-7); }
.af-services { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--color-divider); }
.af-services li { display: grid; grid-template-columns: var(--size-tri) 1fr; gap: var(--space-3); padding-block: var(--space-4); border-bottom: var(--border-hair) solid var(--color-divider); align-items: baseline; }
.af-services li::before { content: ""; width: var(--size-tri); height: calc(var(--size-tri) * 0.86); background: var(--color-accent); clip-path: var(--shape-triangle); }
.af-services b { font-family: var(--font-display); font-weight: var(--weight-regular); display: block; margin-bottom: var(--space-1); }
.af-services a { text-decoration: none; }

/* -- People ------------------------------------------------------------------ */

/* -- About ------------------------------------------------------------------- */
.af-timeline { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--color-divider); }
.af-timeline li { display: grid; grid-template-columns: var(--space-9) 1fr; gap: var(--space-4); padding-block: var(--space-5); border-bottom: var(--border-hair) solid var(--color-divider); }
.af-timeline__year { font-family: var(--font-display); font-weight: var(--weight-thin); font-size: var(--text-2xl); line-height: var(--leading-2xl); color: var(--color-accent); }
.af-timeline b { display: block; font-family: var(--font-display); font-weight: var(--weight-regular); margin-bottom: var(--space-1); }
.af-quote { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border-left: var(--border-strong) solid var(--color-accent); }
/* Home's proof band: one testimonial beside one case study. */
.af-proof-band { align-items: center; }
.af-proof-band__case { gap: var(--space-3); }
.af-root .af-proof-band__case .af-h3 { margin: 0; }
.af-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-lg); line-height: var(--leading-lg); }

/* -- Clients ------------------------------------------------------------------ */
.af-az { columns: var(--size-col-min); column-gap: var(--space-6); }
.af-az li { break-inside: avoid; padding-block: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); }
.af-root .af-az a { color: var(--color-text); }
.af-root .af-az a:hover { color: var(--color-accent); }
.af-az { list-style: none; margin: 0; padding: 0; }
.af-az a { text-decoration: none; }
.af-featured { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.af-featured a, .af-featured span { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-2xl); line-height: var(--leading-2xl); text-decoration: none; }

/* -- Clients, after mattmeyers.com: boxed tiles, the name as the mark and
      the type of work along the foot. Selected artists large; the A to Z
      by letter. -------------------------------------------------------- */
.af-root .af-clients__h { margin-top: var(--space-2); margin-bottom: var(--space-7); }
.af-root .af-clients__sub { margin: var(--space-8) 0 var(--space-5); }
.af-root .af-clients__h + .af-clients__sub { margin-top: 0; }
.af-root .af-letters { margin-bottom: var(--space-4); }
.af-root .af-letters a { font-family: var(--font-display); font-size: var(--text-sm); border-color: var(--color-divider-strong); }
.af-root .af-letters a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.af-clients__letter { padding-top: var(--space-6); border-top: var(--border-strong) solid var(--color-text); margin-top: var(--space-7); scroll-margin-top: var(--space-9); }
.af-clients__letter-h { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-3xl); line-height: var(--leading-3xl); color: var(--color-accent); margin-bottom: var(--space-5); }
.af-root .af-clients { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 36rem) { .af-root .af-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 56rem) { .af-root .af-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 68rem) { .af-root .af-clients:not(.af-clients--featured) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.af-client {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4);
  min-height: calc(var(--size-plate-h) * 1.15); padding: var(--space-4);
  border: var(--border-strong) solid var(--color-text); background: var(--color-ground);
  color: var(--color-text); text-decoration: none; min-width: 0;
  transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.af-root a.af-client:hover { border-color: var(--color-accent); color: var(--color-text); }
.af-root a.af-client:hover .af-client__name { color: var(--color-accent); }
.af-client__name { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-lg); line-height: var(--leading-xl); letter-spacing: var(--tracking-display); overflow-wrap: break-word; hyphens: auto; }
.af-client--big { min-height: calc(var(--size-plate-h) * 1.6); padding: var(--space-5); }
.af-client--big .af-client__name { font-size: var(--text-xl); line-height: var(--leading-xl); }
.af-client__type { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.af-client__works { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-text-muted); }
.af-client__logo { display: grid; place-items: start; padding: var(--space-3) var(--space-4); background: var(--color-white); align-self: stretch; }
.af-client__logo img { height: var(--space-7); width: auto; }
.af-client .af-role { white-space: normal; }
/* Phones: two across, with names and padding to suit. */
@container (max-width: 36rem) {
  .af-root .af-client { padding: var(--space-3); min-height: calc(var(--size-plate-h) * 0.9); gap: var(--space-3); }
  .af-root .af-client__name, .af-root .af-client--big .af-client__name { font-size: var(--text-md); line-height: var(--leading-sm); }
  .af-root .af-clients { gap: var(--space-3); }
}

/* Television on Clients: the Audiofreaks red, white tiles, full-colour
   logos (Matt, 22 October 2026). Inside the band the text is white; each
   tile is a light surface (data-theme="light") with black text. */
.af-band--red {
  background: var(--color-accent-fill);
  --color-text: var(--color-on-accent);
  --color-text-muted: var(--color-on-brand-muted);
  --color-accent: var(--color-on-accent);
  color: var(--color-text);
}
.af-band--red + .af-section { border-top: 0; }
.af-band--red .af-client { border-color: transparent; }
.af-root .af-band--red a.af-client:hover { border-color: var(--color-neutral-950); }
.af-client--logo .af-client__logo { background: none; padding: 0; display: flex; align-items: center; min-height: var(--space-8); }
.af-client--logo .af-client__logo img { height: var(--space-8); max-width: 100%; width: auto; object-fit: contain; }
.af-client--logo .af-client__works { color: var(--color-text); }
.af-root .af-clients--tv > :first-child { grid-column: span 2; }

/* -- News --------------------------------------------------------------------- */
.af-year { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(var(--size-col-min), 100%), 1fr)); padding-block: var(--space-7); border-top: var(--border-hair) solid var(--color-divider); }
.af-year__label { font-family: var(--font-display); font-weight: var(--weight-thin); font-size: var(--text-4xl); line-height: var(--leading-4xl); color: var(--color-accent); position: sticky; top: var(--space-9); align-self: start; }
.af-year__items { grid-column: span 3; display: grid; }
.af-year__label--archive { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
/* Narrow (Matt, 29 October 2026): the year sits above its stories, which
   take the full width. */
@container (max-width: 48rem) { .af-year { grid-template-columns: minmax(0, 1fr); } .af-year__items { grid-column: auto; } .af-year__label { position: static; } }
.af-year-wrap { container-type: inline-size; }
.af-news-card { grid-template-columns: var(--size-sleeve-md) minmax(0, 1fr); }
.af-news-card--text { grid-template-columns: minmax(0, 1fr); }
.af-news-card__body p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-text-muted); }
.af-years-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.af-years-nav a { min-height: var(--size-touch); min-width: var(--size-touch); display: inline-grid; place-items: center; padding-inline: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); text-decoration: none; border: var(--border-hair) solid var(--color-divider); }

/* -- Gallery ---------------------------------------------------------------- */
.af-gallery a { display: block; color: inherit; text-decoration: none; }
/* The gallery is in full colour (Matt, 22 October 2026), overriding the
   brand's black-and-white rule for people on this page. */
.af-root .af-gallery__photo { filter: none; transition: opacity var(--motion-fast) var(--ease-out); }
.af-gallery a:hover .af-gallery__photo { opacity: 0.85; }
.af-lightbox-dialog { padding: 0; border: 0; max-width: 100%; max-height: 100%; width: 100%; height: 100%; background: transparent; }
.af-lightbox-dialog::backdrop { background: var(--color-scrim); }
.af-lightbox-dialog .af-lightbox { height: 100%; }
.af-lightbox__img { aspect-ratio: auto; max-height: calc(100vh - var(--space-10)); }

/* -- Zoom: every photo and sleeve opens full screen ---------------------- */
.af-zoom { display: block; cursor: zoom-in; }
img.af-tile__thumb, img.af-track__sleeve, img.af-row__sleeve, .af-gallery a, .af-zoom img { cursor: zoom-in; }
img.af-tile__thumb:focus-visible, img.af-track__sleeve:focus-visible, img.af-row__sleeve:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.af-news-card__lead { font-family: var(--font-display); font-size: var(--text-2xs); line-height: var(--leading-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); }
.af-root .af-news-card__body .af-news-card__lead { color: var(--color-accent); }
.af-news-card__photos { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--size-col-min) * 0.75), 100%), 1fr)); margin-block: var(--space-2); }
.af-news-card__photo { display: grid; gap: var(--space-1); margin: 0; }
.af-news-card__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-placeholder); transition: opacity var(--motion-fast) var(--ease-out); }
.af-zoom:hover .af-news-card__img { opacity: 0.85; }
.af-root .af-news-card__photo figcaption { font-size: var(--text-2xs); color: var(--color-text-muted); }
.af-lightbox__img { background: transparent; }

/* News, balanced: more air between stories, a reading measure for the text,
   photos in an even strip with quiet captions. */
.af-year-wrap .af-news-card { padding-block: var(--space-6); gap: var(--space-5); border-top-color: var(--color-divider); }
.af-year-wrap .af-news-card:first-child, .af-year-wrap .af-news-card.is-first { border-top: 0; padding-top: 0; }
.af-year-wrap .af-news-card.is-first:not(:first-child) { border-top: 0; }
.af-year-wrap .af-news-card__body { gap: var(--space-3); max-width: calc(var(--measure) + var(--space-9)); }
.af-year-wrap .af-news-card__title { font-size: var(--text-lg); line-height: var(--leading-xl); }
.af-root .af-news-card__body p { max-width: var(--measure); }
.af-root .af-news-card__photo figcaption { font-family: var(--font-body); font-size: var(--text-2xs); line-height: var(--leading-2xs); color: var(--color-text-muted); }
.af-news-card__photos { grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--size-col-min) * 0.9), 45%), 1fr)); gap: var(--space-4) var(--space-3); margin-block: var(--space-2) var(--space-1); }
/* Every news image the same size and square. auto-fill keeps empty tracks,
   so one image is as big as one of four. */
.af-root .af-news-card__img { aspect-ratio: 1; }
/* Sleeves, documents and announcement graphics show whole, on the page
   ground; only photos fill the square (Matt, 29 October 2026). */
.af-root .af-news-card__img--whole { object-fit: contain; background: var(--color-ground); }
.af-year { gap: var(--space-6); }

/* News filter: radio chips and :has(), so it works without JavaScript.
   With JavaScript, site.js also hides years left empty. */
.af-root:has([name="kind"][value="charts"]:checked) [data-news-list] article:not([data-type="charts"]),
.af-root:has([name="kind"][value="releases"]:checked) [data-news-list] article:not([data-type="releases"]),
.af-root:has([name="kind"][value="tv"]:checked) [data-news-list] article:not([data-type="tv"]),
.af-root:has([name="kind"][value="studio"]:checked) [data-news-list] article:not([data-type="studio"]),
.af-root:has([name="kind"][value="company"]:checked) [data-news-list] article:not([data-type="company"]) { display: none; }
.af-page-head [data-news-filters] { margin-top: var(--space-5); }
.af-page-head [data-news-filters] + .af-years-nav { margin-top: var(--space-4); }

/* -- Biography ------------------------------------------------------------- */
.af-page-head .af-years-nav { margin-top: var(--space-4); }

/* -- Contact ---------------------------------------------------------------- */
.af-form { display: grid; gap: var(--space-5); max-width: var(--container); }
.af-form textarea.af-input { min-height: calc(var(--space-10) + var(--space-8)); resize: vertical; }
.af-form__note { color: var(--color-text-muted); }
.af-form__status { min-height: var(--space-5); }

/* -- Footer ------------------------------------------------------------------ */
.af-footer .af-header__logo img { height: var(--space-3); }
.af-footer { margin-top: var(--space-9); }

/* -- Track rows: the listening library (after The Meyers Bros website) --
      Play, sleeve, title and artist, the proven chart line, the facts, then
      Stream, time, the track's own waveform and the details toggle. */
.af-tracks { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--color-divider); container-type: inline-size; }
.af-track {
  display: grid; align-items: center; gap: var(--space-3) var(--space-4);
  grid-template-columns: var(--size-play-w) var(--size-sleeve-sm) minmax(0, 1fr) auto;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: var(--border-hair) solid var(--color-divider);
  transition: background-color var(--motion-fast) var(--ease-out);
}
.af-track:hover { background: var(--color-surface); }
.af-track.is-current { background: var(--color-surface); box-shadow: inset var(--border-strong) 0 0 var(--color-accent); }
.af-track__play { display: grid; place-items: center; }
.af-track__sleeve { width: var(--size-sleeve-sm); height: var(--size-sleeve-sm); object-fit: cover; background: var(--color-placeholder); display: block; }
.af-track__id { min-width: 0; display: grid; gap: var(--space-1); }
.af-track__id > * { min-width: 0; }
.af-track__lead--inline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-track__name { margin: 0; font-size: inherit; font-weight: inherit; }
.af-track__title {
  all: unset; cursor: pointer; display: block; max-width: 100%;
  font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-md); line-height: var(--leading-sm);
  letter-spacing: var(--tracking-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-track__title:hover, .af-track.is-current .af-track__title { color: var(--color-accent); }
.af-track__title:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.af-track__version { color: var(--color-text-muted); font-weight: var(--weight-light); }
.af-track__artist { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-track__lead { font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); }
.af-track__meta { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.af-track__facts { display: none; min-width: 0; }
.af-track__facts .af-track__lead, .af-track__facts .af-track__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-track__end { display: flex; align-items: center; gap: var(--space-3); }
.af-track__stream { display: none; }
.af-track__stream:not(:empty) {
  padding: var(--space-1) var(--space-3); border: var(--border-hair) solid var(--color-accent);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent);
}
/* Phones: tighter gaps, and the chevron is the only control on the right. */
.af-track { column-gap: var(--space-2); }
.af-track__toggle svg { transition: transform var(--motion-base) var(--ease-out); }
.af-track.is-open .af-track__toggle svg { transform: rotate(180deg); }
.af-track__more { grid-column: 3 / -1; display: grid; gap: var(--space-4); padding-block: var(--space-2) var(--space-3); }
.js .af-track:not(.is-open) .af-track__more { display: none; }
.af-btn--sm { padding: var(--space-2) var(--space-3); }
@container (min-width: 46rem) {
  .af-track { grid-template-columns: var(--size-play-w) var(--size-sleeve-sm) minmax(0, 1.15fr) minmax(0, 1fr) auto; column-gap: var(--space-4); }
  .af-track__facts { display: block; }
  .af-track__lead--inline { display: none; }
  /* Every row keeps the same slots, so the columns line up. */
  .af-track__stream { display: inline-block; min-width: calc(var(--space-9) - var(--space-3)); text-align: center; }
  .af-track__more { grid-column: 3 / -1; }
}

/* The waveform: a muted copy with an accent copy over it, clipped to the
   progress (set by site.js as --progress on the scrubber). */
.af-scrub__wave { position: relative; color: var(--color-divider-strong); }
.af-scrub__wave__base, .af-scrub__wave__fill { position: absolute; inset: 0; }
.af-scrub__wave svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.af-scrub__wave__fill { color: var(--color-accent); clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0); }

/* The catalogue's type, genre and style filters: radio chips and :has(), no
   JavaScript. A track can have several of each; the filters combine. The
   rules themselves come from filterCss() in src/af/catalogue.mjs and the
   build writes them in at the marker below. The styles row for a genre
   shows only while that genre is chosen. */
.af-styles { display: none; }
.af-root:has([name="type"][value="remix"]:checked) [data-catalogue] .af-track:not([data-type~="remix"]),
.af-root:has([name="type"][value="production"]:checked) [data-catalogue] .af-track:not([data-type~="production"]),
.af-root:has([name="type"][value="published"]:checked) [data-catalogue] .af-track:not([data-type~="published"]),
.af-root:has([name="genre"][value="pop"]:checked) [data-catalogue] .af-track:not([data-genre~="pop"]),
.af-root:has([name="genre"][value="dance"]:checked) [data-catalogue] .af-track:not([data-genre~="dance"]),
.af-root:has([name="genre"][value="hiphop"]:checked) [data-catalogue] .af-track:not([data-genre~="hiphop"]),
.af-root:has([name="genre"][value="rnb"]:checked) [data-catalogue] .af-track:not([data-genre~="rnb"]),
.af-root:has([name="genre"][value="rock"]:checked) [data-catalogue] .af-track:not([data-genre~="rock"]),
.af-root:has([name="genre"][value="indie"]:checked) [data-catalogue] .af-track:not([data-genre~="indie"]),
.af-root:has([name="genre"][value="acoustic"]:checked) [data-catalogue] .af-track:not([data-genre~="acoustic"]),
.af-root:has([name="genre"][value="country"]:checked) [data-catalogue] .af-track:not([data-genre~="country"]),
.af-root:has([name="genre"][value="latin"]:checked) [data-catalogue] .af-track:not([data-genre~="latin"]),
.af-root:has([name="genre"][value="afro"]:checked) [data-catalogue] .af-track:not([data-genre~="afro"]),
.af-root:has([name="genre"][value="asian"]:checked) [data-catalogue] .af-track:not([data-genre~="asian"]),
.af-root:has([name="genre"][value="funk"]:checked) [data-catalogue] .af-track:not([data-genre~="funk"]),
.af-root:has([name="genre"][value="jazz"]:checked) [data-catalogue] .af-track:not([data-genre~="jazz"]),
.af-root:has([name="genre"][value="cinematic"]:checked) [data-catalogue] .af-track:not([data-genre~="cinematic"]),
.af-root:has([name="genre"][value="chill"]:checked) [data-catalogue] .af-track:not([data-genre~="chill"]),
.af-root:has([name="genre"][value="pop"]:checked):has([name="style-pop"][value="pop-dancepop"]:checked) [data-catalogue] .af-track:not([data-style~="pop-dancepop"]),
.af-root:has([name="genre"][value="pop"]:checked):has([name="style-pop"][value="pop-rnbpop"]:checked) [data-catalogue] .af-track:not([data-style~="pop-rnbpop"]),
.af-root:has([name="genre"][value="pop"]:checked):has([name="style-pop"][value="pop-synthpop"]:checked) [data-catalogue] .af-track:not([data-style~="pop-synthpop"]),
.af-root:has([name="genre"][value="pop"]:checked):has([name="style-pop"][value="pop-ballad"]:checked) [data-catalogue] .af-track:not([data-style~="pop-ballad"]),
.af-root:has([name="genre"][value="pop"]:checked):has([name="style-pop"][value="pop-teen"]:checked) [data-catalogue] .af-track:not([data-style~="pop-teen"]),
.af-root:has([name="genre"][value="pop"]:checked):has([name="style-pop"][value="pop-poprock"]:checked) [data-catalogue] .af-track:not([data-style~="pop-poprock"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-house"]:checked) [data-catalogue] .af-track:not([data-style~="dance-house"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-deephouse"]:checked) [data-catalogue] .af-track:not([data-style~="dance-deephouse"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-techhouse"]:checked) [data-catalogue] .af-track:not([data-style~="dance-techhouse"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-pianohouse"]:checked) [data-catalogue] .af-track:not([data-style~="dance-pianohouse"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-progressive"]:checked) [data-catalogue] .af-track:not([data-style~="dance-progressive"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-trance"]:checked) [data-catalogue] .af-track:not([data-style~="dance-trance"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-dnb"]:checked) [data-catalogue] .af-track:not([data-style~="dance-dnb"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-ukgarage"]:checked) [data-catalogue] .af-track:not([data-style~="dance-ukgarage"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-edm"]:checked) [data-catalogue] .af-track:not([data-style~="dance-edm"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-electro"]:checked) [data-catalogue] .af-track:not([data-style~="dance-electro"]),
.af-root:has([name="genre"][value="dance"]:checked):has([name="style-dance"][value="dance-nudisco"]:checked) [data-catalogue] .af-track:not([data-style~="dance-nudisco"]),
.af-root:has([name="genre"][value="hiphop"]:checked):has([name="style-hiphop"][value="hiphop-commercial"]:checked) [data-catalogue] .af-track:not([data-style~="hiphop-commercial"]),
.af-root:has([name="genre"][value="hiphop"]:checked):has([name="style-hiphop"][value="hiphop-trap"]:checked) [data-catalogue] .af-track:not([data-style~="hiphop-trap"]),
.af-root:has([name="genre"][value="hiphop"]:checked):has([name="style-hiphop"][value="hiphop-oldschool"]:checked) [data-catalogue] .af-track:not([data-style~="hiphop-oldschool"]),
.af-root:has([name="genre"][value="hiphop"]:checked):has([name="style-hiphop"][value="hiphop-ukrap"]:checked) [data-catalogue] .af-track:not([data-style~="hiphop-ukrap"]),
.af-root:has([name="genre"][value="hiphop"]:checked):has([name="style-hiphop"][value="hiphop-drill"]:checked) [data-catalogue] .af-track:not([data-style~="hiphop-drill"]),
.af-root:has([name="genre"][value="rnb"]:checked):has([name="style-rnb"][value="rnb-contemporary"]:checked) [data-catalogue] .af-track:not([data-style~="rnb-contemporary"]),
.af-root:has([name="genre"][value="rnb"]:checked):has([name="style-rnb"][value="rnb-neosoul"]:checked) [data-catalogue] .af-track:not([data-style~="rnb-neosoul"]),
.af-root:has([name="genre"][value="rnb"]:checked):has([name="style-rnb"][value="rnb-classicsoul"]:checked) [data-catalogue] .af-track:not([data-style~="rnb-classicsoul"]),
.af-root:has([name="genre"][value="rnb"]:checked):has([name="style-rnb"][value="rnb-gospel"]:checked) [data-catalogue] .af-track:not([data-style~="rnb-gospel"]),
.af-root:has([name="genre"][value="rock"]:checked):has([name="style-rock"][value="rock-poprock"]:checked) [data-catalogue] .af-track:not([data-style~="rock-poprock"]),
.af-root:has([name="genre"][value="rock"]:checked):has([name="style-rock"][value="rock-classicrock"]:checked) [data-catalogue] .af-track:not([data-style~="rock-classicrock"]),
.af-root:has([name="genre"][value="rock"]:checked):has([name="style-rock"][value="rock-hardrock"]:checked) [data-catalogue] .af-track:not([data-style~="rock-hardrock"]),
.af-root:has([name="genre"][value="rock"]:checked):has([name="style-rock"][value="rock-punk"]:checked) [data-catalogue] .af-track:not([data-style~="rock-punk"]),
.af-root:has([name="genre"][value="indie"]:checked):has([name="style-indie"][value="indie-indiepop"]:checked) [data-catalogue] .af-track:not([data-style~="indie-indiepop"]),
.af-root:has([name="genre"][value="indie"]:checked):has([name="style-indie"][value="indie-indierock"]:checked) [data-catalogue] .af-track:not([data-style~="indie-indierock"]),
.af-root:has([name="genre"][value="indie"]:checked):has([name="style-indie"][value="indie-altelectronic"]:checked) [data-catalogue] .af-track:not([data-style~="indie-altelectronic"]),
.af-root:has([name="genre"][value="indie"]:checked):has([name="style-indie"][value="indie-dreampop"]:checked) [data-catalogue] .af-track:not([data-style~="indie-dreampop"]),
.af-root:has([name="genre"][value="acoustic"]:checked):has([name="style-acoustic"][value="acoustic-acousticpop"]:checked) [data-catalogue] .af-track:not([data-style~="acoustic-acousticpop"]),
.af-root:has([name="genre"][value="acoustic"]:checked):has([name="style-acoustic"][value="acoustic-pianoballad"]:checked) [data-catalogue] .af-track:not([data-style~="acoustic-pianoballad"]),
.af-root:has([name="genre"][value="acoustic"]:checked):has([name="style-acoustic"][value="acoustic-folkpop"]:checked) [data-catalogue] .af-track:not([data-style~="acoustic-folkpop"]),
.af-root:has([name="genre"][value="country"]:checked):has([name="style-country"][value="country-moderncountry"]:checked) [data-catalogue] .af-track:not([data-style~="country-moderncountry"]),
.af-root:has([name="genre"][value="country"]:checked):has([name="style-country"][value="country-folk"]:checked) [data-catalogue] .af-track:not([data-style~="country-folk"]),
.af-root:has([name="genre"][value="country"]:checked):has([name="style-country"][value="country-americana"]:checked) [data-catalogue] .af-track:not([data-style~="country-americana"]),
.af-root:has([name="genre"][value="latin"]:checked):has([name="style-latin"][value="latin-reggaeton"]:checked) [data-catalogue] .af-track:not([data-style~="latin-reggaeton"]),
.af-root:has([name="genre"][value="latin"]:checked):has([name="style-latin"][value="latin-latinpop"]:checked) [data-catalogue] .af-track:not([data-style~="latin-latinpop"]),
.af-root:has([name="genre"][value="latin"]:checked):has([name="style-latin"][value="latin-tropical"]:checked) [data-catalogue] .af-track:not([data-style~="latin-tropical"]),
.af-root:has([name="genre"][value="afro"]:checked):has([name="style-afro"][value="afro-afrobeats"]:checked) [data-catalogue] .af-track:not([data-style~="afro-afrobeats"]),
.af-root:has([name="genre"][value="afro"]:checked):has([name="style-afro"][value="afro-reggae"]:checked) [data-catalogue] .af-track:not([data-style~="afro-reggae"]),
.af-root:has([name="genre"][value="afro"]:checked):has([name="style-afro"][value="afro-dancehall"]:checked) [data-catalogue] .af-track:not([data-style~="afro-dancehall"]),
.af-root:has([name="genre"][value="afro"]:checked):has([name="style-afro"][value="afro-amapiano"]:checked) [data-catalogue] .af-track:not([data-style~="afro-amapiano"]),
.af-root:has([name="genre"][value="asian"]:checked):has([name="style-asian"][value="asian-kpop"]:checked) [data-catalogue] .af-track:not([data-style~="asian-kpop"]),
.af-root:has([name="genre"][value="asian"]:checked):has([name="style-asian"][value="asian-jpop"]:checked) [data-catalogue] .af-track:not([data-style~="asian-jpop"]),
.af-root:has([name="genre"][value="asian"]:checked):has([name="style-asian"][value="asian-cpop"]:checked) [data-catalogue] .af-track:not([data-style~="asian-cpop"]),
.af-root:has([name="genre"][value="funk"]:checked):has([name="style-funk"][value="funk-funk"]:checked) [data-catalogue] .af-track:not([data-style~="funk-funk"]),
.af-root:has([name="genre"][value="funk"]:checked):has([name="style-funk"][value="funk-disco"]:checked) [data-catalogue] .af-track:not([data-style~="funk-disco"]),
.af-root:has([name="genre"][value="funk"]:checked):has([name="style-funk"][value="funk-boogie"]:checked) [data-catalogue] .af-track:not([data-style~="funk-boogie"]),
.af-root:has([name="genre"][value="jazz"]:checked):has([name="style-jazz"][value="jazz-jazz"]:checked) [data-catalogue] .af-track:not([data-style~="jazz-jazz"]),
.af-root:has([name="genre"][value="jazz"]:checked):has([name="style-jazz"][value="jazz-swing"]:checked) [data-catalogue] .af-track:not([data-style~="jazz-swing"]),
.af-root:has([name="genre"][value="jazz"]:checked):has([name="style-jazz"][value="jazz-blues"]:checked) [data-catalogue] .af-track:not([data-style~="jazz-blues"]),
.af-root:has([name="genre"][value="jazz"]:checked):has([name="style-jazz"][value="jazz-lounge"]:checked) [data-catalogue] .af-track:not([data-style~="jazz-lounge"]),
.af-root:has([name="genre"][value="cinematic"]:checked):has([name="style-cinematic"][value="cinematic-trailer"]:checked) [data-catalogue] .af-track:not([data-style~="cinematic-trailer"]),
.af-root:has([name="genre"][value="cinematic"]:checked):has([name="style-cinematic"][value="cinematic-score"]:checked) [data-catalogue] .af-track:not([data-style~="cinematic-score"]),
.af-root:has([name="genre"][value="cinematic"]:checked):has([name="style-cinematic"][value="cinematic-classical"]:checked) [data-catalogue] .af-track:not([data-style~="cinematic-classical"]),
.af-root:has([name="genre"][value="cinematic"]:checked):has([name="style-cinematic"][value="cinematic-tension"]:checked) [data-catalogue] .af-track:not([data-style~="cinematic-tension"]),
.af-root:has([name="genre"][value="chill"]:checked):has([name="style-chill"][value="chill-chillout"]:checked) [data-catalogue] .af-track:not([data-style~="chill-chillout"]),
.af-root:has([name="genre"][value="chill"]:checked):has([name="style-chill"][value="chill-lofi"]:checked) [data-catalogue] .af-track:not([data-style~="chill-lofi"]),
.af-root:has([name="genre"][value="chill"]:checked):has([name="style-chill"][value="chill-ambient"]:checked) [data-catalogue] .af-track:not([data-style~="chill-ambient"]),
.af-root:has([name="genre"][value="chill"]:checked):has([name="style-chill"][value="chill-downtempo"]:checked) [data-catalogue] .af-track:not([data-style~="chill-downtempo"]) { display: none; }
.af-root:has([name="genre"][value="pop"]:checked) .af-styles[data-for="pop"],
.af-root:has([name="genre"][value="dance"]:checked) .af-styles[data-for="dance"],
.af-root:has([name="genre"][value="hiphop"]:checked) .af-styles[data-for="hiphop"],
.af-root:has([name="genre"][value="rnb"]:checked) .af-styles[data-for="rnb"],
.af-root:has([name="genre"][value="rock"]:checked) .af-styles[data-for="rock"],
.af-root:has([name="genre"][value="indie"]:checked) .af-styles[data-for="indie"],
.af-root:has([name="genre"][value="acoustic"]:checked) .af-styles[data-for="acoustic"],
.af-root:has([name="genre"][value="country"]:checked) .af-styles[data-for="country"],
.af-root:has([name="genre"][value="latin"]:checked) .af-styles[data-for="latin"],
.af-root:has([name="genre"][value="afro"]:checked) .af-styles[data-for="afro"],
.af-root:has([name="genre"][value="asian"]:checked) .af-styles[data-for="asian"],
.af-root:has([name="genre"][value="funk"]:checked) .af-styles[data-for="funk"],
.af-root:has([name="genre"][value="jazz"]:checked) .af-styles[data-for="jazz"],
.af-root:has([name="genre"][value="cinematic"]:checked) .af-styles[data-for="cinematic"],
.af-root:has([name="genre"][value="chill"]:checked) .af-styles[data-for="chill"] { display: grid; }


/* Clients: the Artists region filter (Asia / Western). Tiles, empty letter
   groups and their letters in the bar all drop out together. */
.af-clients__filter { margin-block: var(--space-5) var(--space-6); }
.af-root:has([name="artist-region"][value="asia"]:checked) [data-artists] .af-client:not([data-region="asia"]),
.af-root:has([name="artist-region"][value="asia"]:checked) [data-artists] .af-clients__letter:not([data-regions~="asia"]),
.af-root:has([name="artist-region"][value="asia"]:checked) .af-letters a:not([data-regions~="asia"]),
.af-root:has([name="artist-region"][value="west"]:checked) [data-artists] .af-client:not([data-region="west"]),
.af-root:has([name="artist-region"][value="west"]:checked) [data-artists] .af-clients__letter:not([data-regions~="west"]),
.af-root:has([name="artist-region"][value="west"]:checked) .af-letters a:not([data-regions~="west"]) { display: none; }

/* -- The docked player, audio mode: the waveform is the scrubber ---------- */
.af-player__embed--audio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.af-scrub { position: relative; height: var(--space-7); cursor: pointer; touch-action: none; }
.af-scrub:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.af-scrub__wave { position: absolute; inset: 0; }
.af-player__times { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.af-player__step { display: none; }
.af-player.is-audio .af-player__step { display: inline-grid; }
@container (max-width: 34rem) { .af-player__embed--audio .af-player__times { display: none; } }
/* On a phone (Matt, 30 October 2026): the brand sheet's two-row player is a
   container query on the player itself, which cannot match its own
   container, so the bar stayed in three columns and pushed the controls off
   screen. Here by screen width: the record across the top, so its title
   reads; the waveform and the controls side by side below (a Spotify
   embed takes the full width). The Playing / Paused word is still read out,
   just not shown. The bar clears the phone's home bar. */
@media (max-width: 34rem) {
  .af-player { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
  .af-player.is-audio .af-player__now { grid-column: 1 / -1; }
  .af-player__embed { grid-column: auto; order: 0; }
  .af-player__embed--spotify { grid-column: 1 / -1; }
  .af-player__embed--audio { grid-template-columns: minmax(0, 1fr); }
  .af-player__controls { gap: 0; }
  .af-player__state { position: absolute; width: var(--border-hair); height: var(--border-hair); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .af-root.has-player { padding-bottom: calc(var(--size-player-h) + var(--space-7) + var(--space-5)); }
}

/* -- Back to top and the scroll rail (Matt, 22 October 2026) ------------
      A button fixed bottom right takes you straight to the top; it shows
      once you have scrolled. On long pages a rail on the right shows where
      you are and can be dragged or clicked to move. Without JavaScript the
      button is always there and the rail is not. */
.af-to-top {
  position: fixed; right: var(--gutter); bottom: var(--space-5); z-index: 24;
  width: var(--size-touch); height: var(--size-touch);
  background: var(--color-accent-fill); color: var(--color-on-accent); border-color: transparent;
  box-shadow: var(--shadow-lift);
  transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), bottom var(--motion-base) var(--ease-out);
}
.af-root .af-to-top:hover { background: var(--color-accent-fill-hover); color: var(--color-on-accent); border-color: transparent; }
.js .af-to-top:not(.is-visible) { opacity: 0; transform: translateY(var(--space-3)); pointer-events: none; }
.af-root.has-player .af-to-top { bottom: calc(var(--size-player-h) + var(--space-5)); }
.af-rail { display: none; }
.js .af-rail {
  display: block; position: fixed; z-index: 23;
  top: calc(var(--size-touch) + var(--space-8)); bottom: calc(var(--size-touch) + var(--space-7));
  right: 0; width: var(--space-5);
  cursor: pointer; touch-action: none; opacity: 0; pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-out);
}
.js .af-rail.is-visible { opacity: 1; pointer-events: auto; }
.af-rail::before { content: ""; position: absolute; top: 0; bottom: 0; right: var(--space-2); width: var(--space-1); background: var(--color-divider-strong); }
.af-rail__thumb {
  position: absolute; right: var(--space-2); width: var(--space-1);
  top: var(--rail-top, 0%); height: var(--rail-size, 10%); min-height: var(--space-6);
  background: var(--color-accent-fill);
}
.af-rail:hover::before, .af-rail.is-dragging::before { width: var(--space-2); right: calc(var(--space-2) - var(--space-1) / 2); }
.af-rail:hover .af-rail__thumb, .af-rail.is-dragging .af-rail__thumb { width: var(--space-2); right: calc(var(--space-2) - var(--space-1) / 2); }
.af-root.has-player .af-rail { bottom: calc(var(--size-player-h) + var(--size-touch) + var(--space-7)); }
@media (hover: none) { .js .af-rail { width: var(--space-6); } }

/* -- The Freaks: team cards and biography sheets ---------------------------
   After the old Freaks page (Matt, 23 October 2026), in the brand: black
   cards on the white band, people in black and white, the given name in
   red. "Read the bio" opens a sheet through the Popover API. */
.af-crew-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 34rem) { .af-crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 56rem) { .af-crew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 72rem) { .af-crew-grid--partners { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* The core team on Home: the same cards, four across, or two by two. */
@container (min-width: 56rem) { .af-crew-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.af-root .af-crew-head { margin: var(--space-9) 0 var(--space-6); }

.af-crew {
  position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--color-ground); color: var(--color-text);
  border-top: var(--border-strong) solid var(--color-ground);
  transition: border-color var(--motion-base) var(--ease-out);
}
/* The core team together on Home (Matt, 26 October 2026). People in black and white. */
.af-root .af-team-photo { margin: var(--space-4) 0 var(--space-6); }
.af-team-photo img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; filter: var(--photo-mono); background: var(--color-placeholder); }
.af-root .af-team-photo figcaption { margin-top: var(--space-2); }
.af-crew__photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-placeholder); }
.af-crew__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: var(--photo-mono); transform: scale(1.001); transition: transform var(--motion-slow) var(--ease-out); }
.af-crew__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); }
.af-crew-grid + .af-people-source { margin-top: var(--space-5); }
.af-crew__role { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); }
.af-crew .af-name { font-size: var(--text-lg); }
.af-crew__line { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.af-crew__more {
  margin-top: auto; padding-top: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-touch); padding-inline: 0; padding-bottom: 0; border: 0; background: none; color: var(--color-text); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
/* The whole card opens the sheet. */
.af-crew__more::after { content: ""; position: absolute; inset: 0; }
.af-crew__arrow { width: var(--size-tri); height: var(--size-tri); background: var(--color-accent); clip-path: var(--shape-triangle); rotate: 90deg; transition: translate var(--motion-base) var(--ease-out); }
.af-crew--bio:hover { border-top-color: var(--color-accent-fill); }
.af-crew--bio:hover .af-crew__photo img { transform: scale(1.04); }
.af-crew--bio:hover .af-crew__arrow { translate: var(--space-1) 0; }
/* A producer's bio and showreel page (Matt, 27 October 2026). */
.af-root .af-reel-head__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-placeholder); align-self: start; }
.af-reel-head__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: var(--photo-mono); }
.af-reel-head__name .af-name__given { color: var(--color-accent); }
.af-reel-head .af-body { max-width: var(--measure); }
.af-reel { content-visibility: auto; contain-intrinsic-size: auto 120rem; }

/* Team photos stay black and white at rest and turn to colour on hover or
   keyboard focus (Matt, 26 October 2026). */
.af-crew__photo img, .af-team-photo img, .af-sheet__photo img, .af-service__people img, .af-reel-head__photo img { transition: filter var(--motion-base) var(--ease-out), transform var(--motion-slow) var(--ease-out); }
.af-crew:hover .af-crew__photo img, .af-crew:focus-within .af-crew__photo img,
.af-team-photo:hover img, .af-sheet__photo:hover img, .af-reel-head__photo:hover img,
.af-service__people img:hover, .af-service__people :focus-visible img { filter: none; }
.af-crew__more:focus-visible { outline: none; }
.af-crew:has(.af-crew__more:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

.af-crew--partner { grid-template-rows: auto; grid-template-columns: minmax(0, 1fr); }
.af-crew--partner .af-crew__photo { aspect-ratio: 1; }
.af-crew--partner .af-crew__photo img { object-position: 50% 20%; }
@container (min-width: 34rem) and (max-width: 71.99rem) {
  .af-crew--partner { grid-template-columns: 38% minmax(0, 1fr); }
  .af-crew--partner .af-crew__photo { aspect-ratio: auto; height: 100%; }
}

/* Publishing partners: the logo whole, in colour, on its own background. */
@container (min-width: 56rem) { .af-crew-grid--publishers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 72rem) { .af-crew-grid--publishers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.af-crew__logo { display: grid; place-items: center; background: var(--color-black); }
.af-crew__logo img { object-fit: contain; filter: none; padding: var(--space-5); }
.af-crew__logo img[src$="universal-music-japan.svg"] { padding: var(--space-3); }
.af-crew__logo:has(img[src$="peermusic.jpg"]), .af-crew__logo:has(img[src$="marcanent.jpg"]) { background: var(--color-white); }
.af-crew--publisher .af-name { color: var(--color-text); }

/* Where each face sits in its photograph. */
.af-crew__photo img[src$="warren.jpg"], .af-sheet__photo img[src$="warren.jpg"] { object-position: 62% 5%; }
.af-crew__photo img[src$="gianluca.jpg"], .af-sheet__photo img[src$="gianluca.jpg"] { object-position: 62% 25%; }
.af-crew__photo img[src$="jenna.jpg"], .af-sheet__photo img[src$="jenna.jpg"] { object-position: 50% 45%; }

/* The sheet. */
.af-sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(40rem, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; border-left: var(--border-strong) solid var(--color-accent-fill); overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-ground); color: var(--color-text);
  translate: 100% 0; transition: translate var(--motion-slow) var(--ease-out), overlay var(--motion-slow) allow-discrete, display var(--motion-slow) allow-discrete;
}
.af-sheet:popover-open { translate: 0 0; }
@starting-style { .af-sheet:popover-open { translate: 100% 0; } }
.af-sheet::backdrop { background: var(--color-scrim); opacity: 0; transition: opacity var(--motion-slow) var(--ease-out), overlay var(--motion-slow) allow-discrete, display var(--motion-slow) allow-discrete; }
.af-sheet:popover-open::backdrop { opacity: 1; }
@starting-style { .af-sheet:popover-open::backdrop { opacity: 0; } }
.af-sheet__photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-placeholder); }
.af-sheet__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: var(--photo-mono); }
.af-sheet__body { display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-8); }
.af-sheet__name { margin: 0 0 var(--space-4); }
.af-sheet__text { gap: var(--space-4); }
.af-sheet__text .af-body { margin: 0; }
.af-sheet__h { margin: var(--space-4) 0 0; color: var(--color-accent); }
.af-sheet__quote { margin: var(--space-2) 0 0; padding-left: var(--space-5); border-left: var(--border-strong) solid var(--color-accent-fill); font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-lg); line-height: var(--leading-lg); }
.af-sheet__close {
  position: sticky; top: 0; float: right; z-index: 1; display: grid; place-items: center;
  width: var(--size-touch); height: var(--size-touch); margin: var(--space-3) var(--space-3) calc(-1 * var(--size-touch) - var(--space-3)) 0;
  border: 0; background: var(--color-accent-fill); color: var(--color-on-accent); cursor: pointer;
}
.af-sheet__close:hover { background: var(--color-accent-fill-hover); }
.af-sheet__x { width: var(--size-icon); height: var(--size-icon); background: currentColor; clip-path: polygon(14% 0, 50% 36%, 86% 0, 100% 14%, 64% 50%, 100% 86%, 86% 100%, 50% 64%, 14% 100%, 0 86%, 36% 50%, 0 14%); }
@media (max-width: 34rem) { .af-sheet__body { padding: var(--space-5) var(--space-4) var(--space-8); } }

/* -- Services (Matt, 23 October 2026) -------------------------------------
   An index of the nine services in the page head, then one section each:
   number, name, what is included, the people and the enquiry box on the
   left; the proof, always on black, on the right. */
.af-service-index { list-style: none; margin: var(--space-6) 0 0; padding: var(--border-hair); display: grid; gap: var(--border-hair); grid-template-columns: repeat(auto-fill, minmax(min(var(--size-card-min), 100%), 1fr)); }
.af-service-index li { box-shadow: 0 0 0 var(--border-hair) var(--color-divider); }
.af-service-index a { display: grid; gap: var(--space-1); align-content: start; height: 100%; padding: var(--space-4) var(--space-5); background: var(--color-ground); text-decoration: none; transition: background-color var(--motion-base) var(--ease-out); }
.af-service-index a:hover { background: var(--color-raised); }
.af-service-index b { font-family: var(--font-display); font-weight: var(--weight-regular); }
.af-service-index__num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); letter-spacing: var(--tracking-caps); }

.af-service__grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 56rem) { .af-service__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); } }
.af-service__main { display: grid; gap: var(--space-4); justify-items: start; }
.af-service__main > * { max-width: 100%; }
.af-root .af-service__num { font-family: var(--font-display); font-weight: var(--weight-thin); font-size: var(--text-5xl); line-height: var(--leading-5xl); color: var(--color-accent); }
.af-service__main .af-lead, .af-service__main .af-body { max-width: 40rem; }
.af-service__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.af-service__items li { display: grid; grid-template-columns: var(--size-tri) 1fr; gap: var(--space-3); align-items: baseline; }
.af-service__items .af-tri { transform: rotate(90deg); }
.af-service__roster { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--color-divider); width: 100%; }
.af-root .af-service__names { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-xl); line-height: var(--leading-xl); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.af-service__names span:nth-child(odd) { color: var(--color-accent); }
.af-service__partners { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(var(--size-col-min), 100%), 1fr)); }
.af-service__partners li { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: var(--border-hair) solid var(--color-divider-strong); }
.af-service__partners b { font-family: var(--font-display); font-weight: var(--weight-regular); }
.af-service__partners span { font-size: var(--text-sm); color: var(--color-text-muted); }
.af-service__people { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--color-divider); width: 100%; }
.af-service__people ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.af-service__people a { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.af-service__people img { width: var(--space-7); height: var(--space-7); object-fit: cover; object-position: 50% 25%; filter: var(--photo-mono); }
.af-root .af-service .af-go-row { justify-content: flex-start; margin-top: var(--space-4); }

.af-service__proof { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--color-ground); color: var(--color-text); border-top: var(--border-strong) solid var(--color-accent-fill); }
.af-service:not(.af-band) .af-service__proof { background: var(--color-surface); }
@container (min-width: 56rem) { .af-service__proof { position: sticky; top: calc(var(--size-touch) + var(--space-7)); } }
.af-proof-list { list-style: none; margin: 0; padding: 0; display: grid; }
.af-proof { display: grid; grid-template-columns: var(--size-sleeve-sm) minmax(0, 1fr); gap: var(--space-4); align-items: center; padding-block: var(--space-3); border-bottom: var(--border-hair) solid var(--color-divider); text-decoration: none; color: inherit; }
.af-proof-list li:first-child .af-proof { border-top: var(--border-hair) solid var(--color-divider); }
.af-root a.af-proof:hover .af-proof__title b { color: var(--color-accent); }
.af-proof__sleeve { width: var(--size-sleeve-sm); height: var(--size-sleeve-sm); object-fit: cover; display: grid; place-items: center; background: var(--color-raised); }
.af-proof__sleeve--tv { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); color: var(--color-text-muted); text-transform: uppercase; }
.af-proof__main { display: grid; gap: var(--space-1); min-width: 0; }
.af-proof__title { font-size: var(--text-sm); }
.af-proof__title b { display: block; font-weight: var(--weight-semibold); transition: color var(--motion-fast) var(--ease-out); }
.af-proof__pos { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.af-proof__num { color: var(--color-accent); font-weight: var(--weight-medium); }
.af-service__all { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.af-service__all .af-tri { transform: rotate(90deg); width: var(--space-2); height: var(--space-2); color: var(--color-accent); }
.af-service__brochure { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-6); }
.af-root .af-service__brochure .af-go-row { margin: 0; }
.af-brochure { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-5); border: var(--border-hair) solid var(--color-divider-strong); }
.af-root .af-brochure .af-go-row { justify-content: flex-start; margin-top: var(--space-3); }
.af-service__brochure > .af-stack { max-width: 40rem; }

/* Case studies: two campaigns, stage by stage, as black panels on the white band. */
.af-cases__intro { max-width: 44rem; margin-bottom: var(--space-7); }
.af-cases { display: grid; gap: var(--space-7); }
.af-case { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--color-ground); color: var(--color-text); border-top: var(--border-strong) solid var(--color-accent-fill); }
@container (min-width: 56rem) { .af-case { padding: var(--space-8); } }
.af-case__head { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 44rem) { .af-case__head { grid-template-columns: 15rem minmax(0, 1fr); } }
.af-case__sleeve { position: relative; display: grid; gap: var(--space-4); justify-items: start; }
.af-case__sleeve img { width: 100%; max-width: 15rem; aspect-ratio: 1; object-fit: cover; }
.af-case__title { display: grid; gap: var(--space-3); }
.af-case__title .af-h2 { margin: 0; }
.af-case__track { display: block; font-weight: var(--weight-thin); color: var(--color-text-muted); }
.af-case__results { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); }
.af-case__results li { padding-block: var(--space-2); border-bottom: var(--border-hair) solid var(--color-divider); }
.af-case__stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--border-hair); grid-template-columns: minmax(0, 1fr); background: var(--color-divider); border: var(--border-hair) solid var(--color-divider); }
@container (min-width: 44rem) { .af-case__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 72rem) { .af-case__stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } .af-case__stages > li:last-child { grid-column: span 2; } }
.af-case__stages > li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--color-ground); }
.af-case__stages > li > b { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-lg); }
.af-root .af-case__stages .af-small { margin: 0; color: var(--color-text-muted); }
.af-case__stage { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); }
.af-case__labels { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(var(--size-col-min), 100%), 1fr)); }
.af-case__labels li { display: grid; gap: var(--space-1); padding: var(--space-3); border: var(--border-hair) solid var(--color-divider-strong); }
.af-case__labels b { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.af-case__labels span { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.af-case__cols { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(var(--size-card-min), 100%), 1fr)); }
.af-case__cols > div { display: grid; gap: var(--space-3); align-content: start; }
.af-root .af-case__names { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-lg); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.af-case__names span:nth-child(odd) { color: var(--color-accent); }
.af-case__quote { margin: 0; }
.af-case__more a, .af-brochure .af-service__all { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.af-case__more .af-tri { transform: rotate(90deg); width: var(--space-2); height: var(--space-2); color: var(--color-accent); }

/* -- The logo wall on Home (Matt, 24 October 2026): labels and broadcasters
      darkened to one deep grey on white tiles, so pale and bright logos
      read alike, six across on a laptop. Hover brings back each logo's own
      colour. ---------------------------------------------- */
.af-logo-wall { list-style: none; margin: var(--space-3) 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 40rem) { .af-logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 64rem) { .af-logo-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.af-logo-wall li { background: var(--color-white); }
.af-logo-wall a { display: grid; place-items: center; aspect-ratio: 5 / 2; padding: var(--space-4); }
/* Logos in their own colours (Matt, 24 October 2026). */
.af-logo-wall img { width: 88%; height: var(--space-7); object-fit: contain; }
.af-logo-wall li:has(a:hover, a:focus-visible) { outline: var(--border-strong) solid var(--color-red); }

/* -- Folds on Home (Matt, 23 October 2026): Charts, Clients
      and the Gallery show in part, fading out, until "Show all" opens them.
      Without JavaScript nothing is folded. -------------------------------- */
.js .af-fold.is-folded { overflow: hidden; mask-image: linear-gradient(to bottom, black 62%, transparent); }
.js .af-fold--row.is-folded { max-height: 46rem; }
.js .af-fold--none.is-folded { max-height: 0; mask-image: none; }
/* Speed (Matt, 24 October 2026): a closed fold is skipped by the browser's
   layout and paint, and long sections further down are only laid out as they
   come near the screen. Everything stays in the page for search engines,
   links and visitors without JavaScript. */
.js .af-fold--none.is-folded { content-visibility: hidden; }
.af-fold--row, #clients, #tv, #family, [aria-label="News and services"] { content-visibility: auto; contain-intrinsic-size: auto 60rem; }
.af-root .af-fold__bar { margin-top: var(--space-5); }
.af-go--open .af-go__arrow--down { rotate: 0deg; }
.af-root .af-fold__bar--end { margin: var(--space-6) 0 var(--space-8); }

/* -- Finding your way back up a long section (Matt, 29 October 2026) -----
      The A to Z letters stay under the menu while you are in the artists,
      and the News years while you are in the stories.
      Once a folded section is open and you
      are a way into it, Collapse follows you down beside Back to top. */
/* Every year and letter shows, wrapping onto more rows on a narrow screen
   (Matt, 29 October 2026). site.js measures the bar as --bar-h, so a year or
   letter you jump to lands below it, and a year's own label sticks below it. */
.af-root .af-letters, .af-root .af-years-nav--sticky {
  position: sticky; top: calc(var(--size-touch) + var(--space-5) + var(--border-hair)); z-index: 5;
  background: var(--color-ground); padding-block: var(--space-2);
}
.af-root .af-clients__letter, .af-root .af-year { scroll-margin-top: calc(var(--size-touch) + var(--space-5) + var(--bar-h, var(--size-touch) + var(--space-4)) + var(--space-4)); }
.af-root .af-year-wrap .af-year__label { top: calc(var(--size-touch) + var(--space-5) + var(--bar-h, var(--size-touch) + var(--space-4)) + var(--space-2)); }
/* Phone (Matt, 30 October 2026): one row you swipe sideways, not four rows
   that took a quarter of the screen. It runs to the screen's edges; the year
   or letter you are in is marked and kept in view (site.js). */
@media (max-width: 40rem) {
  .af-root .af-letters, .af-root .af-years-nav--sticky {
    gap: var(--space-1); flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .af-root .af-letters::-webkit-scrollbar, .af-root .af-years-nav--sticky::-webkit-scrollbar { display: none; }
  .af-root .af-letters a, .af-root .af-years-nav--sticky a { flex: none; min-width: var(--size-touch); padding-inline: var(--space-2); }
}
.af-root .af-letters a[aria-current], .af-root .af-years-nav--sticky a[aria-current] { border-color: var(--color-text); color: var(--color-text); }
.af-collapse {
  position: fixed; bottom: var(--space-5); z-index: 24;
  right: calc(var(--gutter) + var(--size-touch) + var(--space-3));
  background: var(--color-ground); box-shadow: var(--shadow-lift);
}
.af-root .af-collapse { width: auto; min-height: var(--size-touch); padding: var(--space-2) var(--space-4); gap: var(--space-3); }
.af-collapse[hidden] { display: none; }
/* On a phone it says just Collapse. */
@media (max-width: 40rem) { .af-collapse__name { display: none; } }
.af-go__arrow--up { rotate: 0deg; }
.af-go:hover .af-go__arrow--up { translate: 0 calc(var(--space-1) * -1); }
.af-root.has-player .af-collapse { bottom: calc(var(--size-player-h) + var(--space-5)); }

/* The family heading in the footer opens the full team (Matt, 29 October 2026). */
.af-footer__head { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch); color: inherit; text-decoration: none; }
.af-footer__head:hover, .af-footer__head:focus-visible { color: var(--color-accent); }

/* Services: We make the records. We break the records. (Matt, 29 October
   2026). Big and heavy, one line each; the two verbs are the red moment. */
.af-services-head .af-container { container-type: inline-size; }
/* Sized to the column, so each phrase holds one line on a desktop and only
   wraps on a phone; a quarter smaller than it first was (Matt, 30 October 2026). */
.af-root .af-makebreak { font-size: clamp(calc(var(--text-3xl) * 0.75), 5.4cqi, calc(var(--text-5xl) * 0.75)); line-height: var(--leading-5xl); font-weight: var(--weight-semibold); text-wrap: initial; }
.af-makebreak span { display: block; }
.af-makebreak em { font-style: normal; color: var(--color-accent); }

/* -- Reduced motion: still states. Keep this block last. ----------------- */
@media (prefers-reduced-motion: reduce) {
  .af-marquee__track { animation: none; }
  .af-pupil-track { transition: none; transform: none !important; }
  .af-to-top, .af-rail { transition: none; }
  .af-sheet, .af-sheet::backdrop, .af-crew, .af-crew__photo img, .af-crew__arrow, .af-team-photo img, .af-sheet__photo img, .af-service__people img, .af-reel-head__photo img { transition: none; }
  .af-go--pulse::after, .af-go--flash, .af-go--flash .af-go__arrow, .af-root .af-hero__tag { animation: none; }
  .af-go, .af-go__arrow { transition: none; }
  html { scroll-behavior: auto; }
}

/* -- Phone tap targets (Matt, 30 October 2026) ------------------------------
      Small links and toggles get a hit area at least --size-touch tall on a
      phone, without changing how anything looks or where it sits: an
      invisible layer reaching above and below the text. */
@media (max-width: 40rem) {
  .af-tile__src summary, .af-featured a, .af-news-card__more, .af-service__all, .af-case__more a { position: relative; }
  .af-tile__src summary::before, .af-featured a::before, .af-news-card__more::before, .af-service__all::before, .af-case__more a::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--size-touch); transform: translateY(-50%);
  }
  /* A track title clips its own overflow (the ellipsis), so it grows by
     padding instead, given back by margin, and sits above the artist line. */
  .af-track__title { position: relative; z-index: 1; padding-block: var(--space-2); margin-block: calc(var(--space-2) * -1); }
}

/* -- News on a phone, a year at a time (Matt, 30 October 2026) --------------
      Each year shows its first three stories, then "Show all 14 from 2024"
      (site.js). Wider screens, and no JavaScript, show every story. */
.af-root .af-year__all { display: none; }
@media (max-width: 40rem) {
  .af-year:not(.is-open) .af-news-card.is-later { display: none; }
  .af-root .af-year:not(.is-open) .af-year__all:not([hidden]) { display: flex; margin-top: var(--space-4); }
}

/* -- Work on a phone (Matt, 30 October 2026) --------------------------------
      A one-line intro, and the search and filters behind a button, so the
      first records are near the top. Wider screens, and no JavaScript, show
      the full intro and the filters as before. */
.af-root .af-phone-only, .af-root .af-filter-toggle { display: none; }
@media (max-width: 40rem) {
  .af-root .af-wide-only { display: none; }
  .af-root .af-phone-only { display: block; }
  .js .af-root .af-filter-toggle { display: inline-flex; width: 100%; justify-content: center; margin-bottom: var(--space-5); }
  .js .af-filter-panel:not(.is-open) { display: none; }
}

/* -- Contact on a phone (Matt, 30 October 2026): the six "What is it about?"
      choices in two columns, so the form starts nearer the top. */
@media (max-width: 40rem) {
  .af-route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .af-route legend { grid-column: 1 / -1; }
  .af-route__option { padding: var(--space-4) var(--space-3); align-content: start; }
  .af-route__title { font-size: var(--text-sm); }
}