/* MMMMM site layer — the components the Modernist system does not ship.
   Loaded after design-system/styles.css, which stays untouched.

   Every value here resolves to a token. No hex, no font name, no raw px the
   --space-* scale already carries. Zero radius throughout. */

/* ── accessibility corrections to the system layer ──────────────────────────
   Two measured failures against the 4.5:1 floor CLAUDE.md sets for body copy.
   Both are corrected here, in the site layer, rather than by editing the
   design system — the token sheet stays untouched.

   1. .btn-primary set paper on the base accent: 3.75:1 at 14px. The design
      system's own guidance is that the accent-to-ground pair carries large
      text and interface chrome but "not body copy", and the brand pack
      defines deep red as "red at body-copy size". A 14px button label is
      body-copy size, so the primary action takes the deep step. Measured
      6.47:1. The base accent still runs as the full poster field, where the
      type is display grade and 3:1 applies.

   2. .text-muted resolves to 3.64:1 on this ground — below the floor wherever
      it carries running copy rather than a caption. Deepened here. */

.btn-primary { background: var(--color-accent-700); }
.btn-primary:hover { background: var(--color-accent-800); }
.btn-primary:active { background: var(--color-accent-900); }

.text-muted { color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* 3. The current nav link and nav hover set the base accent at 14px: 3.76:1.
      Same root cause as the button — accent at body size — and the same fix. */
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* 4. .table th is 11px bold at a 60% ink mix — 4.23:1, under the floor.
      Deepened to match the other small caps labels on the site. */
.table th { color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* ── the M⁵ page mark ───────────────────────────────────────────────────────
   The monogram struck at the head of the page content. The wordmark still
   leads the page from the header above it, which is the rule the brand pack
   sets; this sits below that as a stamp, which is a listed monogram use. */

.page-mark { display: block; }

/* Home: the feature mark. The pack asks for one M-width of clearspace, so the
   gap below scales with the mark rather than sitting at a fixed step. */
.page-mark--feature { margin-bottom: calc(var(--space-8) * 1.75); }

/* Every other page: a small stamp, held clear of the content beneath it. */
.page-mark-row {
  padding-top: calc(var(--space-8) * 1.5);
  padding-bottom: var(--space-2);
}

@media (max-width: 640px) {
  .page-mark--feature { width: 96px; height: auto; }
  .page-mark-row { padding-top: var(--space-8); }
}

/* ── layout ─────────────────────────────────────────────────────────────── */

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: calc(var(--space-8) * 2);
  border-top: 2px solid var(--color-divider);
}

.section:first-of-type { border-top: 0; }

.section-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: 0 0 var(--space-4);
}

.measure { max-width: 62ch; }

.grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  /* An odd last item in a two-column grid spans the row rather than sitting
     orphaned on the left. Five ventures would otherwise leave a hole. */
  .grid-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── the poster statement — red as a full field, once per page at most ──── */

.poster {
  background: var(--color-accent);
  color: var(--color-bg);
  padding-block: calc(var(--space-8) * 2);
}

.poster p {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0;
}

/* ── brand pillars ──────────────────────────────────────────────────────── */

.pillar {
  border-top: 2px solid var(--color-text);
  padding-top: var(--space-3);
}

.pillar h3 {
  font-size: 20px;
  margin: 0 0 var(--space-2);
}

.pillar p {
  font-size: 14px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* ── role labels ────────────────────────────────────────────────────────────
   The six must be visually distinct from each other. The palette is mono, so
   they are separated by FILL, RULE WEIGHT, RULE STYLE and RULE POSITION —
   never by six colours. Ordered here roughly by how directly the credit
   belongs to Matt: a solid ink field is his own hand; an open rule is his
   company's. That gradient is the point of the taxonomy. */

.role {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Written / produced by Matt — solid ink field. The heaviest treatment. */
.role--written-produced {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-1) var(--space-2);
}

/* Soulshaker production or remix — full 2px box, no fill. */
.role--soulshaker {
  border: 2px solid var(--color-text);
  padding: var(--space-1) var(--space-2);
}

/* A&R, deal or project development — heavy left rule only. */
.role--anr-development {
  border-left: 6px solid var(--color-text);
  padding: var(--space-1) 0 var(--space-1) var(--space-2);
}

/* Audiofreaks / Galactic team credit — dotted box: the company, not Matt. */
.role--team-credit {
  border: 2px dotted var(--color-text);
  padding: var(--space-1) var(--space-2);
}

/* Management or publishing contact — underline only. */
.role--management-publishing {
  border-bottom: 2px solid var(--color-text);
  padding: var(--space-1) 0;
}

/* Client or campaign — flat surface fill, the lightest weight. */
.role--client-campaign {
  background: var(--color-surface);
  padding: var(--space-1) var(--space-2);
}

/* ── the evidence card ──────────────────────────────────────────────────────
   A credit that shows its own working. Reads like a catalogue entry in a
   reference work, because that is what it is. */

.evidence {
  border-top: 2px solid var(--color-text);
  padding-top: var(--space-4);
  /* Arriving from a timeline milestone, the card should not sit flush against
     the top of the viewport. */
  scroll-margin-top: var(--space-8);
}

.evidence + .evidence { margin-top: var(--space-8); }

.evidence__head { margin-bottom: var(--space-3); }

.evidence__title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-1);
}

.evidence__artist {
  font-size: 15px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* Grade O: the attribution runs BEFORE the claim, at the same visual weight
   as the claim itself. Never smaller, never greyed. */
.evidence__attribution {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent-700);
}

/* Who did what. On an A&R credit this is where the actual writer is named,
   so it carries body weight, not caption weight. */
.evidence__role-note {
  font-size: 14px;
  margin: var(--space-3) 0 0;
}

.evidence__charts {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.evidence__charts li {
  font-size: 14px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}

.evidence__charts li:first-child { border-top: 1px solid var(--color-divider); }

.evidence__meta {
  font-size: 13px;
  margin: var(--space-3) 0 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.evidence__case {
  font-size: 15px;
  margin: var(--space-3) 0 0;
}

.evidence__sources {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.evidence__sources li { margin-bottom: var(--space-1); }

.evidence__sources a { color: var(--color-accent-700); }

.evidence__sources-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: var(--space-4) 0 var(--space-2);
}

/* ── /work: the filterable index ────────────────────────────────────────────
   Filtering is done entirely in CSS so it survives JavaScript being off.
   Two radio groups each contribute a hide rule; because the rules compose,
   role and type filter independently without a combinatorial explosion of
   selectors. The "all" option carries no rule — it is the absence of one. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.work { padding-block: calc(var(--space-8) * 2); border-top: 2px solid var(--color-divider); }

.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.filter-group { border: 0; margin: 0; padding: 0; }

.filter-group legend {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  padding: 0;
  margin-bottom: var(--space-3);
}

.filter-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The input stays in the accessibility tree and keeps keyboard operation;
   only its default appearance is removed. */
.filter-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.filter-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 13px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-divider);
}

.filter-label:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.filter-input:checked + .filter-label {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.filter-input:focus-visible + .filter-label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.filter-count { font-size: 11px; opacity: 0.7; }

.work-status {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin-bottom: var(--space-6);
}

/* Role filters */
.work:has(#role-written-produced:checked) .evidence:not([data-role="written-produced"]),
.work:has(#role-soulshaker:checked) .evidence:not([data-role="soulshaker"]),
.work:has(#role-anr-development:checked) .evidence:not([data-role="anr-development"]),
.work:has(#role-team-credit:checked) .evidence:not([data-role="team-credit"]),
.work:has(#role-management-publishing:checked) .evidence:not([data-role="management-publishing"]),
.work:has(#role-client-campaign:checked) .evidence:not([data-role="client-campaign"]),
/* Type filters */
.work:has(#type-record:checked) .evidence:not([data-type="record"]),
.work:has(#type-publishing:checked) .evidence:not([data-type="publishing"]),
.work:has(#type-television:checked) .evidence:not([data-type="television"]),
.work:has(#type-business:checked) .evidence:not([data-type="business"]) {
  display: none;
}

/* ── evidence artwork ───────────────────────────────────────────────────── */

.evidence__artwork {
  margin: var(--space-4) 0 0;
  max-width: 320px;
  border: 2px solid var(--color-divider);
}

/* ── /timeline ──────────────────────────────────────────────────────────────
   Scroll here maps to real chronological sequence, so scroll-driven structure
   is the information architecture rather than decoration. */

.timeline { position: relative; }

/* THE signature move. The wordmark is five Ms closed by a red square; each
   act carries an M rule that draws itself as the reader advances through that
   act and closes on the square when the act is complete. An M only reads at
   horizontal scale — stretched down a page gutter it degrades to a straight
   line — so it lives in the act header, at the size the letterform works.
   One move, repeated per act. Nothing else on this page animates. */

.act__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* The route, always visible, so the act never shows an empty gap. */
.act__bar {
  display: block;
  position: relative;
  width: 180px;
  height: 3px;
  background: var(--color-divider);
}

/* Fills with progress through the act. Defaults to full: with JavaScript off
   or reduced motion requested the reader gets a complete rule, never an empty
   one. scaleX is compositor-only, so this stays cheap on a phone. */
.act__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--color-text);
  transform: scaleX(var(--act-progress, 1));
  transform-origin: left center;
}

/* The square the rule closes on, exactly as the wordmark closes on its own.
   Always present, never earned: in the wordmark the square is the terminus,
   not a reward, and an indicator that starts as an empty grey line with
   nothing at the end of it just reads as broken. The resolution is the rule
   arriving at it. */
.act__bar-square {
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--color-accent);
}

.timeline--animated .act__bar-fill { transition: transform 120ms linear; }

@media (prefers-reduced-motion: reduce) {
  .act__bar-fill { transform: scaleX(1); }
  .timeline--animated .act__bar-fill { transition: none; }
}

.act { padding-block: var(--space-8); }

/* The act pins while its milestones advance past it. Sticky, not scripted. */
.act__head {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  padding-block: var(--space-4);
  border-bottom: 2px solid var(--color-text);
  margin-bottom: var(--space-8);
  z-index: 2;
}

.act__label {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0;
}

.act__count {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: var(--space-1) 0 0;
}

.milestones { list-style: none; margin: 0; padding: 0; }

.milestone {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 2px solid var(--color-divider);
}

.milestone:first-child { border-top: 0; }

@media (min-width: 720px) {
  .milestone { grid-template-columns: 8ch 1fr; gap: var(--space-8); }
}

.milestone__when {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.milestone__title { font-size: 22px; margin: var(--space-3) 0 var(--space-1); }

.milestone__artist {
  font-size: 15px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* Grade O renders its attribution at the weight of the claim, never smaller. */
.milestone__attribution {
  font-size: 15px;
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent-700);
}

/* Inside a run of prose the attribution is the bold clause, and the claim
   that follows sits at the same size. Never smaller, never greyed. */
.milestone__attribution strong { font-weight: 600; }

.milestone__charts {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.milestone__charts li {
  font-size: 14px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}

.milestone__charts li:first-child { border-top: 1px solid var(--color-divider); }

.milestone__note {
  font-size: 13px;
  margin: var(--space-2) 0 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.milestone__link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--color-accent-700);
}

/* The counterweight carries a full evidence card rather than a summary row,
   so a reader asking "but what did he actually write" finds the answer in
   place without having to go looking for it. */
.milestone--counterweight .evidence { border-top: 0; padding-top: 0; }

/* ── the engineered peak ────────────────────────────────────────────────────
   This page's single red field. Every value comes from the ledger, and the
   honesty sits ON the red at the same display weight as the position —
   the role label and the writing credit are not footnotes to it.

   All type here is display-grade. That is the design system's rule for the
   poster field, and it is also what keeps this legible: the accent-to-ground
   pair is tuned to 3:1, which carries large text and not body copy. Nothing
   at body size may go on this ground. */

.peak {
  background: var(--color-accent);
  color: var(--color-bg);
  padding-block: calc(var(--space-8) * 3);
  margin-block: var(--space-8);
}

/* One heading, three lines. The position never leaves the chart's side. */
.peak__statement { margin: 0; }

.peak__statement span { display: block; }

.peak__position {
  font-size: clamp(72px, 16vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.02em;
}

.peak__chart {
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.05;
  margin-top: var(--space-4);
  max-width: 18ch;
}

.peak__where {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
}

.peak__work {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  margin: var(--space-6) 0 0;
  max-width: 28ch;
}

/* The role label, reversed onto the red and at display size. Paper on red,
   no tint — the same pairing the brand allows for the mark. */
.peak__role {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: calc(var(--space-8) * 1.5) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-bg);
}

.peak__honesty {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  margin: var(--space-4) 0 0;
  max-width: 24ch;
}

.peak__link {
  display: inline-block;
  margin-top: var(--space-8);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  color: var(--color-bg);
}

.peak__link:focus-visible { outline: 2px solid var(--color-bg); outline-offset: 4px; }

/* ── ventures ───────────────────────────────────────────────────────────── */

.venture {
  border-top: 2px solid var(--color-text);
  padding-top: var(--space-3);
}

.venture h3 { font-size: 20px; margin: 0 0 var(--space-2); }

.venture p { font-size: 14px; }

.venture a { color: var(--color-accent-700); }

.venture--pending { border-top-color: var(--color-divider); }

.venture__note {
  font-size: 14px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent-700);
}

/* ── working relationships ──────────────────────────────────────────────────
   Not a logo wall. Each entry states the nature of the relationship and the
   record it rests on, and nothing renders without both. */

.relationship-group {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: calc(var(--space-8) * 1.5) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-text);
}

.relationship-list {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .relationship-list { grid-template-columns: repeat(2, 1fr); }
}

.relationship {
  border-top: 2px solid var(--color-divider);
  padding-top: var(--space-3);
}

.relationship__name { font-size: 18px; margin: 0 0 var(--space-2); }

/* Grade O: who is asserting this, before the claim and at the same size as
   the claim. Never smaller, never greyed. */
.relationship__attribution {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent-700);
}

.relationship__nature { font-size: 14px; margin: 0; }

.relationship__sources {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: 13px;
}

.relationship__sources a { color: var(--color-accent-700); }

/* ── the boundary list ──────────────────────────────────────────────────────
   What a page explicitly does not claim. Set at body weight, not as fine
   print: for a publisher or an investor this is the most useful paragraph on
   the page, because it says which claims they do not have to discount. */

.not-claimed {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  max-width: 62ch;
}

.not-claimed li {
  font-size: 15px;
  padding: var(--space-4) 0;
  border-top: 2px solid var(--color-divider);
}

.not-claimed li:last-child { border-bottom: 2px solid var(--color-divider); }

/* ── media pack ─────────────────────────────────────────────────────────── */

.bio-blocks { display: grid; gap: var(--space-8); margin-top: var(--space-8); }

.bio-block { border-top: 2px solid var(--color-text); padding-top: var(--space-4); }

.bio-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.bio-block__head h3 { margin: 0; font-size: 20px; }

.bio-block__meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: 0;
}

.bio-block__body { max-width: 62ch; margin-bottom: var(--space-4); }

.mark-item__preview {
  border: 2px solid var(--color-divider);
  padding: var(--space-6);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  min-height: 120px;
}

.mark-item__preview--red { background: var(--color-accent); border-color: var(--color-accent); }

.mark-item__preview img { width: 100%; max-height: 72px; object-fit: contain; object-position: left; }

.mark-item h3 { font-size: 17px; margin: 0 0 var(--space-1); }

.mark-item p { font-size: 14px; margin: 0; }

.mark-item__links { margin-top: var(--space-2) !important; font-size: 13px; }

.mark-item__links a { color: var(--color-accent-700); }

/* ── enquiry form ───────────────────────────────────────────────────────── */

.enquiry { margin-top: var(--space-8); max-width: 720px; }

.enquiry__grid { display: grid; gap: var(--space-4); }

@media (min-width: 640px) {
  .enquiry__grid { grid-template-columns: repeat(2, 1fr); }
}

.enquiry__consent { margin-top: var(--space-6); }

.enquiry__consent .radio { align-items: flex-start; gap: var(--space-3); }

.enquiry__consent .dot { border-radius: 0; margin-top: 3px; }

.enquiry__consent input:checked + .dot {
  background: var(--color-text);
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}

.enquiry__output { margin-top: var(--space-6); }

.enquiry__output label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.enquiry__status {
  margin-top: var(--space-4);
  font-size: 14px;
  font-weight: 600;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent-700);
}

.enquiry__fallback {
  margin-top: var(--space-6);
  font-size: 14px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent-700);
}

.enquiry__fallback a { color: var(--color-accent-700); }

select.input { appearance: none; background-image: none; }

/* ── journal ────────────────────────────────────────────────────────────── */

.planned { list-style: none; margin: var(--space-8) 0 0; padding: 0; max-width: 780px; }

.planned li {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-top: 2px solid var(--color-divider);
}

@media (min-width: 640px) {
  .planned li { grid-template-columns: 14ch 1fr; gap: var(--space-6); align-items: baseline; }
}

.planned li:last-child { border-bottom: 2px solid var(--color-divider); }

.planned__tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.planned__title { font-size: 17px; }

.article__meta {
  font-size: 18px;
  max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.article__body { margin-top: var(--space-8); }

.article__body p { font-size: 16px; }

/* ── calls to action ────────────────────────────────────────────────────── */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-6);
}

/* ── photography ────────────────────────────────────────────────────────────
   Full colour, at Matt's request (20 October 2026), replacing the design
   system's black-and-white rule. 2px frame, zero radius, no tint, no shadow. */

.photo { border: 2px solid var(--color-divider); }

.photo img { width: 100%; height: auto; display: block; }

.photo figcaption,
.photo-grid__item figcaption {
  font-size: 12px;
  padding: var(--space-2) var(--space-3);
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  border-top: 2px solid var(--color-divider);
}

/* A lead photograph sits beside the opening paragraph on wide screens and
   stacks under it on narrow ones. */
.about-lead { display: grid; gap: var(--space-8); align-items: start; }

@media (min-width: 900px) {
  .about-lead { grid-template-columns: 1fr 380px; }
  .about-lead .measure { max-width: 56ch; }
}

.photo--lead { margin: 0; }

/* An inset photograph runs at column width, above the copy it belongs to. */
.photo--inset {
  margin: 0 0 var(--space-6);
  max-width: 320px;
}

/* ── press photo grid ───────────────────────────────────────────────────── */

.photo-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }

/* The four shots arrive at three different aspect ratios. In a press grid that
   reads as untidy and the captions never line up, so each is cropped square
   and anchored to the top of the frame, which keeps the face in shot. */
.photo-grid__item {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.photo-grid__item .photo {
  border-bottom: 0;
  aspect-ratio: 1;
  overflow: hidden;
}

.photo-grid__item .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.photo-grid__item figcaption {
  flex: 1;
  border: 2px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.photo-grid__item figcaption a { color: var(--color-accent-700); }

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 2px solid var(--color-divider);
  margin-top: calc(var(--space-8) * 2);
  padding-block: var(--space-8);
  font-size: 13px;
}

/* The colophon stamp. The wordmark opens the page from the header; the
   monogram closes it. Clearspace below it before the copy begins. */
.site-footer__mark {
  display: block;
  margin-bottom: var(--space-6);
}

/* ── role badges ────────────────────────────────────────────────────────────
   Matt's roles as he says them. Told apart by fill and rule, never by
   colour, because the palette is mono. The heaviest treatment is the work
   that is most his own. Borders use currentColor so a badge reads on paper
   and on an ink tile alike. */

.badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

.badge--producer { background: var(--color-text); color: var(--color-bg); }
.tile--ink .badge--producer { background: var(--color-bg); color: var(--color-text); }
.badge--consultant { border: 2px dashed currentColor; }
.badge--publisher { border: 2px dotted currentColor; }
.badge--manager { border-bottom: 2px solid currentColor; padding-inline: 0; }
.badge--anr { border-left: 6px solid currentColor; }
.badge--remixer { background: var(--color-accent-700); color: var(--color-bg); }
/* Remix consultant: the remixer's red, as a dashed outline like Consultant. */
.badge--remixconsultant { border: 2px dashed var(--color-accent-700); color: var(--color-accent-700); }
.tile--ink .badge--remixconsultant, .client--ink .badge--remixconsultant { border-color: var(--color-bg); color: var(--color-bg); }
/* A company platform credit: a plain ink box, unlike any personal role. */
.badge--hitvocals { border: 2px solid currentColor; }
.badge--tv { background: var(--color-surface); color: var(--color-text); }
.badge--founder { border: 2px solid var(--color-accent-700); color: var(--color-accent-700); }
.tile--ink .badge--founder { border-color: var(--color-bg); color: var(--color-bg); }

/* ── the chart wall ─────────────────────────────────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--color-text);
  background: var(--color-bg);
  color: var(--color-text);
}

.tile--ink { background: var(--color-text); color: var(--color-bg); }
.tile--ink a { color: var(--color-bg); }

.tile__claim { margin: 0; }
.tile__claim span { display: block; }

.tile__pos {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.tile--ink .tile__pos { color: var(--color-accent); }
.tile__pos--role { font-size: 28px; }

.tile__chart,
.tile__where,
.tile__label,
.news-item__when,
.company__kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tile__chart { margin-top: var(--space-2); }
.tile__where, .tile__label { opacity: 0.8; }

.tile__work { display: flex; gap: var(--space-3); align-items: flex-start; }
.tile__work p { margin: 0; }

.tile__art {
  width: calc(var(--space-8) * 2);
  height: calc(var(--space-8) * 2);
  object-fit: cover;
  flex: none;
}

.tile__artist { font-size: 18px; margin: 0 0 var(--space-1); }
.tile__note { font-size: 14px; margin: 0; }

.tile__also {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 0;
  border-top: 2px solid currentColor;
  font-size: 12px;
}

.tile__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.tile__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tile__source { font-size: 11px; }

/* Role filter: pure CSS, so it works without JavaScript. */
.wall-filters { border: 0; margin: var(--space-8) 0 0; padding: 0; }
.wall-filters legend { padding: 0; }

.work-page:has(#wf-producer:checked) :is(.tile, .disco__item):not([data-role~="producer"]),
.work-page:has(#wf-consultant:checked) :is(.tile, .disco__item):not([data-role~="consultant"]),
.work-page:has(#wf-publisher:checked) :is(.tile, .disco__item):not([data-role~="publisher"]),
.work-page:has(#wf-manager:checked) :is(.tile, .disco__item):not([data-role~="manager"]),
.work-page:has(#wf-anr:checked) :is(.tile, .disco__item):not([data-role~="anr"]),
.work-page:has(#wf-tv:checked) :is(.tile, .disco__item):not([data-role~="tv"]),
.work-page:has(#wf-remixer:checked) :is(.tile, .disco__item):not([data-role~="remixer"]),
.work-page:has(#wf-hitvocals:checked) :is(.tile, .disco__item):not([data-role~="hitvocals"]),
.work-page:has(#wf-remixconsultant:checked) :is(.tile, .disco__item):not([data-role~="remixconsultant"]) {
  display: none;
}

/* A section with nothing in the chosen role drops out, so the next one with
   matches follows straight on instead of leaving empty headings. */
.work-page:has(#wf-producer:checked) .filterable:not(:has([data-role~="producer"])),
.work-page:has(#wf-remixer:checked) .filterable:not(:has([data-role~="remixer"])),
.work-page:has(#wf-consultant:checked) .filterable:not(:has([data-role~="consultant"])),
.work-page:has(#wf-publisher:checked) .filterable:not(:has([data-role~="publisher"])),
.work-page:has(#wf-manager:checked) .filterable:not(:has([data-role~="manager"])),
.work-page:has(#wf-tv:checked) .filterable:not(:has([data-role~="tv"])),
.work-page:has(#wf-hitvocals:checked) .filterable:not(:has([data-role~="hitvocals"])),
.work-page:has(#wf-remixconsultant:checked) .filterable:not(:has([data-role~="remixconsultant"])) {
  display: none;
}

/* A role with nothing tagged yet says so instead of leaving an empty page. */
.filter-empty { display: none; margin: var(--space-4) 0 0; }
.work-page:has(#wf-remixer:checked) #wf-empty-remixer,
.work-page:has(#wf-producer:checked) #wf-empty-producer,
.work-page:has(#wf-consultant:checked) #wf-empty-consultant,
.work-page:has(#wf-publisher:checked) #wf-empty-publisher,
.work-page:has(#wf-manager:checked) #wf-empty-manager,
.work-page:has(#wf-tv:checked) #wf-empty-tv,
.work-page:has(#wf-hitvocals:checked) #wf-empty-hitvocals,
.work-page:has(#wf-remixconsultant:checked) #wf-empty-remixconsultant { display: block; }

/* ── discography ────────────────────────────────────────────────────────── */

.disco {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: 0 var(--space-8);
}

@media (min-width: 720px) { .disco { grid-template-columns: repeat(2, 1fr); } }

/* Sleeve on the left; artist and title get the full width beside it, with
   the year and role badges on their own line underneath, so a record with
   five roles never squeezes its name into a narrow column. */
.disco__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 2px solid var(--color-divider);
}

.disco__art {
  grid-row: span 2;
  width: calc(var(--space-6) * 2);
  height: calc(var(--space-6) * 2);
  object-fit: cover;
  flex: none;
}

.disco__art--empty { display: block; background: var(--color-surface); }
.disco__text { display: flex; flex-direction: column; min-width: 0; }
.disco__artist { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.disco__title { font-size: 14px; }
.disco__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 12px; }
.disco__meta .badge { white-space: nowrap; }

/* ── news, year by year ─────────────────────────────────────────────────── */

.year-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

.year-jump a {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-divider);
  font-size: 13px;
  text-decoration: none;
  color: var(--color-text);
}

.year-jump a:hover { background: var(--color-text); color: var(--color-bg); }

.year {
  border-top: 2px solid var(--color-text);
  padding-block: var(--space-8);
  display: grid;
  gap: var(--space-6);
  scroll-margin-top: var(--space-8);
}

.year__num {
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.9;
  color: var(--color-accent);
  margin: 0;
}

@media (min-width: 720px) {
  .year { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .year__num { position: sticky; top: var(--space-8); align-self: start; }
}

.news-item + .news-item {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 2px solid var(--color-divider);
}

.news-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.news-item__title { font-size: 22px; margin: var(--space-3) 0 var(--space-2); }
.news-item__body { max-width: 62ch; }

.news-item__images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.news-img { margin: 0; }
.news-img img { width: 100%; height: auto; display: block; }
.news-img figcaption { font-size: 12px; margin-top: var(--space-1); opacity: 0.8; }

.news-latest { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
.news-latest .news-item + .news-item { margin-top: 0; padding-top: 0; border-top: 0; }

@media (min-width: 720px) { .news-latest { grid-template-columns: repeat(3, 1fr); } }

/* ── faces and places, photographs ──────────────────────────────────────── */

.faces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.faces--small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--space-4); }

/* The name sits in the photograph's bottom-left corner in a small solid ink
   block, so the person reads at a glance. Solid, not a tint over the image. */
.face { margin: 0; }
.face__photo { position: relative; }
.face__name {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  max-width: 100%;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.face img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.face figcaption { font-size: 13px; margin-top: var(--space-2); }

/* ── companies (About) ──────────────────────────────────────────────────── */

.companies { display: grid; gap: var(--space-8); margin-top: var(--space-8); }

@media (min-width: 720px) { .companies { grid-template-columns: repeat(2, 1fr); } }

.company { border-top: 2px solid var(--color-text); padding-top: var(--space-4); scroll-margin-top: var(--space-8); }
.company h3 { margin: 0 0 var(--space-1); }

/* ── footer links ───────────────────────────────────────────────────────── */

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13px; }

/* View counts are long numbers, so they sit smaller than a chart position. */
.tile__pos--views { font-size: 34px; }

/* Views on a charted tile: a second headline under the chart position. */
.tile__reach {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 2px solid currentColor;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tile__reach-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* ── the record strip on a news story ──────────────────────────────────── */

.news-rec {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--color-text);
  max-width: 62ch;
}

.news-rec--ink { background: var(--color-text); color: var(--color-bg); }
.news-rec--ink .news-rec__pos { color: var(--color-accent); }
.news-rec--ink .badge--producer { background: var(--color-bg); color: var(--color-text); }

.news-rec__art {
  width: calc(var(--space-8) * 3.75);
  height: calc(var(--space-8) * 3.75);
  object-fit: cover;
  flex: none;
}

.news-rec__facts { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.news-rec__facts p { margin: 0; }
.news-rec__claim span { display: block; }

.news-rec__pos {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.news-rec__chart,
.news-rec__where,
.news-rec__views {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-rec__chart { margin-top: var(--space-1); }
.news-rec__where { opacity: 0.8; }

.news-rec__views-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: none;
}

.news-rec__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.news-item__watch { font-size: 13px; }

@media (max-width: 480px) {
  .news-rec { flex-direction: column; }
}

/* ── full-screen viewing ────────────────────────────────────────────────────
   Photographs and archive scans pop and wobble slightly on hover, to say they
   open full screen. Record sleeves do not. Reduced motion keeps the cue as a
   still frame, with no movement. */

.zoom {
  display: block;
  cursor: zoom-in;
  overflow: hidden;
  outline-offset: 2px;
}

.zoom img {
  transition: transform 180ms ease-out;
  transform-origin: center;
}

@keyframes zoom-wobble {
  0% { transform: scale(1); }
  35% { transform: scale(1.06) rotate(-1.2deg); }
  60% { transform: scale(1.05) rotate(0.8deg); }
  80% { transform: scale(1.055) rotate(-0.4deg); }
  100% { transform: scale(1.05) rotate(0); }
}

.zoom:hover img,
.zoom:focus-visible img {
  animation: zoom-wobble 420ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .zoom img { transition: none; }
  .zoom:hover img,
  .zoom:focus-visible img {
    animation: none;
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
}

.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: var(--space-8) var(--space-4);
  border: 0;
  background: color-mix(in srgb, var(--color-text) 94%, transparent);
  color: var(--color-bg);
}

.lightbox::backdrop { background: color-mix(in srgb, var(--color-text) 70%, transparent); }

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
}

.lightbox__img {
  max-width: min(92vw, 1600px);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lightbox .lightbox__caption {
  color: var(--color-bg);
  font-size: 14px;
  max-width: 62ch;
  text-align: left;
}

.lightbox__btn {
  position: fixed;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
  border: 2px solid var(--color-bg);
  border-radius: 0;
  cursor: pointer;
}

.lightbox__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.lightbox__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lightbox__close { top: var(--space-4); right: var(--space-4); }
.lightbox__prev { left: var(--space-4); top: 50%; }
.lightbox__next { right: var(--space-4); top: 50%; }

@media (max-width: 640px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--space-4); }
}

/* ── clients: each name set as its own mark ─────────────────────────────── */

.clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.clients--featured { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }

.client {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--space-8) * 3.5);
  padding: var(--space-4);
  border: 2px solid var(--color-text);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: background 150ms ease-out, color 150ms ease-out;
}

a.client:hover { background: var(--color-text); color: var(--color-bg); }
a.client:hover .badge--producer { background: var(--color-bg); color: var(--color-text); }

.client__mark {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.client--big { min-height: calc(var(--space-8) * 5); }
.client--big .client__mark { font-size: clamp(26px, 3.2vw, 38px); }

.client--ink { background: var(--color-text); color: var(--color-bg); }
.client--ink .client__mark { color: var(--color-accent); }
a.client--ink:hover { background: var(--color-bg); color: var(--color-text); }

.client__note { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.client__type { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.client__type .badge { font-size: 10px; }

.clients__az-h { margin-top: calc(var(--space-8) * 1.5); }
.clients__letter { scroll-margin-top: var(--space-8); }

.clients__letter-h {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 40px;
  color: var(--color-accent);
  margin: var(--space-8) 0 0;
  border-top: 2px solid var(--color-text);
  padding-top: var(--space-3);
}

/* Seven tabs do not fit beside the wordmark on a phone: the wordmark takes
   its own line and the links wrap beneath it. */
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; row-gap: var(--space-2); column-gap: var(--space-4); }
  .nav-brand { flex-basis: 100%; }
}

.badge--musicdirector { background: var(--color-surface); color: var(--color-text); border-left: 6px solid var(--color-accent-700); }

/* ── certifications: gold and platinum ──────────────────────────────────────
   Colours from tokens-extension.css. Solid fields, no gradient, zero radius,
   with a darker edge so the metal reads on paper and on an ink tile alike.
   Ink text on both: well above 4.5:1. */

.cert {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  border: 2px solid;
}

.cert--gold { background: var(--color-gold); border-color: var(--color-gold-edge); }
.cert--platinum { background: var(--color-platinum); border-color: var(--color-platinum-edge); }

.cert__level {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.cert__body {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-left: 2px solid currentColor;
  padding-left: var(--space-2);
}

/* The original record behind a remix: set apart under its own heading. */
.orig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 2px dotted currentColor;
}

.orig p { margin: 0; }
.orig__h { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
/* A remix on the grid under its original record's peak says so first. */
.tile__kicker { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.orig__peak { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; }
.disco__orig { font-size: 12px; opacity: 0.85; }

/* Region filter for the merged chart grid. Only tiles with a region are
   affected, so Beyond the charts and More records stay put. */
.work-page:has(#rf-west:checked) .tile[data-region]:not([data-region="west"]),
.work-page:has(#rf-asia:checked) .tile[data-region]:not([data-region="asia"]) {
  display: none;
}
.wall-filters + .wall-filters { margin-top: var(--space-4); }

/* ── television: channel in red, programme in large type ────────────────── */

.tv-tile { gap: var(--space-3); }
.tv-tile p { margin: 0; }

.tv-tile__channel {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.tv-tile__logo {
  display: block; height: 64px; width: auto; max-width: 100%;
  align-self: flex-start; object-fit: contain; object-position: left center;
}
/* A full-colour logo shown as an image, in black and white. */
.client__img { display: block; height: 64px; width: auto; max-width: 100%; align-self: flex-start; object-fit: contain; object-position: left center; }
/* The same marks on the Clients page, in the tile's own text colour so they
   follow the hover inversion. */
.client__logo {
  display: block; height: 56px; max-width: 100%;
  background: currentColor;
  -webkit-mask: var(--logo) left center / contain no-repeat;
  mask: var(--logo) left center / contain no-repeat;
}
.tv-tile__show {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-bg);
}

.tv-tile__where { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.tv-tile .badge--tv { background: var(--color-bg); }

/* ── back to top ─────────────────────────────────────────────────────────── */
/* Ink square, paper edge so it reads on ink tiles too. Hidden near the top. */
.to-top {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-text);
  color: var(--color-bg);
  border: 2px solid var(--color-bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.to-top:hover { background: var(--color-accent-700); }
.to-top--away { opacity: 0; transform: translateY(var(--space-2)); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ── showreel ─────────────────────────────────────────────────────────────
   One engineered sequence: frames cut in on ink, the number rises, the rest
   settles. The final frame is the page's one red field. Without JavaScript
   or with reduced motion the frames sit as a still grid. */
.reel { background: var(--color-text); color: var(--color-bg); }
.reel__stage {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px;
  background: var(--color-bg);
}
.reel__frame {
  background: var(--color-text); color: var(--color-bg);
  padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
  min-height: 260px;
}
.reel__frame p { margin: 0; }
.reel__kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; opacity: 0.8; }
.reel__claim { display: flex; flex-direction: column; gap: var(--space-2); }
.reel__big {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em;
  font-size: clamp(64px, 12vw, 168px); line-height: 0.9; color: var(--color-accent);
}
.reel__big--num { font-size: clamp(44px, 8.5vw, 120px); color: var(--color-bg); font-variant-numeric: tabular-nums; }
.reel__chart { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(18px, 2.4vw, 30px); letter-spacing: -0.01em; }
.reel__where, .reel__role, .reel__also { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.reel__title { font-size: clamp(17px, 2vw, 24px); max-width: 32ch; }
.reel__mark, .reel__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; line-height: 0.95; }
.reel__mark { font-size: clamp(56px, 11vw, 150px); }
.reel__name { font-size: clamp(36px, 6vw, 84px); }
.reel__line { font-size: clamp(17px, 2vw, 24px); max-width: 34ch; }
.reel__logos { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }
.reel__logos img { height: 56px; width: auto; }
.reel__brands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; font-size: clamp(30px, 5vw, 72px); line-height: 1; }
.reel__frame--close { background: var(--color-accent); color: var(--color-bg); }
.reel__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.reel__links a { color: var(--color-bg); border: 2px solid var(--color-bg); padding: var(--space-2) var(--space-4); text-decoration: none; font-weight: 600; }
.reel__links a:hover { background: var(--color-bg); color: var(--color-accent-700); }
.reel__bar { display: none; }

/* Live: the stills stay for screen readers; the show plays on top. */
.reel__show { display: none; }
.reel--live .reel__stage {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.reel--live .reel__show {
  display: block; position: relative; overflow: hidden; isolation: isolate;
  height: clamp(480px, 78vh, 760px); background: var(--color-text); color: var(--color-bg);
  padding: var(--space-8) max(var(--space-6), env(safe-area-inset-left, 0px));
}
.reel__show--inverse { background: var(--color-bg) !important; color: var(--color-text) !important; }
.reel--live .reel__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6); border-top: 2px solid var(--color-bg);
}
.reel__progress { flex: 1; height: 2px; background: color-mix(in srgb, var(--color-bg) 25%, transparent); }
.reel__progress span { display: block; height: 100%; width: 0; background: var(--color-bg); transition: width 0.4s ease; }
.reel__btn { background: transparent; color: var(--color-bg); border: 2px solid var(--color-bg); padding: var(--space-1) var(--space-3);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.reel__btn:hover { background: var(--color-bg); color: var(--color-text); }

/* Show pieces. Display type is Archivo 800 throughout; red is the cut. */
.reel__show > * { position: absolute; }
.reel-line { left: 0; right: 0; top: 50%; height: 2px; background: var(--color-accent); transform-origin: left; }
.reel-mark { left: max(var(--space-6), env(safe-area-inset-left, 0px)); top: 18%; display: flex;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; line-height: 0.85;
  font-size: clamp(90px, 21vw, 300px); }
.reel-mark span { display: inline-block; }
.reel-name { left: max(var(--space-6), env(safe-area-inset-left, 0px)); top: calc(18% + clamp(90px, 21vw, 300px));
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(34px, 6vw, 88px); line-height: 1; }
.reel-tag { left: max(var(--space-6), env(safe-area-inset-left, 0px)); bottom: 12%; font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }

.reel-bands { inset: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); }
.reel-band { overflow: hidden; white-space: nowrap; }
.reel-band__track { display: inline-flex; will-change: transform; }
.reel-band span { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em;
  font-size: clamp(40px, 8vw, 110px); line-height: 1.05; opacity: 0.28; padding-right: 0.3em; }
.reel-band--red span { color: var(--color-accent); opacity: 0.9; }
.reel-band--hv span { opacity: 0.5; font-size: clamp(28px, 5vw, 70px); }
.reel-slab { left: max(var(--space-6), env(safe-area-inset-left, 0px)); bottom: 10%; display: flex; flex-direction: column;
  background: var(--color-text); padding: var(--space-3) var(--space-4); border: 2px solid var(--color-bg); }
.reel-slab span { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.02em; }

.reel-no1 { left: max(var(--space-6), env(safe-area-inset-left, 0px)); top: 6%; color: var(--color-accent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.04em; line-height: 0.82;
  font-size: clamp(120px, 26vw, 380px); transform-origin: left top; }
.reel-no1__card { left: max(var(--space-6), env(safe-area-inset-left, 0px)); right: var(--space-6); bottom: 9%; display: grid; gap: var(--space-1); }
.reel-no1__artist { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em;
  font-size: clamp(30px, 5.4vw, 76px); line-height: 1; transform-origin: left center; }
.reel-no1__chart { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(16px, 2.2vw, 28px); }
.reel-no1__where, .reel-no1__role { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; opacity: 0.85; }
.reel-no1__role { color: var(--color-accent); opacity: 1; }
.reel-no1__title { font-size: clamp(15px, 1.8vw, 22px); }

.reel-mosaic { inset: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(70px, 9vw, 130px), 1fr)); gap: 2px; opacity: 0.38; }
.reel-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.reel-count { left: max(var(--space-6), env(safe-area-inset-left, 0px)); right: var(--space-6); bottom: 10%;
  background: var(--color-text); padding: var(--space-4) var(--space-5); border-left: 6px solid var(--color-accent); max-width: 920px; }
.reel-count__num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.03em;
  font-size: clamp(54px, 11vw, 160px); line-height: 0.9; font-variant-numeric: tabular-nums; }
.reel-count__unit { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(18px, 2.4vw, 30px); }
.reel-count__who { font-size: clamp(16px, 2vw, 24px); margin-top: var(--space-2); transform-origin: left center; }
.reel-count__meta { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); margin-top: var(--space-1); }

.reel-kick { left: max(var(--space-6), env(safe-area-inset-left, 0px)); top: 12%; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }
.reel-logos { left: max(var(--space-6), env(safe-area-inset-left, 0px)); right: var(--space-6); top: 30%; display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); align-items: center; }
.reel-logos img { height: clamp(48px, 9vw, 120px); width: auto; }
.reel-small { left: max(var(--space-6), env(safe-area-inset-left, 0px)); bottom: 12%; max-width: 46ch; font-size: clamp(15px, 1.8vw, 22px); }
.reel-brand { left: max(var(--space-6), env(safe-area-inset-left, 0px)); right: var(--space-6); top: 50%; translate: 0 -50%;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(64px, 14vw, 220px); transform-origin: left center; }

.reel-cut { inset: 0; z-index: 5; }
.reel-cut--red { background: var(--color-accent); }
.reel-cut--paper { background: var(--color-bg); }
.reel-flash { inset: 0; z-index: 4; background: var(--color-accent); pointer-events: none; mix-blend-mode: screen; }
.reel-close { inset: 0; z-index: 6; background: var(--color-accent); color: var(--color-bg);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); padding: var(--space-8) max(var(--space-6), env(safe-area-inset-left, 0px)); }
.reel-close__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.03em; line-height: 0.95;
  font-size: clamp(48px, 9vw, 140px); transform-origin: left center; }
.reel-close__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.reel-close__links a { color: var(--color-bg); border: 2px solid var(--color-bg); padding: var(--space-3) var(--space-5); text-decoration: none; font-weight: 600; font-size: 15px; }
.reel-close__links a:hover { background: var(--color-bg); color: var(--color-accent-700); }
@media (prefers-reduced-motion: reduce) { .reel__frame, .reel__frame * { animation: none !important; transition: none !important; } }

/* On chart and reach frames the artist is part of the headline. */
.reel__frame--chart .reel__kicker, .reel__frame--reach .reel__title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em;
  font-size: clamp(24px, 3.6vw, 48px); text-transform: none; opacity: 1; line-height: 1;
}

/* ── showreel, version B: a cinematic flight through 3D space ─────────────
   After the style of a product film: type flies through the camera, one
   spot-lit hero object (a vinyl record), depth of field, a carousel. Ink,
   paper, red and Archivo only; the glow is a blurred solid, not a gradient. */
.reel--b.reel--live .reel__show { perspective: 1000px; perspective-origin: 50% 45%; }
.b-space { inset: 0; transform-style: preserve-3d; display: grid; place-items: center; }
.b-space > * { position: absolute; }
.b-glow { left: 50%; top: 50%; width: min(70vh, 640px); aspect-ratio: 1; translate: -50% -50%;
  filter: blur(90px); opacity: 0.32; }
/* The disc is clipped first, then the parent's blur softens its edge. */
.b-glow::before { content: ""; position: absolute; inset: 0; background: var(--color-accent); clip-path: circle(38%); }
.b-vinyl { left: 50%; top: 52%; width: var(--size); aspect-ratio: 1; transform-style: preserve-3d; }
.b-vinyl--corner { left: auto; right: -6%; top: auto; bottom: -14%; transform: rotateX(64deg) rotateZ(-12deg); opacity: 0.85; }
.b-vinyl__disc { width: 100%; height: 100%; display: block; }
.b-v-body { fill: var(--color-text); stroke: none; }
.b-v-groove { fill: none; stroke: var(--color-bg); stroke-width: 0.6; opacity: 0.14; }
.b-v-groove--hi { opacity: 0.26; }
.b-v-rim { fill: none; stroke: var(--color-bg); stroke-width: 2; opacity: 0.6; }
.b-v-label { fill: var(--color-accent); }
.b-v-text { fill: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: -0.5px; text-anchor: middle; }
.b-v-hole { fill: var(--color-text); }
.b-v-glint { fill: none; stroke: var(--color-bg); stroke-width: 3; opacity: 0.55; stroke-linecap: round; }
.b-fly { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.04em; line-height: 0.85;
  font-size: clamp(110px, 24vw, 360px); color: var(--color-bg); white-space: nowrap; }
.b-fly--brand { font-size: clamp(70px, 14vw, 230px); }
.b-mark { left: max(var(--space-6), env(safe-area-inset-left, 0px)); top: 10%;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.03em; line-height: 0.85; font-size: clamp(80px, 17vw, 250px); }
.b-tag { left: max(var(--space-6), env(safe-area-inset-left, 0px)); top: calc(10% + clamp(80px, 17vw, 250px) + var(--space-3));
  font-size: clamp(12px, 1.4vw, 16px); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }
.b-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; white-space: nowrap;
  font-size: clamp(28px, 4.6vw, 64px); color: var(--color-bg); }
.b-name--red { color: var(--color-accent); }
.b-slab { left: max(var(--space-6), env(safe-area-inset-left, 0px)); bottom: 10%; display: flex; flex-direction: column;
  background: var(--color-text); padding: var(--space-3) var(--space-4); border: 2px solid var(--color-bg); }
.b-slab span { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.02em; }
.b-no1 { left: max(var(--space-6), env(safe-area-inset-left, 0px)); top: 4%; color: var(--color-accent); transform-origin: left center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.05em; line-height: 0.8; font-size: clamp(130px, 27vw, 400px); }
.b-card { left: max(var(--space-6), env(safe-area-inset-left, 0px)); right: 30%; bottom: 9%; display: grid; gap: var(--space-1); transform-style: preserve-3d; }
.b-card__artist { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; font-size: clamp(30px, 5.4vw, 78px); line-height: 1; }
.b-card__chart { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(16px, 2.2vw, 28px); }
.b-card__where, .b-card__role { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; opacity: 0.85; }
.b-card__role { color: var(--color-accent); opacity: 1; }
.b-card__title { font-size: clamp(15px, 1.8vw, 22px); }
.b-kick { left: max(var(--space-6), env(safe-area-inset-left, 0px)); top: 8%; z-index: 2; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }
.b-head { width: min(78vw, 980px); display: grid; gap: var(--space-2); }
.b-head__when { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); }
.b-head__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(28px, 4.6vw, 66px); text-wrap: balance; }
.b-ring { --cell: clamp(90px, 11vw, 150px); left: 50%; top: 40%; width: var(--cell); height: var(--cell); transform-style: preserve-3d; }
.b-ring img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; }
.b-count { left: max(var(--space-6), env(safe-area-inset-left, 0px)); right: var(--space-6); bottom: 8%; z-index: 3; max-width: 920px;
  background: var(--color-text); padding: var(--space-4) var(--space-5); border-left: 6px solid var(--color-accent); }
.b-count__num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.03em; line-height: 0.9; font-size: clamp(54px, 10vw, 150px); font-variant-numeric: tabular-nums; }
.b-count__unit { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(18px, 2.4vw, 30px); }
.b-count__who { font-size: clamp(15px, 1.9vw, 22px); margin-top: var(--space-2); }
.b-count__meta { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); margin-top: var(--space-1); }
.b-logos { left: max(var(--space-6), env(safe-area-inset-left, 0px)); right: var(--space-6); top: 30%; display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); align-items: center; transform-style: preserve-3d; }
.b-logos img { height: clamp(48px, 9vw, 120px); width: auto; }
.b-small { left: max(var(--space-6), env(safe-area-inset-left, 0px)); bottom: 12%; max-width: 46ch; font-size: clamp(15px, 1.8vw, 22px); }

/* A link that should stand out in running text, such as an artist's own site. */
.link-strong { font-weight: var(--font-heading-weight); }

/* ── company logo plates (Where the work happens) ──────────────────────────
   One size for every plate so the marks read as a set; the logo sits flush
   left inside, as tall as the plate allows, in its own brand colours. */
.venture-logo {
  display: flex;
  align-items: center;
  height: calc(var(--space-8) * 4);
  padding: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
}
.venture-logo--dark { background: var(--color-text); }
/* Square marks fill the plate's height; wide ones stop at 80% of its width,
   so a round badge and a long wordmark carry similar weight. */
.venture-logo img { display: block; height: 100%; width: auto; max-width: 80%; object-fit: contain; object-position: left center; }
.company .venture-logo { margin-top: var(--space-2); }

/* Londons.ai: mark + wordmark, as its brand guidelines lay it out. */
.londons { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.londons__mark { height: var(--space-8); width: auto; }
.londons__word { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--space-8); letter-spacing: -0.02em; line-height: 1; }
.londons__ai { color: var(--color-accent); }

/* The Billboard wordmark, as a mask in the current text colour. */
.bb-logo {
  display: block;
  width: calc(var(--space-8) * 3.5);
  aspect-ratio: 900 / 190;
  margin-bottom: var(--space-2);
  background-color: currentColor;
  -webkit-mask: url("assets/logos/billboard-mask.png") left center / contain no-repeat;
  mask: url("assets/logos/billboard-mask.png") left center / contain no-repeat;
}
.bb-logo--inline {
  display: inline-block;
  width: calc(var(--space-8) * 1.6);
  margin: 0 var(--space-2) 0 0;
  vertical-align: -0.1em;
}

/* The home page's way into the Work page: a red button with a ring that
   pulses outward, so it is the obvious next click. The button itself never
   fades; only the ring does. Off for anyone who asks for reduced motion. */
.btn-pulse { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); }
.btn-pulse svg { transition: transform 160ms ease-out; }
.btn-pulse:hover svg, .btn-pulse:focus-visible svg { transform: translateX(var(--space-1)); }
.btn-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-accent);
  pointer-events: none;
  animation: btn-pulse 1.8s ease-out infinite;
}
/* Buttons side by side pulse one after another, not in unison. */
.cta-row .btn-pulse:nth-child(2)::after { animation-delay: 0.6s; }
.cta-row .btn-pulse:nth-child(3)::after { animation-delay: 1.2s; }
@keyframes btn-pulse {
  0% { inset: 0; opacity: 0.9; }
  100% { inset: calc(var(--space-3) * -1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-pulse::after { animation: none; opacity: 0; }
  .btn-pulse svg { transition: none; }
}

/* News: filter by kind of story (pure CSS, like the Work filters). A year
   with no story of the chosen kind hides too. */
.news-page:has(#nk-charts:checked) .news-item:not([data-kind="charts"]),
.news-page:has(#nk-charts:checked) .year:not(:has([data-kind="charts"])) { display: none; }
.news-page:has(#nk-releases:checked) .news-item:not([data-kind="releases"]),
.news-page:has(#nk-releases:checked) .year:not(:has([data-kind="releases"])) { display: none; }
.news-page:has(#nk-tv:checked) .news-item:not([data-kind="tv"]),
.news-page:has(#nk-tv:checked) .year:not(:has([data-kind="tv"])) { display: none; }
.news-page:has(#nk-studio:checked) .news-item:not([data-kind="studio"]),
.news-page:has(#nk-studio:checked) .year:not(:has([data-kind="studio"])) { display: none; }
.news-page:has(#nk-company:checked) .news-item:not([data-kind="company"]),
.news-page:has(#nk-company:checked) .year:not(:has([data-kind="company"])) { display: none; }

/* Clients: filter artists by region (Matt, 9 November 2026, as on
   audiofreaksmusic.com). Letters with no artist left hide, and so do their
   jump links' targets. */
.clients-page:has(#cr-asia:checked) #artists .client[data-region]:not([data-region="asia"]),
.clients-page:has(#cr-west:checked) #artists .client[data-region]:not([data-region="west"]),
.clients-page:has(#cr-asia:checked) .clients__letter:not(:has([data-region="asia"])),
.clients-page:has(#cr-west:checked) .clients__letter:not(:has([data-region="west"])) { display: none; }

/* Work: filter by genre (Matt, 9 November 2026, after the audiofreaksmusic.com
   catalogue). Works alongside the role and region filters; a section with
   nothing in the chosen genre hides. */
.work-page:has(#wg-dance:checked) :is(.tile, .disco__item):not([data-genre~="dance"]),
.work-page:has(#wg-dance:checked) .filterable:not(:has([data-genre~="dance"])) { display: none; }
.work-page:has(#wg-pop:checked) :is(.tile, .disco__item):not([data-genre~="pop"]),
.work-page:has(#wg-pop:checked) .filterable:not(:has([data-genre~="pop"])) { display: none; }
.work-page:has(#wg-kpop:checked) :is(.tile, .disco__item):not([data-genre~="kpop"]),
.work-page:has(#wg-kpop:checked) .filterable:not(:has([data-genre~="kpop"])) { display: none; }
.work-page:has(#wg-jpop:checked) :is(.tile, .disco__item):not([data-genre~="jpop"]),
.work-page:has(#wg-jpop:checked) .filterable:not(:has([data-genre~="jpop"])) { display: none; }
.work-page:has(#wg-cpop:checked) :is(.tile, .disco__item):not([data-genre~="cpop"]),
.work-page:has(#wg-cpop:checked) .filterable:not(:has([data-genre~="cpop"])) { display: none; }

/* ── long lists: folds, Collapse, pinned year and letter bars ─────────────
   After audiofreaksmusic.com (Matt, 9 November 2026). The script adds the
   Show more bar and the Collapse button; without it every list shows. */
.is-paged { display: none !important; }
.fold-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.fold-bar__count { margin: 0; font-size: 13px; color: var(--color-text-muted, var(--color-text)); }
.fold-bar[hidden], .fold-bar__more[hidden] { display: none; }

.to-collapse {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-4) * 2 + var(--space-8) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent);
  color: var(--color-bg);
  border: 2px solid var(--color-bg);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.to-collapse:hover { background: var(--color-accent-700); }
@media (max-width: 40rem) { .to-collapse__name { display: none; } }
@media (prefers-reduced-motion: reduce) { .to-collapse { transition: none; } }

/* The year bar on News and the A to Z on Clients stay pinned to the top while
   you scroll, so any year or letter is one tap away. One row on a phone,
   swiped sideways. */
.year-jump--sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-top: 0;
  padding-block: var(--space-3);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
}
@media (max-width: 40rem) {
  .year-jump--sticky { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .year-jump--sticky a { flex: none; }
}
.news-page .year, .clients__letter { scroll-margin-top: calc(var(--jump-h, 4rem) + var(--space-4)); }
@media (min-width: 720px) { .news-page .year__num { top: calc(var(--jump-h, 4rem) + var(--space-4)); } }

/* Showreel: while the film plays, Skip is pinned to the bottom middle of the
   screen and stays there as you scroll, until the film ends (Matt, 9 November
   2026). Replay stays in the bar. */
.reel--live .reel__skip:not([hidden]) {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 45;
  padding: var(--space-2) var(--space-6);
  background: var(--color-text);
  color: var(--color-bg);
  border: 2px solid var(--color-bg);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reel--live .reel__skip:not([hidden]):hover { background: var(--color-accent-700); color: var(--color-bg); }

/* Home: the company name above the headline, set as a feature rather than a
   small label (Matt, 11 November 2026): heavy, full ink, a size up. */
.home-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(16px, 2.2vw, 24px);
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* Home: the company strip under the introduction (Matt, 11 November 2026).
   The same logo plates as "Where the work happens", smaller, six across on
   a wide screen, each a link out to the company's own site. */
.company-strip { margin-top: calc(var(--space-8) * 1.5); border-top: 2px solid var(--color-text); padding-top: var(--space-4); }
.company-strip__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .company-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .company-strip__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.company-strip__link { display: block; outline-offset: 2px; text-decoration: none; }
.company-strip .venture-logo { height: calc(var(--space-8) * 2.5); margin: 0; padding: var(--space-3) var(--space-4); border: 2px solid transparent; transition: border-color 0.15s ease; }
.company-strip .venture-logo img { max-width: 100%; }
.company-strip .londons { gap: var(--space-2); min-width: 0; }
.company-strip .londons__mark { height: clamp(12px, 1.05vw, 18px); }
.company-strip .londons__word { font-size: clamp(14px, 1.15vw, 19px); }
.company-strip .venture-logo { overflow: hidden; }
.company-strip__link:hover .venture-logo, .company-strip__link:focus-visible .venture-logo { border-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .company-strip .venture-logo { transition: none; } }
/* Strip logos sit in the middle of their plates (Matt, 11 November 2026). */
.company-strip .venture-logo { justify-content: center; }
.company-strip .venture-logo img { object-position: center; }
.company-strip .londons__mark { flex: none; width: auto; aspect-ratio: 100 / 60; }
.company-strip__link, .company-strip__link:hover { text-decoration: none; }

/* ── the opening film (home) ──────────────────────────────────────────────
   Ported from audiofreaksmusic.com's intro (Matt, 11 November 2026) and set
   in the MMMMM system: Archivo only, ink and paper, red for the No. 1 and the
   progress line, gold and platinum only on certifications, no gradients and
   no shadows. Sizes follow the film's own box (container units), so it reads
   the same at every width. Without JavaScript, or with reduced motion, only
   the end card shows. */
.mi-bar { position: relative; background: var(--color-text); }
.mi { position: relative; width: 100%; aspect-ratio: 1920 / 856; max-height: 70vh; container-type: size; overflow: hidden; background: var(--color-text); color: var(--color-bg); }
.mi-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; }
.mi-scene.is-on { opacity: 1; visibility: visible; }
.mi-scene.is-out { opacity: 0; visibility: visible; transition: opacity 0.35s ease-in-out; }
.mi-scene p { margin: 0; }
.mi-kicker, .mi-lead { font-size: max(11px, 3.4cqh); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-bg); opacity: 0.75; text-align: center; }
.mi-kicker { position: absolute; top: 9cqh; left: 0; right: 0; }
@keyframes mi-rise { from { opacity: 0; transform: translateY(5cqh) scale(0.94); filter: blur(var(--space-1)); } to { opacity: 1; transform: none; filter: none; } }
.mi :is(.mi-pop, li):nth-child(1) { --i: 0; } .mi :is(.mi-pop, li):nth-child(2) { --i: 1; } .mi :is(.mi-pop, li):nth-child(3) { --i: 2; }
.mi :is(.mi-pop, li):nth-child(4) { --i: 3; } .mi :is(.mi-pop, li):nth-child(5) { --i: 4; } .mi :is(.mi-pop, li):nth-child(6) { --i: 5; }
.mi :is(.mi-pop, li):nth-child(7) { --i: 6; } .mi :is(.mi-pop, li):nth-child(8) { --i: 7; } .mi :is(.mi-pop, li):nth-child(9) { --i: 8; }
.mi :is(.mi-pop, li):nth-child(10) { --i: 9; } .mi :is(.mi-pop, li):nth-child(11) { --i: 10; } .mi :is(.mi-pop, li):nth-child(12) { --i: 11; }
.mi :is(.mi-pop, li):nth-child(13) { --i: 12; } .mi :is(.mi-pop, li):nth-child(14) { --i: 13; } .mi :is(.mi-pop, li):nth-child(15) { --i: 14; }
.mi :is(.mi-pop, li):nth-child(16) { --i: 15; } .mi :is(.mi-pop, li):nth-child(17) { --i: 16; } .mi :is(.mi-pop, li):nth-child(18) { --i: 17; }
.mi :is(.mi-pop, li):nth-child(19) { --i: 18; } .mi :is(.mi-pop, li):nth-child(20) { --i: 19; }

/* Matt's roles, popping out one by one, then the line */
.mi-pop { position: absolute; font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; font-size: min(20cqh, 9cqw); line-height: 1; opacity: 0; }
.mi-words.is-on .mi-pop { animation: mi-pop 0.62s calc(var(--i) * 0.58s) ease-out both; }
.mi-pop--tag { font-size: min(10cqh, 5.4cqw); text-align: center; padding: 0 4cqw; }
.mi-words.is-on .mi-pop--tag { animation: mi-pop-hold 0.7s calc(var(--i) * 0.58s) ease-out both; }
@keyframes mi-pop { 0% { opacity: 0; transform: scale(1.9); filter: blur(var(--space-2)); } 22% { opacity: 1; transform: scale(0.96); filter: none; } 34% { transform: scale(1.02); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.86) translateY(-3cqh); } }
@keyframes mi-pop-hold { 0% { opacity: 0; transform: scale(1.9); filter: blur(var(--space-2)); } 40% { opacity: 1; transform: scale(0.97); filter: none; } 60%, 100% { opacity: 1; transform: scale(1); } }

/* The cities */
.mi-cities { align-content: center; gap: 4cqh; }
.mi-city-list { list-style: none; margin: 0; padding: 0 4cqw; display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqh 4.5cqw; }
.mi-city-list li { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; font-size: min(11cqh, 4.1cqw); line-height: 1.1; text-transform: uppercase; opacity: 0; }
.mi-city-list [lang] { font-size: 0.6em; color: var(--color-accent); vertical-align: 0.3em; }
.mi-cities.is-on .mi-city-list li { animation: mi-rise 0.6s calc(0.25s + var(--i) * 0.32s) ease-out both; }
.mi-line { display: block; height: max(2px, 0.8cqh); width: 70cqw; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }
.mi-cities.is-on .mi-line { animation: mi-draw 1.5s 0.3s ease-in-out both; }
@keyframes mi-draw { to { transform: scaleX(1); } }

/* The No. 1s: a paper panel at the left holds the No. 1 still while the
   records change beside it; each chart line names chart, territory and date. */
.mi-no1 { place-items: stretch; }
.mi-no1-mark { position: absolute; left: 0; top: 0; bottom: 0; width: 56cqh; display: grid; place-content: center; justify-items: start; padding-left: 9cqh; box-sizing: border-box;
  background: var(--color-bg); color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 0.82; letter-spacing: -0.02em; text-transform: none; }
.mi-no1-no { font-size: 11cqh; }
.mi-no1-one { font-size: 62cqh; letter-spacing: -0.04em; color: var(--color-accent); }
.mi-no1.is-on .mi-roll-item:first-child .mi-no1-mark { animation: mi-slam 0.7s ease-out both; }
@keyframes mi-slam { 0% { transform: translateX(-100%); } 70% { transform: translateX(2%); } 100% { transform: none; } }
.mi-roll { position: relative; list-style: none; margin: 0; padding: 0; }
.mi-roll-item { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4cqh; padding: 0 5cqh 0 61cqh; visibility: hidden; }
.mi-roll-item.is-on { visibility: visible; }
.mi-proof-text { display: inline-block; }
.mi-roll-item.is-on :is(.mi-artist, .mi-title, .mi-proof-text, .mi-role) { animation: mi-roll-in 0.62s ease-out both; }
.mi-roll-item.is-on .mi-title { animation-delay: 0.04s; }
.mi-roll-item.is-on .mi-proof-text { animation-delay: 0.08s; }
.mi-roll-item.is-on .mi-role { animation-delay: 0.12s; }
@keyframes mi-roll-in { 0% { opacity: 0; transform: translateX(12cqh); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.mi-sleeve { width: 54cqh; height: 54cqh; object-fit: cover; }
.mi-roll-item.is-on .mi-sleeve { animation: mi-sleeve 0.62s ease-out both; }
@keyframes mi-sleeve { 0% { transform: scale(0.8) rotate(-4deg); } 60% { transform: scale(1.03) rotate(0.5deg); } 100% { transform: none; } }
.mi-roll-text { display: grid; gap: 1.6cqh; min-width: 0; }
.mi-artist { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; font-size: min(10cqh, 3.6cqw); line-height: 1.05; }
.mi-title { font-size: min(6.2cqh, 2.4cqw); line-height: 1.2; opacity: 0.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-proof { font-size: max(11px, 3.6cqh); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
.mi-role { font-size: max(11px, 3cqh); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Certifications: gold and platinum plaques, as on the tiles */
.mi-cert-list { list-style: none; margin: 0; padding: 0 4cqw; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2cqw; width: 100%; box-sizing: border-box; }
.mi-cert { container-type: inline-size; display: grid; align-content: start; gap: 1.4cqh; padding: 4cqh 1.6cqw; aspect-ratio: 3 / 4; background: var(--color-platinum); color: var(--color-text); border: 2px solid var(--color-platinum-edge); opacity: 0; }
.mi-cert--gold { background: var(--color-gold); border-color: var(--color-gold-edge); }
.mi-cert-level { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; font-size: 12.5cqi; line-height: 1.05; text-transform: uppercase; }
.mi-cert-body { font-size: max(11px, 3.4cqh); letter-spacing: 0.08em; }
.mi-cert-rec { margin-top: auto; font-weight: 600; font-size: max(11px, 3.6cqh); line-height: 1.25; }
.mi-certs.is-on .mi-cert { animation: mi-flip 0.7s calc(0.2s + var(--i) * 0.16s) ease-out both; }
@keyframes mi-flip { 0% { opacity: 0; transform: perspective(60cqh) rotateY(-80deg) translateY(4cqh); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* Artists, then labels and broadcasters in their own colours on paper */
.mi-clients { align-content: center; gap: 6cqh; }
.mi-names { list-style: none; margin: 0; padding: 0 5cqw; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6cqh 2.6cqw; max-width: 92cqw; }
.mi-names li { font-size: min(5.6cqh, 2.1cqw); opacity: 0; }
.mi-names li:nth-child(3n + 1) { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; }
.mi-clients.is-on .mi-names li { animation: mi-rise 0.45s calc(var(--i) * 0.05s) ease-out both; }
.mi-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, min(13cqw, 29cqh)); grid-auto-rows: min(5.2cqw, 11.6cqh); gap: 1cqw; }
.mi-logos li { background: var(--color-bg); display: grid; place-items: center; overflow: hidden; opacity: 0; }
.mi-logos img { width: 80%; height: 70%; object-fit: contain; display: block; }
.mi-clients.is-on .mi-logos li { animation: mi-rise 0.5s calc(0.9s + var(--i) * 0.06s) ease-out both; }

/* The end card: the MMMMM wordmark and the line. It is also the still frame. */
.mi-end { align-content: center; gap: 5cqh; }
.mi-wordmark { width: min(56cqw, 120cqh); height: auto; }
.mi-tag { font-family: var(--font-heading); font-weight: var(--font-heading-weight); letter-spacing: -0.02em; font-size: min(8cqh, 4.4cqw); }
.mi.is-live .mi-end.is-on .mi-wordmark { animation: mi-rise 0.7s ease-out both; }
.mi.is-live .mi-end.is-on .mi-tag { animation: mi-rise 0.9s 0.25s ease-out both; }
/* The company's full name under the line (Matt, 11 November 2026). */
.mi-name { margin-top: -2cqh; font-size: max(11px, 3.6cqh); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-bg); opacity: 0.8; }
.mi.is-live .mi-end.is-on .mi-name { animation: mi-rise 0.9s 0.5s ease-out both; }

/* Progress, Skip (pinned bottom middle while it plays) and Replay */
.mi-progress { position: absolute; left: 0; bottom: 0; height: max(2px, 0.6cqh); width: var(--p, 0%); background: var(--color-accent); }
.mi-skip:not([hidden]) {
  position: fixed; left: 50%; bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 45;
  padding: var(--space-2) var(--space-6); background: var(--color-text); color: var(--color-bg); border: 2px solid var(--color-bg);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.mi-skip:hover { background: var(--color-accent-700); }
.mi-replay:not([hidden]) {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2;
  padding: var(--space-1) var(--space-3); background: transparent; color: var(--color-bg); border: 2px solid var(--color-bg);
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.mi-replay:hover { background: var(--color-bg); color: var(--color-text); }
.mi-skip[hidden], .mi-replay[hidden] { display: none; }
.mi:not(.is-done).is-live { cursor: pointer; }
@container (max-width: 32.5rem) { .mi-role { display: none; } .mi-no1-mark { width: 48cqh; padding-left: 5cqh; } .mi-roll-item { padding-left: 52cqh; } }
@media (prefers-reduced-motion: reduce) { .mi-replay { display: none; } }