/* ==========================================================================
   AUDIOFREAKS MUSIC · styles.css · v1.0 · 22 October 2026
   One stylesheet. Part 1 is tokens only. Part 2 is components, which use
   tokens only: no hex, no font names, no pixel values below the token block.
   The only literal values allowed in Part 2 are 0, 100%, 50%, 1 (ratios),
   em-based tracking via tokens, and container-query breakpoints (CSS does
   not allow var() in @container conditions; see readme.md).
   Fonts load in the page <head> (Google Fonts), see readme.md.
   ========================================================================== */

/* ==========================================================================
   PART 1 · TOKENS
   ========================================================================== */

:root,
[data-theme="dark"] {
  /* -- Neutral ramp. Built in OKLCH, hue 25 (a breath of the logo red), chroma under 0.007.
        Values in comments are the OKLCH source; hex is what ships. */
  --color-neutral-50:  #FBFAF9; /* oklch(0.985 0.002 25) */
  --color-neutral-100: #F2EFEF; /* oklch(0.955 0.003 25) */
  --color-neutral-200: #E1DDDD; /* oklch(0.900 0.004 25) */
  --color-neutral-300: #C7C3C2; /* oklch(0.820 0.005 25) */
  --color-neutral-400: #A29D9C; /* oklch(0.700 0.006 25) */
  --color-neutral-500: #7E7978; /* oklch(0.580 0.006 25) */
  --color-neutral-600: #5B5756; /* oklch(0.460 0.006 25) */
  --color-neutral-700: #383434; /* oklch(0.330 0.006 25) */
  --color-neutral-800: #211D1D; /* oklch(0.235 0.006 25) */
  --color-neutral-850: #181414; /* oklch(0.195 0.006 25) */
  --color-neutral-900: #100E0D; /* oklch(0.165 0.005 25) */
  --color-neutral-950: #0A0807; /* oklch(0.135 0.004 25) */

  /* -- Red ramp. Anchored on the logo's own stops: 500 = #FF000C, 600 = #D60014,
        700 = #B10011 (the triangle on the white master), 800 = #78000B, 950 = #2F0002. */
  --color-red-50:  #FFF2EF; /* oklch(0.970 0.020 29) */
  --color-red-100: #FFE0DA; /* oklch(0.930 0.050 29) */
  --color-red-200: #FFBFB5; /* oklch(0.860 0.100 29) */
  --color-red-300: #FF8B7B; /* oklch(0.760 0.170 29) */
  --color-red-400: #FF5545; /* oklch(0.680 0.230 29) */
  --color-red-500: #FF000C; /* oklch(0.628 0.257 28.6) logo */
  --color-red-600: #D60014; /* oklch(0.551 0.225 27.4) logo */
  --color-red-700: #B10011; /* oklch(0.478 0.195 27.0) logo */
  --color-red-800: #78000B; /* oklch(0.361 0.147 26.1) logo */
  --color-red-900: #520402; /* oklch(0.280 0.110 29) */
  --color-red-950: #2F0002; /* oklch(0.192 0.078 25.5) logo */

  /* -- Fixed brand colours (same in both themes) */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-accent-on-dark:  var(--color-red-500); /* 5.00:1 on ground, 4.58:1 on raised */
  --color-accent-on-light: var(--color-red-700); /* 7.30:1 on white */
  --color-accent-fill:       var(--color-red-600); /* white text on it 5.43:1 */
  --color-accent-fill-hover: var(--color-red-700); /* white text on it 7.30:1 */
  --color-on-accent: var(--color-white);
  --color-gold: #C9A13B;      /* metallic ochre, never HitVocals yellow */
  --color-on-gold: #1A1414;   /* 7.49:1 */
  --color-platinum: #D9D6D6;
  --color-on-platinum: #1A1414; /* 12.6:1 */
  --color-on-brand: var(--color-white);           /* text on the eye gradient: min 5.43:1 */
  --color-on-brand-muted: var(--color-neutral-100); /* min 4.75:1 on the gradient */

  /* -- Semantic, dark (default) */
  --color-ground: var(--color-neutral-950);
  --color-surface: var(--color-neutral-900);
  --color-raised: var(--color-neutral-850);
  --color-text: var(--color-neutral-50);          /* 19.2 / 18.5 / 17.5 : 1 */
  --color-text-muted: var(--color-neutral-400);   /*  7.5 /  7.2 /  6.8 : 1 */
  --color-divider: var(--color-neutral-800);
  --color-divider-strong: var(--color-neutral-700);
  --color-accent: var(--color-accent-on-dark);    /* text-safe on all dark surfaces */
  --color-accent-hover: var(--color-red-400);
  --color-focus: var(--color-neutral-50);
  --color-focus-halo: var(--color-neutral-950);
  --color-scrim: rgb(10 8 7 / 0.92);
  --color-placeholder: var(--color-neutral-800);
  --show-on-dark: inline-block;
  --show-on-light: none;

  /* -- Gradient: the eye. Allowed ONLY on: the home hero, the showreel frame,
        the No. 1 record tile, the docked player's progress bar. Nowhere else. */
  --gradient-eye: linear-gradient(155deg,
      var(--color-red-600) 0%, var(--color-red-800) 38%,
      var(--color-red-950) 72%, var(--color-neutral-950) 100%);
  --gradient-eye-hero: radial-gradient(120% 90% at 50% 38%,
      var(--color-red-950) 0%, var(--color-neutral-950) 62%);
  --gradient-progress: linear-gradient(90deg, var(--color-red-800), var(--color-red-500));

  /* -- Type. Display echoes the wordmark (wide, geometric, light). */
  --font-cjk: "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Hiragino Sans", "Apple SD Gothic Neo", "PingFang SC", "Microsoft YaHei";
  --font-display: "Unbounded", var(--font-cjk), "Arial", sans-serif;
  --font-body: "Instrument Sans", var(--font-cjk), "Helvetica Neue", "Arial", sans-serif;
  --font-mono: "IBM Plex Mono", var(--font-cjk), ui-monospace, "Menlo", monospace;

  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Scale: 16px base, ~1.25 ratio low, wider steps for display. Size / line height. */
  --text-2xs: 0.6875rem;  --leading-2xs: 1.45;  /* 11px, mono labels only */
  --text-xs:  0.75rem;    --leading-xs: 1.45;   /* 12px, mono metadata */
  --text-sm:  0.875rem;   --leading-sm: 1.5;    /* 14px */
  --text-md:  1rem;       --leading-md: 1.6;    /* 16px body */
  --text-lg:  1.1875rem;  --leading-lg: 1.55;   /* 19px lead */
  --text-xl:  1.5rem;     --leading-xl: 1.3;    /* 24px h4 */
  --text-2xl: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); --leading-2xl: 1.2;  /* h3 */
  --text-3xl: clamp(2rem, 1.4rem + 2.2vw, 3rem);         --leading-3xl: 1.12; /* h2 */
  --text-4xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);     --leading-4xl: 1.04; /* h1 */
  --text-5xl: clamp(3.25rem, 2rem + 5vw, 6.5rem);        --leading-5xl: 0.95; /* chart position */

  --tracking-wordmark: 0.34em; /* matches the AUDIOFREAKS wordmark */
  --tracking-caps: 0.16em;     /* eyebrows, nav, badges */
  --tracking-display: -0.02em; /* Unbounded headlines in sentence case */
  --tracking-none: 0;

  /* -- Space (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --gutter: clamp(1rem, 3.5vw, 2.5rem);  /* 16px at 375 */
  --container: 77.5rem;                  /* 1240px */
  --measure: 38rem;                      /* comfortable reading line */

  /* -- Size */
  --size-touch: 2.75rem;      /* 44px minimum target */
  --size-icon: 1.25rem;
  --size-tri: 0.75rem;
  --size-play-w: 4.5rem;      /* the almond play button: 72 x 44 */
  --size-play-h: 2.75rem;
  --size-sleeve-sm: 3.5rem;
  --size-sleeve-md: 5rem;
  --size-mark-h: 1.25rem;     /* chart-body wordmark slot */
  --size-mark-w: 6.5rem;
  --size-plate-h: 7.5rem;
  --size-player-h: 4.75rem;
  --size-tile-min: 16.5rem;
  --size-card-min: 18rem;
  --size-col-min: 12rem;      /* footer, partner logos */
  --size-route-min: 15rem;    /* contact choices */
  --size-hero-eye: 30rem;
  --measure-statement: 18ch;
  --border-hair: 1px;
  --border-strong: 2px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-halo-width: 5px;

  /* -- Shape. One decision: square. Everywhere. The single exception is the
        almond, taken from the logo: the eye (horizontal) for Play, the pupil
        (vertical) for portrait crops. */
  --radius-0: 0;
  --shape-almond: polygon(0% 50%, 7.1% 35%, 14.3% 24.4%, 21.4% 15.7%, 28.6% 8.9%, 35.7% 4%, 42.9% 1%, 50% 0%, 57.1% 1%, 64.3% 4%, 71.4% 8.9%, 78.6% 15.7%, 85.7% 24.4%, 92.9% 35%, 100% 50%, 92.9% 65%, 85.7% 75.6%, 78.6% 84.3%, 71.4% 91.1%, 64.3% 96%, 57.1% 99%, 50% 100%, 42.9% 99%, 35.7% 96%, 28.6% 91.1%, 21.4% 84.3%, 14.3% 75.6%, 7.1% 65%);
  --shape-pupil: polygon(50% 0%, 35% 7.1%, 24.4% 14.3%, 15.7% 21.4%, 8.9% 28.6%, 4% 35.7%, 1% 42.9%, 0% 50%, 1% 57.1%, 4% 64.3%, 8.9% 71.4%, 15.7% 78.6%, 24.4% 85.7%, 35% 92.9%, 50% 100%, 65% 92.9%, 75.6% 85.7%, 84.3% 78.6%, 91.1% 71.4%, 96% 64.3%, 99% 57.1%, 100% 50%, 99% 42.9%, 96% 35.7%, 91.1% 28.6%, 84.3% 21.4%, 75.6% 14.3%, 65% 7.1%);
  --shape-triangle: polygon(50% 0%, 100% 100%, 0% 100%);

  /* -- Shadow. Dark theme uses almost none: depth comes from surface steps. */
  --shadow-none: none;
  --shadow-player: 0 -1px 0 var(--color-divider), 0 -16px 40px rgb(0 0 0 / 0.55);
  --shadow-lift: 0 12px 32px rgb(0 0 0 / 0.45);

  /* -- Motion */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 480ms;
  --motion-peak: 1400ms;   /* the one engineered moment per page */
  --motion-pulse: 2400ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-eye: cubic-bezier(0.8, 0, 0.15, 1);
  --pulse-spread: 0.6rem;

  /* -- Photography */
  --photo-mono: grayscale(1) contrast(1.08) brightness(0.92);
  --photo-duotone-tint: var(--color-red-600);
}

/* -- Light theme. Explicit attribute, or the visitor's OS preference
      when no attribute says otherwise. Keep the two blocks identical. */
[data-theme="light"] {
  --color-ground: var(--color-white);
  --color-surface: var(--color-neutral-50);
  --color-raised: var(--color-neutral-100);
  --color-text: var(--color-neutral-950);        /* 20.0 / 19.2 / 17.5 : 1 */
  --color-text-muted: var(--color-neutral-600);  /*  7.1 /  6.9 /  6.2 : 1 */
  --color-divider: var(--color-neutral-200);
  --color-divider-strong: var(--color-neutral-300);
  --color-accent: var(--color-accent-on-light);  /* 7.3 / 7.0 / 6.4 : 1 */
  --color-accent-hover: var(--color-red-800);
  --color-focus: var(--color-neutral-950);
  --color-focus-halo: var(--color-white);
  --color-scrim: rgb(10 8 7 / 0.88);
  --color-placeholder: var(--color-neutral-200);
  --show-on-dark: none;
  --show-on-light: inline-block;
  --shadow-player: 0 -1px 0 var(--color-divider), 0 -12px 32px rgb(10 8 7 / 0.10);
  --shadow-lift: 0 12px 32px rgb(10 8 7 / 0.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-ground: var(--color-white);
    --color-surface: var(--color-neutral-50);
    --color-raised: var(--color-neutral-100);
    --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-accent-hover: var(--color-red-800);
    --color-focus: var(--color-neutral-950);
    --color-focus-halo: var(--color-white);
    --color-scrim: rgb(10 8 7 / 0.88);
    --color-placeholder: var(--color-neutral-200);
    --show-on-dark: none;
    --show-on-light: inline-block;
    --shadow-player: 0 -1px 0 var(--color-divider), 0 -12px 32px rgb(10 8 7 / 0.10);
    --shadow-lift: 0 12px 32px rgb(10 8 7 / 0.12);
  }
}

/* -- Phone (Matt, 30 October 2026): the mono proof labels (chart names,
      dates, certifications, counts) read at 12px, not 11px. */
@media (max-width: 40rem) {
  :root, [data-theme] { --text-2xs: var(--text-xs); }
}

/* -- CJK: put the right Han forms first for the language in use */
:lang(ko) { --font-cjk: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans JP", "Noto Sans SC"; }
:lang(ja) { --font-cjk: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Noto Sans KR", "Noto Sans SC"; }
:lang(zh) { --font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans JP", "Noto Sans KR"; }

/* ==========================================================================
   PART 2 · COMPONENTS (tokens only)
   ========================================================================== */

/* -- Base ---------------------------------------------------------------- */
[data-theme], :root {
  color: var(--color-text);
  background: var(--color-ground);
}
.af-root {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-text);
  background: var(--color-ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.af-root *, .af-root *::before, .af-root *::after { box-sizing: border-box; }
.af-root img { max-width: 100%; display: block; }
.af-root a { color: inherit; text-decoration-thickness: var(--border-hair); text-underline-offset: 0.2em; }
.af-root a:hover { color: var(--color-accent); }
.af-root :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 .af-show-on-dark { display: var(--show-on-dark); }
.af-root .af-show-on-light { display: var(--show-on-light); }
.af-visually-hidden { position: absolute; width: var(--border-hair); height: var(--border-hair); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -- Layout -------------------------------------------------------------- */
.af-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.af-section { padding-block: var(--space-9); border-top: var(--border-hair) solid var(--color-divider); }
.af-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.af-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.af-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.af-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(var(--size-tile-min), 100%), 1fr)); }
.af-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(var(--size-card-min), 100%), 1fr)); }
.af-surface { background: var(--color-surface); }

/* -- Type ---------------------------------------------------------------- */
.af-display, .af-h1, .af-h2, .af-h3, .af-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}
.af-h1 { font-size: var(--text-4xl); line-height: var(--leading-4xl); }
.af-h2 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
.af-h3 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.af-h4 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-regular); }
.af-lead { font-size: var(--text-lg); line-height: var(--leading-lg); max-width: var(--measure); margin: 0; text-wrap: pretty; }
.af-body { font-size: var(--text-md); line-height: var(--leading-md); max-width: var(--measure); margin: 0; text-wrap: pretty; }
.af-small { font-size: var(--text-sm); line-height: var(--leading-sm); }
.af-muted { color: var(--color-text-muted); }
.af-accent { color: var(--color-accent); }
.af-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  display: flex; align-items: center; gap: var(--space-2);
}
.af-wordmark-type { /* typeset echo of the wordmark: caps, thin, very wide */
  font-family: var(--font-display);
  font-weight: var(--weight-thin);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}
.af-meta, .af-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: var(--tracking-none);
}
.af-num { font-size: inherit; }
:lang(ko) .af-eyebrow, :lang(ja) .af-eyebrow, :lang(zh) .af-eyebrow,
:lang(ko) .af-wordmark-type, :lang(ja) .af-wordmark-type, :lang(zh) .af-wordmark-type { letter-spacing: var(--tracking-none); }
.af-todo { /* unconfirmed sample data. Must never ship. */
  color: var(--color-text-muted);
  text-decoration: underline dashed var(--color-text-muted);
  text-underline-offset: 0.25em;
}

/* -- The triangle device ------------------------------------------------- */
.af-tri {
  display: inline-block;
  width: var(--size-tri); height: var(--size-tri);
  background: currentColor;
  clip-path: var(--shape-triangle);
  flex: none;
}
.af-tri--outline { /* outline triangle like the wordmark A */
  background: none;
  border: none;
  position: relative;
}
.af-tri--outline::before, .af-tri--outline::after { content: ""; position: absolute; inset: 0; clip-path: var(--shape-triangle); }
.af-tri--outline::before { background: currentColor; }
.af-tri--outline::after { inset: 22% 18% 9% 18%; background: var(--color-ground); }
.af-tri--accent { color: var(--color-accent); }
.af-list-tri { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.af-list-tri > li { display: grid; grid-template-columns: var(--size-tri) 1fr; gap: var(--space-3); align-items: baseline; }
.af-list-tri > li::before { content: ""; width: var(--size-tri); height: calc(var(--size-tri) * 0.86); background: var(--color-accent); clip-path: var(--shape-triangle); transform: translateY(-0.05em); }
.af-loader { display: inline-flex; gap: var(--space-1); color: var(--color-accent); }
.af-loader .af-tri { animation: af-tri-step var(--motion-slow) var(--ease-in-out) infinite alternate; }
.af-loader .af-tri:nth-child(2) { animation-delay: calc(var(--motion-slow) / 3); }
.af-loader .af-tri:nth-child(3) { animation-delay: calc(var(--motion-slow) / 1.5); }
@keyframes af-tri-step { from { opacity: 0.25; } to { opacity: 1; } }

/* -- Buttons & CTA ------------------------------------------------------- */
.af-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-touch);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-hair) solid transparent;
  border-radius: var(--radius-0);
  cursor: pointer;
  position: relative;
  transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.af-btn--primary { background: var(--color-accent-fill); color: var(--color-on-accent); }
.af-root .af-btn--primary:hover { background: var(--color-accent-fill-hover); color: var(--color-on-accent); }
.af-btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-divider-strong); }
.af-root .af-btn--secondary:hover { border-color: var(--color-text); color: var(--color-text); }
.af-btn--ghost { background: transparent; color: var(--color-text); padding-inline: var(--space-2); text-decoration: underline; text-decoration-thickness: var(--border-hair); text-underline-offset: 0.35em; }
.af-btn .af-tri { transform: rotate(90deg); width: var(--space-2); height: var(--space-2); }
.af-btn--pulse::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 0 0 var(--color-accent-fill);
  animation: af-pulse var(--motion-pulse) var(--ease-out) infinite;
}
@keyframes af-pulse {
  0% { box-shadow: 0 0 0 0 var(--color-accent-fill); opacity: 0.7; }
  70%, 100% { box-shadow: 0 0 0 var(--pulse-spread) var(--color-accent-fill); opacity: 0; }
}
.af-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.af-cta-band { padding-block: var(--space-8); display: grid; gap: var(--space-5); }

/* -- Play button (almond = the logo's eye) ------------------------------- */
.af-play {
  width: var(--size-play-w); height: var(--size-play-h);
  display: inline-grid; place-items: center;
  background: var(--color-accent-fill); color: var(--color-on-accent);
  border: 0; padding: 0; cursor: pointer;
  clip-path: var(--shape-almond);
  transition: background-color var(--motion-fast) var(--ease-out), transform var(--motion-base) var(--ease-out);
  flex: none;
}
.af-play:hover { background: var(--color-accent-fill-hover); }
.af-play__icon { width: var(--size-tri); height: var(--size-tri); background: currentColor; clip-path: var(--shape-triangle); transform: rotate(90deg) translateY(-8%); }
.af-play[data-state="playing"] .af-play__icon,
.af-play[data-state="paused"] .af-play__icon { transform: none; }
.af-play[data-state="playing"] .af-play__icon { clip-path: polygon(0% 0%, 36% 0%, 36% 100%, 0% 100%, 0% 0%, 64% 0%, 100% 0%, 100% 100%, 64% 100%, 64% 0%); }
.af-play[data-state="paused"] .af-play__icon { clip-path: var(--shape-triangle); transform: rotate(90deg) translateY(-8%); }
.af-play[data-state="loading"] { animation: af-blink var(--motion-slow) var(--ease-in-out) infinite alternate; }
.af-play[data-state="loading"] .af-play__icon { opacity: 0.4; }
.af-play--quiet { background: var(--color-raised); color: var(--color-text); }
.af-play--quiet:hover { background: var(--color-accent-fill); color: var(--color-on-accent); }
:focus-visible.af-play { outline: none; box-shadow: none; filter: drop-shadow(0 0 0 var(--color-focus)); background: var(--color-focus); color: var(--color-focus-halo); }
@keyframes af-blink { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }

/* -- Sleeves & placeholders --------------------------------------------- */
.af-sleeve { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--color-placeholder); display: block; }
.af-sleeve--ph { /* development placeholder: shows where a real, full-colour sleeve goes */
  display: grid; place-items: end start; padding: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-2xs);
  color: var(--color-on-brand-muted);
}

/* -- Role badges: seven filter roles + three supporting roles, readable with
      no colour at all. Shape and line carry the type; the label always shows. */
.af-roles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.af-role {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--space-6);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border: var(--border-hair) solid transparent;
  white-space: nowrap;
}
/* Filter roles */
.af-role--production    { background: var(--color-text); color: var(--color-ground); }               /* filled */
.af-role--remix         { border-color: var(--color-text); }                                           /* outlined */
.af-role--remix-consult { border: var(--border-hair) dashed var(--color-text); }                       /* dashed */
.af-role--consult       { border: var(--border-strong) dotted var(--color-text); }                     /* dotted */
.af-role--published     { padding-inline: 0; text-decoration: underline; text-decoration-thickness: var(--border-strong); text-underline-offset: 0.3em; } /* underlined */
.af-role--management    { border-color: var(--color-text); }                                           /* outlined + outline triangle */
.af-role--management::before { content: ""; width: var(--space-2); height: var(--space-2); background: currentColor; clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%, 22% 82%, 78% 82%, 50% 24%, 22% 82%, 0% 100%); }
.af-role--tv            { padding-inline: 0; }                                                         /* solid triangle, no frame */
.af-role--tv::before    { content: ""; width: var(--space-2); height: var(--space-2); background: var(--color-accent); clip-path: var(--shape-triangle); }
/* Supporting roles: not filters. Double rule or plain label. */
.af-role--director      { border: calc(var(--border-hair) * 3) double var(--color-text); }             /* double line */
.af-role--plain         { padding-inline: 0; color: var(--color-text-muted); }                         /* label only: A&R, DJ & live */
.af-role--todo          { border: var(--border-hair) dashed var(--color-text-muted); color: var(--color-text-muted); }
/* A credit = role badge + who. "Production · Audiofreaks Music" or "Production · Scott Stoddart" */
.af-credits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.af-credit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); }
.af-credit__who { color: var(--color-text); }
.af-credit__who--company { color: var(--color-text-muted); }
.af-tile--no1 .af-credit__who, .af-tile--no1 .af-credit__who--company { color: var(--color-on-brand); }

/* -- Original record block: the chart belongs to the original, not our remix */
.af-original {
  display: grid; gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-hair) dashed var(--color-divider-strong);
  background: var(--color-ground);
}
.af-original__label { display: flex; align-items: center; gap: var(--space-2); }
.af-original__label::before { content: ""; width: var(--space-2); height: var(--space-2); border: var(--border-hair) solid currentColor; }
.af-original__chart { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.af-original__note { margin: 0; color: var(--color-text-muted); }

/* -- Brand family credit line ---------------------------------------------- */
.af-family { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.af-family__name { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-md); letter-spacing: var(--tracking-display); }
.af-family__rule { width: var(--border-hair); align-self: stretch; min-height: var(--space-5); background: var(--color-divider-strong); }
.af-family__parent { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.af-family__parent img { height: var(--space-2); width: auto; }

/* -- Certification blocks ------------------------------------------------ */
.af-cert {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: var(--size-touch); padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-2xs);
  text-transform: uppercase; letter-spacing: var(--tracking-none);
}
.af-cert strong { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); }
.af-cert--gold { background: var(--color-gold); color: var(--color-on-gold); }
.af-cert--platinum { background: var(--color-platinum); color: var(--color-on-platinum); }

/* -- Chart-body marks: single-colour masks that take the text colour ---- */
.af-chartmark {
  display: inline-block; width: var(--size-mark-w); height: var(--size-mark-h);
  background: currentColor;
  -webkit-mask: var(--mark) left center / contain no-repeat;
          mask: var(--mark) left center / contain no-repeat;
}
.af-chartmark--slot { /* until the official mark is supplied */
  background: none; -webkit-mask: none; mask: none;
  display: inline-flex; align-items: center; padding-inline: var(--space-2);
  border: var(--border-hair) dashed currentColor;
  font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase;
}

/* -- Record tile ---------------------------------------------------------- */
.af-tile {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  container-type: inline-size;
  min-width: 0;
}
.af-tile__media { position: relative; }
.af-tile__play { position: absolute; right: var(--space-3); bottom: calc(var(--size-play-h) / -2); }
.af-tile__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-4) var(--space-4); flex: 1; }
.af-tile__id { display: grid; gap: var(--space-1); padding-right: var(--size-play-w); }
.af-tile__artist { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-text-muted); margin: 0; }
.af-tile__title { 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); margin: 0; }
.af-tile__label { color: var(--color-text-muted); margin: 0; }
.af-pos { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-block: var(--border-hair) solid var(--color-divider); }
.af-pos__line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.af-pos__num { font-family: var(--font-display); font-weight: var(--weight-thin); font-size: var(--text-4xl); line-height: var(--leading-5xl); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; margin: 0; }
.af-pos__num small { font-size: 0.4em; font-weight: var(--weight-light); letter-spacing: var(--tracking-none); margin-right: 0.15em; vertical-align: 0.9em; }
.af-pos__chart { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.af-pos__chart .af-meta { display: block; color: var(--color-text-muted); }
.af-stat { display: grid; gap: var(--space-1); margin: 0; }
.af-stat__value { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-xl); line-height: var(--leading-xl); font-variant-numeric: tabular-nums; }
.af-stat__label { color: var(--color-text-muted); }
.af-tile__certs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.af-tile__source { margin-top: auto; padding-top: var(--space-3); border-top: var(--border-hair) solid var(--color-divider); color: var(--color-text-muted); }
.af-tile__source a { color: var(--color-text); }
/* No. 1: the gradient brand moment. White text only, no accent red on it. */
.af-tile--no1 { background: var(--gradient-eye); color: var(--color-on-brand); }
.af-tile--no1 .af-tile__artist, .af-tile--no1 .af-tile__label, .af-tile--no1 .af-pos__chart .af-meta,
.af-tile--no1 .af-stat__label, .af-tile--no1 .af-tile__source { color: var(--color-on-brand-muted); }
.af-tile--no1 .af-pos, .af-tile--no1 .af-tile__source { border-color: var(--color-on-brand-muted); }
.af-tile--no1 .af-role { color: var(--color-on-brand); border-color: var(--color-on-brand); }
.af-tile--no1 .af-role--production { background: var(--color-on-brand); color: var(--color-red-800); }
.af-tile--compact .af-tile__body { gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-3); }
.af-tile--compact .af-pos__num { font-size: var(--text-3xl); }
.af-tile--compact .af-stat__value { font-size: var(--text-md); }
.af-tile--no1 .af-play { background: var(--color-on-brand); color: var(--color-red-700); }
.af-tile--no1 .af-tile__source a { color: var(--color-on-brand); }
.af-tile--no1 .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; }

/* -- Filters --------------------------------------------------------------- */
.af-filters { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: end; }
.af-filter-group { display: grid; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-width: 0; }
.af-filter-group legend { padding: 0; margin-bottom: var(--space-2); }
.af-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-touch); padding: var(--space-2) var(--space-4);
  background: transparent; color: var(--color-text);
  border: var(--border-hair) solid var(--color-divider-strong);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.af-chip:hover { border-color: var(--color-text); }
.af-chip[aria-pressed="true"] { background: var(--color-text); color: var(--color-ground); border-color: var(--color-text); }
.af-chip[aria-pressed="true"]::before { content: ""; width: var(--space-2); height: var(--space-2); background: currentColor; clip-path: var(--shape-triangle); }
.af-chip__count { font-family: var(--font-mono); font-size: var(--text-2xs); opacity: 0.8; }
.af-empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-7) var(--space-5); border: var(--border-hair) dashed var(--color-divider-strong); }

/* -- Docked mini-player ---------------------------------------------------- */
.af-player {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  min-height: var(--size-player-h); padding: var(--space-3) var(--gutter);
  background: var(--color-raised); color: var(--color-text);
  box-shadow: var(--shadow-player);
  position: relative;
  container-type: inline-size;
}
.af-player--docked { position: sticky; bottom: 0; z-index: 10; }
.af-player__progress { position: absolute; left: 0; top: 0; height: var(--border-strong); width: var(--progress, 0%); background: var(--gradient-progress); transition: width var(--motion-base) linear; }
.af-player__now { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.af-player__sleeve { width: var(--size-sleeve-sm); height: var(--size-sleeve-sm); flex: none; object-fit: cover; background: var(--color-placeholder); }
.af-player__text { min-width: 0; display: grid; }
.af-player__title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.af-player__artist { color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.af-player__state { color: var(--color-text-muted); }
.af-player__embed { /* the Spotify / YouTube iframe sits here, untouched */
  min-height: var(--size-sleeve-md); width: 100%; background: var(--color-surface);
  border: var(--border-hair) solid var(--color-divider);
  display: grid; place-items: center; color: var(--color-text-muted);
}
.af-player__controls { display: flex; align-items: center; gap: var(--space-2); }
.af-iconbtn {
  width: var(--size-touch); height: var(--size-touch); display: inline-grid; place-items: center;
  background: transparent; color: var(--color-text); border: var(--border-hair) solid transparent; cursor: pointer; padding: 0;
}
.af-iconbtn:hover { border-color: var(--color-divider-strong); }
.af-iconbtn svg { width: var(--size-icon); height: var(--size-icon); }
@container (max-width: 34rem) {
  .af-player { grid-template-columns: minmax(0, 1fr) auto; }
  .af-player__embed { grid-column: 1 / -1; order: 3; }
}

/* -- Discography row ------------------------------------------------------ */
.af-rows { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair) solid var(--color-divider); }
.af-row {
  display: grid; grid-template-columns: var(--size-sleeve-sm) minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
  padding-block: var(--space-4); border-bottom: var(--border-hair) solid var(--color-divider);
}
.af-row__sleeve { width: var(--size-sleeve-sm); height: var(--size-sleeve-sm); object-fit: cover; background: var(--color-placeholder); }
.af-row__main { display: grid; gap: var(--space-2); min-width: 0; }
.af-row__title { margin: 0; font-size: var(--text-md); line-height: var(--leading-sm); }
.af-row__title b { font-weight: var(--weight-semibold); }
.af-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--color-text-muted); }

/* -- TV & network plates -------------------------------------------------- */
.af-plates { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(var(--size-tile-min), 100%), 1fr)); }
.af-plate { display: grid; grid-template-rows: var(--size-plate-h) auto; background: var(--color-white); color: var(--color-neutral-950); }
.af-plate__logo { display: grid; place-items: center; padding: var(--space-5); }
.af-plate__logo img { max-height: 100%; max-width: 70%; object-fit: contain; }
.af-plate__caption { padding: var(--space-3) var(--space-4); border-top: var(--border-hair) solid var(--color-neutral-200); display: grid; gap: var(--space-1); }
.af-plate__caption .af-meta { color: var(--color-neutral-600); }
.af-plate--dark { background: var(--color-raised); color: var(--color-text); }
.af-plate--dark .af-plate__caption { border-color: var(--color-divider); }
.af-plate--dark .af-plate__caption .af-meta { color: var(--color-text-muted); }
.af-logo-slot { /* until the broadcaster's official logo file is supplied */
  width: 70%; height: 100%; display: grid; place-items: center; border: var(--border-hair) dashed currentColor;
  font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; text-align: center; padding: var(--space-2);
}
.af-partners { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(var(--size-col-min), 100%), 1fr)); }
.af-partners .af-plate__logo { min-height: var(--size-plate-h); }

/* -- Team card ------------------------------------------------------------ */
.af-team-card { display: grid; gap: var(--space-4); align-content: start; }
.af-team-card__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: var(--photo-mono); background: var(--color-placeholder); }
.af-team-card__photo--pupil { clip-path: var(--shape-pupil); aspect-ratio: 3 / 5; }
.af-name { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-lg); line-height: var(--leading-xl); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; }
.af-name__given { color: var(--color-accent); }
.af-team-card__role { margin: 0; color: var(--color-text-muted); }
.af-team-card__credits { border-top: var(--border-hair) solid var(--color-divider); padding-top: var(--space-3); }
.af-team-card__credits li { font-size: var(--text-sm); line-height: var(--leading-sm); }

/* -- News card ------------------------------------------------------------ */
.af-news-card { display: grid; grid-template-columns: var(--size-sleeve-md) minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-top: var(--border-hair) solid var(--color-divider); text-decoration: none; color: inherit; }
.af-news-card__sleeve { width: var(--size-sleeve-md); height: var(--size-sleeve-md); object-fit: cover; background: var(--color-placeholder); }
.af-news-card__body { display: grid; gap: var(--space-2); align-content: start; }
.af-news-card__date { color: var(--color-text-muted); }
.af-news-card__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-md); line-height: var(--leading-sm); margin: 0; }
.af-news-card__more { color: var(--color-accent); font-size: var(--text-sm); display: inline-flex; gap: var(--space-2); align-items: center; }
.af-root a.af-news-card:hover .af-news-card__title { color: var(--color-accent); }

/* -- Evidence card -------------------------------------------------------- */
.af-evidence { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: var(--border-hair) solid var(--color-divider); }
.af-evidence__shot { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; object-position: top; background: var(--color-placeholder); border: var(--border-hair) solid var(--color-divider); }
.af-evidence__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.af-grade { display: inline-grid; place-items: center; width: var(--space-6); height: var(--space-6); font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-sm); border: var(--border-hair) solid var(--color-text); }
.af-grade--a { background: var(--color-text); color: var(--color-ground); }
.af-grade--c { border-style: dashed; }

/* -- Contact routing ------------------------------------------------------ */
.af-route { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(var(--size-route-min), 100%), 1fr)); }
.af-route legend { margin-bottom: var(--space-4); padding: 0; }
.af-route__option { position: relative; display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-4); min-height: var(--size-touch); border: var(--border-hair) solid var(--color-divider-strong); cursor: pointer; background: var(--color-surface); }
.af-route__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.af-route__option:hover { border-color: var(--color-text); }
.af-route__option:has(input:checked) { border-color: var(--color-accent); box-shadow: inset 0 0 0 var(--border-hair) var(--color-accent); }
.af-route__option:has(input:checked) .af-route__mark { color: var(--color-accent); }
.af-route__option:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.af-route__title { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-md); display: flex; gap: var(--space-2); align-items: center; }
.af-route__mark { color: var(--color-text-muted); }
.af-field { display: grid; gap: var(--space-2); }
.af-field label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.af-input { min-height: var(--size-touch); padding: var(--space-3); background: var(--color-surface); color: var(--color-text); border: var(--border-hair) solid var(--color-divider-strong); border-radius: var(--radius-0); font: inherit; }
.af-input:hover { border-color: var(--color-text-muted); }

/* -- Header & navigation -------------------------------------------------- */
.af-header { container-type: inline-size; border-bottom: var(--border-hair) solid var(--color-divider); background: var(--color-ground); }
.af-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: calc(var(--size-touch) + var(--space-5)); }
.af-header__logo { display: inline-flex; align-items: center; min-height: var(--size-touch); }
.af-header__logo img { height: var(--space-3); width: auto; }
.af-nav { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.af-nav__link {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch); padding-inline: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-2xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none; color: var(--color-text-muted);
}
.af-root .af-nav__link:hover { color: var(--color-text); }
.af-nav__link[aria-current="page"] { color: var(--color-text); }
.af-nav__link[aria-current="page"]::before { content: ""; width: var(--space-2); height: var(--space-2); background: var(--color-accent); clip-path: var(--shape-triangle); }
.af-nav-toggle { display: none; }
.af-header__actions { display: flex; align-items: center; gap: var(--space-2); }
@container (max-width: 60rem) {
  .af-nav, .af-header__cta { display: none; }
  .af-nav-toggle { display: inline-grid; }
}
.af-menu { display: grid; gap: 0; padding-block: var(--space-4) var(--space-6); }
.af-menu .af-nav__link { font-size: var(--text-sm); border-bottom: var(--border-hair) solid var(--color-divider); padding-inline: 0; min-height: calc(var(--size-touch) + var(--space-2)); }

/* -- Footer & back to top ------------------------------------------------- */
.af-footer { border-top: var(--border-hair) solid var(--color-divider); padding-block: var(--space-8) var(--space-6); background: var(--color-ground); }
.af-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(var(--size-col-min), 100%), 1fr)); }
.af-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.af-footer__links a { display: inline-flex; align-items: center; min-height: var(--size-touch); text-decoration: none; color: var(--color-text-muted); font-size: var(--text-sm); }
.af-footer__base { margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--color-divider); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); color: var(--color-text-muted); }
.af-back-to-top {
  width: var(--size-touch); height: var(--size-touch); display: inline-grid; place-items: center;
  background: var(--color-raised); color: var(--color-text); border: var(--border-hair) solid var(--color-divider-strong); cursor: pointer;
}
.af-back-to-top .af-tri { width: var(--space-3); height: var(--space-3); }
.af-back-to-top:hover { border-color: var(--color-text); }

/* -- Lightbox --------------------------------------------------------------- */
.af-lightbox { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-4) var(--gutter); background: var(--color-scrim); color: var(--color-neutral-50); }
.af-lightbox__top { display: flex; justify-content: space-between; align-items: center; }
.af-lightbox__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.af-lightbox__figure { margin: 0; display: grid; gap: var(--space-3); justify-items: center; }
.af-lightbox__img { max-height: 100%; width: 100%; object-fit: contain; background: var(--color-neutral-800); aspect-ratio: 1; }
.af-lightbox__caption { font-size: var(--text-sm); color: var(--color-neutral-200); text-align: center; max-width: var(--measure); }
.af-lightbox .af-iconbtn { color: var(--color-neutral-50); border-color: var(--color-neutral-700); }

/* -- Photography ----------------------------------------------------------- */
.af-photo { width: 100%; object-fit: cover; display: block; background: var(--color-placeholder); }
.af-photo--mono { filter: var(--photo-mono); }
.af-duotone { position: relative; isolation: isolate; background: var(--color-neutral-950); }
.af-duotone > img { filter: var(--photo-mono); mix-blend-mode: screen; opacity: 0.9; }
.af-duotone::after { content: ""; position: absolute; inset: 0; background: var(--photo-duotone-tint); mix-blend-mode: multiply; pointer-events: none; }
/* Record sleeves: never filtered. .af-sleeve ignores every photo class by design. */
.af-sleeve, .af-row__sleeve, .af-player__sleeve, .af-news-card__sleeve { filter: none; mix-blend-mode: normal; }

/* -- Faces and places (gallery) ------------------------------------------- */
.af-gallery-wrap { container-type: inline-size; }
.af-gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(var(--size-col-min), 100%), 1fr)); }
.af-gallery__item { margin: 0; display: grid; gap: var(--space-2); }
.af-gallery__item--wide { grid-column: span 2; }
.af-gallery__photo { width: 100%; aspect-ratio: 1; object-fit: cover; filter: var(--photo-mono); background: var(--color-placeholder); }
.af-gallery__item--wide .af-gallery__photo { aspect-ratio: 2 / 1; }
.af-gallery__caption { display: grid; gap: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.af-gallery__caption .af-meta { color: var(--color-text-muted); }
.af-gallery__tag { display: inline-flex; align-items: center; gap: var(--space-1); }
@container (max-width: 26rem) { .af-gallery__item--wide { grid-column: auto; } .af-gallery__item--wide .af-gallery__photo { aspect-ratio: 1; } }

/* -- Showreel intro (optional, engineered) --------------------------------- */
.af-showreel { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--gradient-eye-hero); display: grid; place-items: center; overflow: hidden; color: var(--color-on-brand); }
.af-showreel__eye { width: min(var(--size-hero-eye), 46%); }
.af-showreel__bar { position: absolute; inset: auto 0 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--gutter); }
.af-showreel__progress { position: absolute; left: 0; bottom: 0; height: var(--border-strong); width: var(--progress, 0%); background: var(--gradient-progress); }
.af-showreel .af-btn--secondary { color: var(--color-on-brand); border-color: var(--color-on-brand-muted); }
.af-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch); font-size: var(--text-sm); cursor: pointer; }
.af-toggle input { width: var(--space-5); height: var(--space-5); accent-color: var(--color-accent-fill); margin: 0; }
.af-pupil-track { transition: transform var(--motion-slow) var(--ease-out); }

/* -- Hero & the eye-opening moment ---------------------------------------- */
.af-hero { background: var(--gradient-eye-hero); padding-block: var(--space-9) var(--space-8); text-align: center; display: grid; justify-items: center; gap: var(--space-6); overflow: hidden; }
.af-hero__eye { width: min(var(--size-hero-eye), 72%); }
.af-eye-open { transform-origin: 50% 50%; animation: af-eye-open var(--motion-peak) var(--ease-eye) both; }
@keyframes af-eye-open {
  0% { transform: scaleY(0.04); opacity: 0; }
  18% { transform: scaleY(0.04); opacity: 1; }
  62% { transform: scaleY(1.04); }
  100% { transform: scaleY(1); opacity: 1; }
}
.af-hero__statement { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-3xl); line-height: var(--leading-3xl); letter-spacing: var(--tracking-display); margin: 0; max-width: var(--measure-statement); text-wrap: balance; }

/* -- Reduced motion: every animation has a still state ------------------- */
@media (prefers-reduced-motion: reduce) {
  .af-root *, .af-root *::before, .af-root *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .af-btn--pulse::after { display: none; }
  .af-eye-open { animation: none; transform: none; opacity: 1; }
  .af-play[data-state="loading"] { animation: none; }
}