/* PLF Records — shared appearance, initial direction v3.
   Change the roles here to update every chapter together.
   Typeface names are local fallbacks, not downloaded fonts. */
:root {
  /* Character: the existing black, warm cream, brass and restrained red. */
  --ink: #0d0d0e;
  --charcoal: #151516;
  --cream: #e9e7e0;
  --muted: #a29f98;
  --brass: #bc9b69;
  --red: #ab382e;

  --color-bg: var(--ink);
  --color-surface: var(--charcoal);
  --color-surface-raised: #191919;
  --color-text: var(--cream);
  --color-text-muted: var(--muted);
  --color-text-warm: #d3c3a7;
  --color-accent: var(--red);
  --color-warm: var(--brass);
  --color-border: color-mix(in srgb, var(--cream) 16%, transparent);
  --color-border-strong: color-mix(in srgb, var(--cream) 30%, transparent);
  --color-border-warm: color-mix(in srgb, var(--brass) 45%, transparent);
  --line: var(--color-border);

  /* Latin and Japanese can be changed independently. Leave the final generic
     sans-serif in the combined role so Japanese glyph fallback stays available. */
  --font-latin: Arial, Helvetica;
  --font-japanese: 'Yu Gothic', Meiryo;
  --font-body: var(--font-latin), var(--font-japanese), sans-serif;
  --font-heading: var(--font-body);
  --font-label: var(--font-body);
  --font-logo: 'Arial Black', Arial, Helvetica, sans-serif;
  --sans: var(--font-body);
  --display: var(--font-logo);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 700;
  --weight-heavy: 900;
  --tracking-body: .02em;
  --tracking-label: .13em;
  --tracking-title: -.045em;
  --tracking-logo: -.075em;
  --leading-body: 1.9;
  --leading-title: 1.04;
  --leading-label: 1.5;
  --size-body: clamp(14px, .95vw, 16px);
  --size-label: 11px;
  --size-micro: 10px;
  --size-control: 12px;
}

/* Cinema treatments preserve the approved colour grade. Scene roles follow the
   six core colours above; cool light is an additional art-direction control.
   Literal defaults preserve the same grade in older browsers. */
:root {
  --color-cool: #586375;
  --color-shadow-portrait: #0005;
  --color-shadow-record: #0009;
  --color-record-sheen-white: #fff1;
  --color-studio-wall: #1d1b18;
  --color-studio-wall-mobile: #201d18;
  --color-studio-glow: #8a633342;
  --color-studio-glow-mobile: #8a63334d;
  --color-studio-outline: #b0987630;
  --color-frame-top-text: #928b81;
  --color-frame-bottom-text: #898277;
  --color-frame-link: #b8aa95;
  --color-cinema-description: #bdb5a8;
  --color-cinema-link-rule: #b89a695c;
  --color-artist-cool-glow: #58637525;
  --color-artist-cool-glow-mobile: #58637538;
  --color-artist-cool-wall: #191b1e;
  --color-artist-cool-depth: #101112;
  --color-artist-cool-wall-mobile: #111214;
  --color-artist-cool-outline: #8593a928;
  --color-artist-logo-mat: #e6e4de;
  --color-transition-text: #b6ab99;
  --color-crew-caption: #c4baa8;
  --color-crew-rule: #c3b39755;
  --color-crew-name: #e1dacc;
  --color-crew-role: #948979;
  --color-crew-invitation: #a99f90;
  --color-social-surface: #121211;
  --color-record-groove-light: #1c1b19;
  --color-record-groove-ridge: #31302a;
  --color-record-groove-dark: #1b1a18;
  --color-record-sheen-warm: #d6b07624;
  --color-record-sheen-amber: #aa723422;
  --color-record-label-edge: #8d7143;
  --color-record-label: #76613d;
  --color-record-label-ink: #282318;
  --color-social-glow: #7d472324;
  --color-social-rule: #b4a68f55;
  --color-social-index: #857d70;
  --color-social-state: var(--muted);
  --color-social-arrow: #c9b58f;
  --color-social-note: #8c8376;
  --color-credits-surface: #101010;
  --color-credits-depth: #111110;
  --color-credits-halo: #9a774c1c;
  --color-credits-description: #b1a99c;
  --color-credits-rule: #a18e6e33;
  --color-credits-role: #8c8273;
  --color-credits-cast-copy: #b7afa1;
  --color-credits-cast-caption: #8e8271;
  --color-credits-monogram: #d9d1c3;
  --color-credits-closing: #908676;
  --color-spotlight-surface: #10100f;
  --color-spotlight-glow: #a87d3440;
  --color-dialog-scrollbar: #807157;
  --color-dialog-surface: #181819;
  --color-dialog-close-surface: #181819ef;
  --color-dialog-image-mat: #e8e6e0;
  --color-dialog-image-rule: #b5a17b33;
  --color-dialog-link-rule: #c9a56c66;
  --color-ink-153: color-mix(in srgb, var(--ink) 60%, transparent);
  --color-ink-69: color-mix(in srgb, var(--ink) 27.058824%, transparent);
  --color-ink-201: color-mix(in srgb, var(--ink) 78.823529%, transparent);
  --color-ink-205: color-mix(in srgb, var(--ink) 80.392157%, transparent);
  --color-ink-149: color-mix(in srgb, var(--ink) 58.431373%, transparent);
  --color-ink-80: color-mix(in srgb, var(--ink) 31.372549%, transparent);
  --color-ink-37: color-mix(in srgb, var(--ink) 14.509804%, transparent);
  --color-ink-230: color-mix(in srgb, var(--ink) 90.196078%, transparent);
  --color-ink-156: color-mix(in srgb, var(--ink) 61.176471%, transparent);
  --color-ink-85: color-mix(in srgb, var(--ink) 33.333333%, transparent);
  --color-ink-48: color-mix(in srgb, var(--ink) 18.823529%, transparent);
}
@supports (color: rgb(from white r g b)) {
  :root {
    --color-studio-wall: rgb(from var(--charcoal) calc(r + 8) calc(g + 6) calc(b + 2));
    --color-studio-wall-mobile: rgb(from var(--charcoal) calc(r + 11) calc(g + 8) calc(b + 2));
    --color-studio-glow: rgb(from var(--brass) calc(r - 50) calc(g - 56) calc(b - 54) / 0.258824);
    --color-studio-glow-mobile: rgb(from var(--brass) calc(r - 50) calc(g - 56) calc(b - 54) / 0.301961);
    --color-studio-outline: rgb(from var(--brass) calc(r - 12) calc(g - 3) calc(b + 13) / 0.188235);
    --color-frame-top-text: rgb(from var(--muted) calc(r - 16) calc(g - 20) calc(b - 23));
    --color-frame-bottom-text: rgb(from var(--muted) calc(r - 25) calc(g - 29) calc(b - 33));
    --color-frame-link: rgb(from var(--muted) calc(r + 22) calc(g + 11) calc(b - 3));
    --color-cinema-description: rgb(from var(--muted) calc(r + 27) calc(g + 22) calc(b + 16));
    --color-cinema-link-rule: rgb(from var(--brass) calc(r - 4) calc(g - 1) b / 0.360784);
    --color-artist-cool-glow: rgb(from var(--color-cool) r g b / 0.145098);
    --color-artist-cool-glow-mobile: rgb(from var(--color-cool) r g b / 0.219608);
    --color-artist-cool-wall: rgb(from var(--charcoal) calc(r + 4) calc(g + 6) calc(b + 8));
    --color-artist-cool-depth: rgb(from var(--ink) calc(r + 3) calc(g + 4) calc(b + 4));
    --color-artist-cool-wall-mobile: rgb(from var(--ink) calc(r + 4) calc(g + 5) calc(b + 6));
    --color-artist-cool-outline: rgb(from var(--color-cool) calc(r + 45) calc(g + 48) calc(b + 52) / 0.156863);
    --color-artist-logo-mat: rgb(from var(--cream) calc(r - 3) calc(g - 3) calc(b - 2));
    --color-transition-text: rgb(from var(--muted) calc(r + 20) calc(g + 12) calc(b + 1));
    --color-crew-caption: rgb(from var(--muted) calc(r + 34) calc(g + 27) calc(b + 16));
    --color-crew-rule: rgb(from var(--brass) calc(r + 7) calc(g + 24) calc(b + 46) / 0.333333);
    --color-crew-name: rgb(from var(--cream) calc(r - 8) calc(g - 13) calc(b - 20));
    --color-crew-role: rgb(from var(--muted) calc(r - 14) calc(g - 22) calc(b - 31));
    --color-crew-invitation: rgb(from var(--muted) calc(r + 7) g calc(b - 8));
    --color-social-surface: rgb(from var(--ink) calc(r + 5) calc(g + 5) calc(b + 3));
    --color-record-groove-light: rgb(from var(--charcoal) calc(r + 7) calc(g + 6) calc(b + 3));
    --color-record-groove-ridge: rgb(from var(--charcoal) calc(r + 28) calc(g + 27) calc(b + 20));
    --color-record-groove-dark: rgb(from var(--charcoal) calc(r + 6) calc(g + 5) calc(b + 2));
    --color-record-sheen-warm: rgb(from var(--brass) calc(r + 26) calc(g + 21) calc(b + 13) / 0.141176);
    --color-record-sheen-amber: rgb(from var(--brass) calc(r - 18) calc(g - 41) calc(b - 53) / 0.133333);
    --color-record-label-edge: rgb(from var(--brass) calc(r - 47) calc(g - 42) calc(b - 38));
    --color-record-label: rgb(from var(--brass) calc(r - 70) calc(g - 58) calc(b - 44));
    --color-record-label-ink: rgb(from var(--ink) calc(r + 27) calc(g + 22) calc(b + 10));
    --color-social-glow: rgb(from var(--brass) calc(r - 63) calc(g - 84) calc(b - 70) / 0.141176);
    --color-social-rule: rgb(from var(--brass) calc(r - 8) calc(g + 11) calc(b + 38) / 0.333333);
    --color-social-index: rgb(from var(--muted) calc(r - 29) calc(g - 34) calc(b - 40));
    --color-social-state: var(--muted);
    --color-social-arrow: rgb(from var(--brass) calc(r + 13) calc(g + 26) calc(b + 38));
    --color-social-note: rgb(from var(--muted) calc(r - 22) calc(g - 28) calc(b - 34));
    --color-credits-surface: rgb(from var(--ink) calc(r + 3) calc(g + 3) calc(b + 2));
    --color-credits-depth: rgb(from var(--ink) calc(r + 4) calc(g + 4) calc(b + 2));
    --color-credits-halo: rgb(from var(--brass) calc(r - 34) calc(g - 36) calc(b - 29) / 0.109804);
    --color-credits-description: rgb(from var(--muted) calc(r + 15) calc(g + 10) calc(b + 4));
    --color-credits-rule: rgb(from var(--brass) calc(r - 27) calc(g - 13) calc(b + 5) / 0.2);
    --color-credits-role: rgb(from var(--muted) calc(r - 22) calc(g - 29) calc(b - 37));
    --color-credits-cast-copy: rgb(from var(--muted) calc(r + 21) calc(g + 16) calc(b + 9));
    --color-credits-cast-caption: rgb(from var(--muted) calc(r - 20) calc(g - 29) calc(b - 39));
    --color-credits-monogram: rgb(from var(--cream) calc(r - 16) calc(g - 22) calc(b - 29));
    --color-credits-closing: rgb(from var(--muted) calc(r - 18) calc(g - 25) calc(b - 34));
    --color-spotlight-surface: rgb(from var(--ink) calc(r + 3) calc(g + 3) calc(b + 1));
    --color-spotlight-glow: rgb(from var(--brass) calc(r - 20) calc(g - 30) calc(b - 53) / 0.25098);
    --color-dialog-scrollbar: rgb(from var(--brass) calc(r - 60) calc(g - 42) calc(b - 18));
    --color-dialog-surface: rgb(from var(--charcoal) calc(r + 3) calc(g + 3) calc(b + 3));
    --color-dialog-close-surface: rgb(from var(--charcoal) calc(r + 3) calc(g + 3) calc(b + 3) / 0.937255);
    --color-dialog-image-mat: rgb(from var(--cream) calc(r - 1) calc(g - 1) b);
    --color-dialog-image-rule: rgb(from var(--brass) calc(r - 7) calc(g + 6) calc(b + 18) / 0.2);
    --color-dialog-link-rule: rgb(from var(--brass) calc(r + 13) calc(g + 10) calc(b + 3) / 0.4);
  }
}