/* Arena Journey design tokens: the palette (base theme "ember"), logo colours, type, motion and composite tokens.
   Loaded before journey.css on every Journey page and every Arena stats page (templates/journey/_theme_head.html).
   A theme (static/journey/themes/<name>.css; "royal" is the default) is linked right after this file and overrides
   the palette. Reference: frontend/static/journey/README.md "Design tokens", "Motion" and "Themes". */

/* Display face: Beaufort (the League client serif). One file serves every weight, so `font-weight: 700` never
   synthesises a faux bold: emphasis comes from size, tracking and colour. Licence under review by the owner; to swap the
   face, change this one rule (and --j-font-display below). */
@font-face {
  font-family: "JourneyDisplay";
  src: url("../tcg/fonts/BeaufortforLOL-Medium.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The logo faces (ArenaSweats wordmark only). */
@font-face {
  font-family: "ArenaBrand";
  src: url("../fonts/Fontspring-DEMO-BeauMed_-iF66728d559ef57.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "HeyComic";
  src: url("../fonts/Hey Comic.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* ---- Palette (theme "ember"). Themes override these in themes/<name>.css; everything else derives from them. ---- */
  --j-black: #000000;
  --j-coal-1000: #050404;
  --j-coal-950: #0b0a09;
  --j-coal-900: #131210;
  --j-coal-850: #1a1714;
  --j-coal-800: #1e1d1b;
  --j-coal-750: #221f1c;
  --j-coal-700: #2a2825;
  --j-coal-600: #3a3733;
  --j-coal-500: #4a4540;
  --j-text: #f0f0f0;
  --j-text-2: #cdc8bf;
  --j-muted: #a39c91;
  --j-dim: #7b756c;
  --j-disabled: #57534d;
  --j-gold-25: #fff3cf;
  --j-gold-50: #f6f1e7;
  --j-gold-100: #f5e5b8;
  --j-gold-150: #f3d488;
  --j-gold-200: #e7c477;
  --j-gold-300: #d7a84e;
  --j-gold-400: #bd8c35;
  --j-gold-450: #b08f48;
  --j-gold-500: #a87a2c;
  --j-gold-600: #8a6427;
  --j-gold-700: #6f5122;
  --j-gold-ink: #2b1d07;
  --j-red-50: #ffe9e4;
  --j-red-100: #f6ded8;
  --j-red-200: #ef9284;
  --j-red-300: #d9665a;
  --j-red-350: #c4574d;
  --j-red-400: #a64b44;
  --j-red-500: #8a3c36;
  --j-red-550: #7e332d;
  --j-red-600: #6b2923;
  --j-rose: #e0705f;
  --j-danger: #e5484d;
  --j-hot: #ec6c5d;
  --j-ember-100: #ffd9b0;
  --j-ember-200: #f7a35f;
  --j-ember-250: #ef8a45;
  --j-ember-300: #e9773d;
  --j-ember-400: #d4602d;
  --j-ember-500: #9c4120;
  /* Metals as materials (silver augments and frames, physical damage, losses, tier plates). Placements have their own
     family below (--j-p1..--j-p5); never use these for a finishing place. */
  --j-silver-50: #f4f6f7;
  --j-silver-100: #eef1f3;
  --j-silver-200: #dfe4e7;
  --j-silver-300: #cfd5d9;
  --j-silver-350: #c3ccd2;
  --j-silver-400: #bcc4c9;
  --j-silver-500: #a7aeb2;
  --j-silver-600: #8f999f;
  --j-silver-700: #6d757a;
  --j-silver-800: #4f5559;
  --j-bronze-hi: #e3a877;
  --j-bronze: #cc8d58;
  --j-bronze-lo: #b4733f;
  --j-bronze-light: #f3c39a;
  --j-bronze-deep: #7e4a24;
  --j-rust-hi: #a9655c;
  --j-rust: #a65f54;
  --j-rust-lo: #6c3730;
  --j-rust-light: #c98478;
  --j-rust-deep: #5a2c26;

  /* Placements (shared by every theme; designed on pure black). 1st prismatic: an iridescent rose > lilac > sky > mint
     shimmer like League's prismatic items, lilac as the flat colour. 2nd-3rd clean bright gold (yellow-gold all the way
     down, never mustard or amber). 4th cool silver. 5th-6th muted graphite. Each place has a flat colour for small marks
     and text (--j-pN), light and dark steps (-hi, -light, -lo, -deep), an rgb triplet, a fill for bars and cells
     (--j-fill-N, vertical) and a diagonal frame gradient (--j-edge-N) for borders and hexagon rims. */
  --j-p1-hi: #f7ecff;
  --j-p1-rose: #ffbfe9;
  --j-p1: #d8b6ff;
  --j-p1-mid: #c4abff;
  --j-p1-sky: #a6cbff;
  --j-p1-mint: #a4efda;
  --j-p1-lo: #9a90f2;
  --j-p1-deep: #5d56b6;
  --j-p2-hi: #fff4cf;
  --j-p2-light: #ffe28f;
  --j-p2: #f6c856;
  --j-p2-lo: #d9a43a;
  --j-p2-deep: #8c6418;
  --j-p4-hi: #f3f6fa;
  --j-p4-light: #dfe5ec;
  --j-p4: #bac3ce;
  --j-p4-lo: #8a95a3;
  --j-p4-deep: #515a68;
  --j-p5-hi: #8a909b;
  --j-p5-light: #9ca2ac;
  --j-p5: #6e7480;
  --j-p5-lo: #474b55;
  --j-p5-deep: #2b2e34;
  --j-prism-pink: #e2a6cf;
  --j-prism-pink-light: #f2c6e4;
  --j-prism-violet: #b99be0;
  --j-prism-violet-light: #d8c6f2;
  --j-prism-violet-deep: #9f88d6;
  --j-prism-blue: #9fbde8;
  --j-prism-mint: #a3d6c6;
  --j-up-color: #93d27a;
  --j-magic: #7fa3d1;
  --j-true-damage: #efe8dc;
  --j-white: #ffffff;
  /* RGB triplets for alpha use: rgba(var(--j-gold-rgb), 0.2). */
  --j-white-rgb: 255, 255, 255;
  --j-shadow-rgb: 0, 0, 0;
  --j-ink-rgb: 8, 7, 6;
  --j-coal-900-rgb: 20, 18, 16;
  --j-coal-800-rgb: 30, 28, 26;
  --j-coal-700-rgb: 40, 38, 35;
  --j-coal-600-rgb: 58, 55, 51;
  --j-coal-500-rgb: 74, 70, 65;
  --j-stone-rgb: 120, 112, 102;
  --j-stone-light-rgb: 220, 210, 195;
  --j-plum-rgb: 70, 56, 80;
  --j-gold-rgb: 215, 168, 78;
  --j-gold-200-rgb: 231, 196, 119;
  --j-p1-rgb: 216, 182, 255;
  --j-p2-rgb: 246, 200, 86;
  --j-p4-rgb: 186, 195, 206;
  --j-p5-rgb: 110, 116, 128;
  --j-light-rgb: 255, 232, 186;
  --j-gold-900-rgb: 120, 70, 10;
  --j-gold-ink-rgb: 30, 20, 8;
  --j-red-rgb: 166, 75, 68;
  --j-red-300-rgb: 217, 102, 90;
  --j-red-200-rgb: 239, 146, 132;
  --j-rose-rgb: 224, 112, 95;
  --j-hot-rgb: 236, 108, 93;
  --j-danger-rgb: 229, 72, 77;
  --j-blood-rgb: 60, 10, 6;
  --j-blush-rgb: 255, 210, 190;
  --j-bronze-rgb: 204, 141, 88;
  --j-rust-rgb: 166, 95, 84;
  --j-ember-rgb: 233, 119, 61;
  --j-ember-200-rgb: 247, 163, 95;
  --j-flame-rgb: 215, 140, 60;
  --j-mist-rgb: 214, 206, 192; /* hub scene mist (arena-scene.js reads it for the canvas texture) */
  --j-shaft-rgb: var(--j-gold-200-rgb); /* hub light shafts (arena-scene.js) */
  --j-silver-rgb: 207, 213, 217;
  --j-prism-rgb: 195, 166, 230;
  --j-up-rgb: 147, 210, 122;
  /* Twitch's brand purple: only on Twitch glyphs and links (story-kit.js twitchGlyph). Themes do not override it. */
  --j-twitch: #a970ff;
  --j-twitch-rgb: 169, 112, 255;

  /* The logo keeps the leaderboard's exact colours in every theme; themes never override --j-logo-*. */
  --j-logo-gold: #d7a84e;
  --j-logo-gold-light: #f5e5b8;
  --j-logo-gold-edge: #a8873e;
  --j-logo-gold-stroke: rgba(215, 168, 78, 0.8);
  --j-logo-red: #a64b44;
  --j-logo-red-stroke: rgba(166, 75, 68, 0.8);
  --j-logo-shadow: rgba(0, 0, 0, 0.15);
  --j-logo-shadow-soft: rgba(0, 0, 0, 0.1);

  /* Scrollbars: the main site's red (styles.css --secondary-color #a64b44) on a dark track, in every theme
     (owner's choice: the one place red is used outside the logo, the call to action and live states). */
  --j-scroll-thumb: #a64b44;
  --j-scroll-thumb-hover: #c4574d;
  --j-scroll-thumb-active: #d9665a;
  --j-scroll-track: #141414;

  /* Surfaces: flat, square panels (a two-stop gradient under a 1px gold hairline); all the craft goes into ornament. */
  --j-panel-top: var(--j-coal-850);
  --j-panel-bottom: var(--j-coal-900);
  --j-panel: linear-gradient(180deg, var(--j-panel-top), var(--j-panel-bottom));
  /* Glass variant for panels laid over art (Deep Dive chart frames, tooltips). */
  --j-panel-glass: linear-gradient(155deg, rgba(var(--j-coal-800-rgb), 0.62), rgba(var(--j-ink-rgb), 0.72));
  --j-sunken: rgba(var(--j-shadow-rgb), 0.32);
  --j-tile: rgba(var(--j-white-rgb), 0.045);
  --j-tile-hover: rgba(var(--j-white-rgb), 0.075);
  /* No grain: kept as a token (a transparent layer) because older pages still list it in background stacks. */
  --j-grain: linear-gradient(transparent, transparent);
  /* Backdrop and splash art treatment (themes tint these). */
  --j-backdrop-filter: blur(7px) saturate(0.6) sepia(0.25) brightness(0.42);
  --j-backdrop-filter-landing: blur(2px) saturate(0.7) sepia(0.2) brightness(0.5);
  --j-art-tint: saturate(0.85) sepia(0.12);
  --j-art-tint-hover: saturate(1.05) sepia(0);
  /* Official Arena art in monochrome (setBackdrop / artPicker tone 'mono'): page backdrop, section art and its soft
     layer. The base tints it warm charcoal; cool themes turn the tint blue. */
  --j-mono-filter: blur(6px) grayscale(1) sepia(0.3) brightness(0.5);
  --j-mono-filter-section: blur(2px) grayscale(1) sepia(0.3) brightness(0.62) contrast(1.15);
  --j-mono-filter-soft: blur(16px) grayscale(1) sepia(0.3) brightness(0.4);
  /* The light in the area under the rating charts' gold line (story-kit.js seismograph(), the Overview chart). */
  --j-seis-area-rgb: var(--j-gold-rgb);
  --j-veil:
    radial-gradient(900px 420px at 50% -8%, rgba(var(--j-red-rgb), 0.2) 0%, rgba(var(--j-red-rgb), 0) 70%),
    linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.4) 0%, rgba(var(--j-ink-rgb), 0.78) 34%, var(--j-coal-1000) 74%),
    radial-gradient(ellipse 120% 90% at 50% 40%, rgba(var(--j-shadow-rgb), 0) 40%, rgba(var(--j-blood-rgb), 0.6) 100%);
  --j-veil-landing:
    radial-gradient(ellipse 60% 50% at 50% 34%, rgba(var(--j-flame-rgb), 0.1) 0%, rgba(var(--j-flame-rgb), 0) 70%),
    radial-gradient(ellipse 75% 65% at 50% 38%, rgba(var(--j-shadow-rgb), 0.08) 0%, rgba(var(--j-shadow-rgb), 0.66) 100%),
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(var(--j-shadow-rgb), 0) 55%, rgba(var(--j-blood-rgb), 0.55) 100%),
    linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.5) 0%, rgba(var(--j-shadow-rgb), 0.5) 45%, rgba(var(--j-shadow-rgb), 0.97) 100%);
  --j-radius: 0px;
  --j-radius-sm: 0px;

  /* Text */

  /* ArenaSweats gold, keyed on the logo gold #D7A84E. gold-50 is warm white for values and names. */
  --j-as-gold: var(--j-gold-300);
  --j-as-gold-light: var(--j-gold-100);

  /* ArenaSweats crimson (the red SWEATS, Search buttons, active tab underline). */
  --j-as-red: var(--j-red-400);

  /* Ember: firelight highlights (you markers, rolling average, links, damage dealt). */

  /* Outcomes: gains read green like the ArenaSweats rating chart, losses crimson. */

  /* Selection (selected game, your team, selected friend): the leaderboard's crimson favourite row by default. */
  --j-select-rgb: var(--j-red-rgb);
  --j-select-edge-rgb: var(--j-red-300-rgb);
  --j-select-light-rgb: var(--j-blush-rgb);
  /* Match recap hero: the light pool behind the result (crimson by default). */
  --j-hero-wash: radial-gradient(60% 120% at 0 100%, rgba(var(--j-red-rgb), 0.28), rgba(var(--j-red-rgb), 0) 70%);
  /* Landing card "Enter" pill at rest. */
  --j-enter-bg: rgba(var(--j-red-rgb), 0.28);
  --j-enter-border: rgba(var(--j-red-200-rgb), 0.35);
  --j-enter-color: var(--j-red-100);

  /* Hairlines */
  --j-line: rgba(var(--j-gold-rgb), 0.16); /* panel border */
  --j-line-soft: rgba(var(--j-gold-rgb), 0.1); /* row separators */
  --j-line-row: rgba(var(--j-gold-rgb), 0.14);
  --j-line-divider: rgba(var(--j-gold-rgb), 0.18); /* stat column dividers */
  --j-line-mid: rgba(var(--j-gold-rgb), 0.3); /* frames */
  --j-line-control: rgba(var(--j-gold-rgb), 0.35); /* buttons, inputs, cards */
  --j-line-strong: rgba(var(--j-gold-rgb), 0.5);

  /* Placement fills (see the palette above). Bars and cells layer --j-gloss over them. */
  --j-gloss: linear-gradient(180deg, rgba(var(--j-white-rgb), 0.14) 0%, rgba(var(--j-white-rgb), 0) 40%, rgba(var(--j-shadow-rgb), 0.12) 100%);
  --j-bar-edge: inset 0 1px 0 rgba(var(--j-white-rgb), 0.28), inset 0 -1px 0 rgba(var(--j-shadow-rgb), 0.22);
  --j-fill-1: linear-gradient(125deg, var(--j-p1-rose) 0%, var(--j-p1) 34%, var(--j-p1-sky) 68%, var(--j-p1-mint) 100%);
  --j-fill-2: linear-gradient(180deg, var(--j-p2-light) 0%, var(--j-p2) 45%, var(--j-p2-lo) 100%);
  --j-fill-4: linear-gradient(180deg, var(--j-p4-light) 0%, var(--j-p4) 50%, var(--j-p4-lo) 100%);
  --j-fill-5: linear-gradient(180deg, var(--j-p5-hi) 0%, var(--j-p5) 50%, var(--j-p5-lo) 100%);
  /* Frames, rims and swatches: lit from the top left. */
  --j-edge-1: linear-gradient(160deg, var(--j-p1-hi) 0%, var(--j-p1-rose) 22%, var(--j-p1) 46%, var(--j-p1-sky) 72%, var(--j-p1-mint) 100%);
  --j-edge-2: linear-gradient(160deg, var(--j-p2-hi) 0%, var(--j-p2) 40%, var(--j-p2-lo) 72%, var(--j-p2-deep) 100%);
  --j-edge-4: linear-gradient(160deg, var(--j-p4-hi) 0%, var(--j-p4) 45%, var(--j-p4-lo) 75%, var(--j-p4-deep) 100%);
  --j-edge-5: linear-gradient(160deg, var(--j-p5-light) 0%, var(--j-p5) 45%, var(--j-p5-lo) 75%, var(--j-p5-deep) 100%);
  /* 1st as gradient text (background-clip: text) and its soft lilac glow. */
  --j-text-1: linear-gradient(100deg, var(--j-p1-rose) 0%, var(--j-p1) 40%, var(--j-p1-sky) 75%, var(--j-p1-mint) 100%);
  --j-glow-1: 0 0 12px rgba(var(--j-p1-rgb), 0.5);
  --j-fill-prismatic: linear-gradient(110deg, var(--j-prism-pink) 0%, var(--j-prism-violet) 25%, var(--j-prism-blue) 50%, var(--j-prism-mint) 72%, var(--j-prism-violet) 100%);
  --j-fill-gold: var(--j-metal-gold);
  --j-fill-ember: linear-gradient(90deg, var(--j-ember-500), var(--j-ember-300) 60%, var(--j-ember-200));
  --j-fill-crimson: linear-gradient(90deg, var(--j-red-600), var(--j-red-350) 60%, var(--j-rose));
  --j-fill-silver: linear-gradient(180deg, var(--j-silver-200), var(--j-silver-500));
  --j-fill-bronze: linear-gradient(180deg, var(--j-bronze), var(--j-bronze-lo));

  /* Metals (materials, not placements): polished gold, silver, bronze and rust lit from above (a bright top, a hard horizon at the middle and a
     bounce light near the bottom). Vertical for bars and plates, -text for numbers and titles (background-clip: text),
     -edge for frames and borders, -ring (conic) for round bezels and medallions. */
  --j-metal-gold: linear-gradient(180deg, var(--j-gold-25) 0%, var(--j-gold-150) 22%, var(--j-gold-300) 47%, var(--j-gold-500) 53%, var(--j-gold-400) 70%, var(--j-gold-200) 88%, var(--j-gold-600) 100%);
  --j-metal-gold-text: linear-gradient(180deg, var(--j-gold-25) 0%, var(--j-gold-100) 30%, var(--j-gold-200) 52%, var(--j-gold-300) 56%, var(--j-gold-400) 100%);
  --j-metal-gold-title: linear-gradient(180deg, var(--j-gold-25) 0%, var(--j-gold-100) 26%, var(--j-gold-200) 49%, var(--j-gold-500) 51%, var(--j-gold-300) 66%, var(--j-gold-150) 86%, var(--j-gold-400) 100%);
  --j-metal-gold-edge: linear-gradient(135deg, var(--j-gold-600) 0%, var(--j-gold-150) 22%, var(--j-gold-500) 46%, var(--j-gold-100) 70%, var(--j-gold-600) 100%);
  --j-metal-gold-ring: conic-gradient(from 200deg, var(--j-gold-25), var(--j-gold-500), var(--j-gold-150), var(--j-gold-700), var(--j-gold-200), var(--j-gold-500), var(--j-gold-25));
  --j-metal-silver: linear-gradient(180deg, var(--j-silver-50) 0%, var(--j-silver-200) 24%, var(--j-silver-400) 47%, var(--j-silver-600) 53%, var(--j-silver-500) 72%, var(--j-silver-350) 88%, var(--j-silver-700) 100%);
  --j-metal-silver-ring: conic-gradient(from 200deg, var(--j-silver-50), var(--j-silver-600), var(--j-silver-200), var(--j-silver-800), var(--j-silver-300), var(--j-silver-600), var(--j-silver-50));
  --j-metal-bronze: linear-gradient(180deg, var(--j-bronze-light) 0%, var(--j-bronze-hi) 24%, var(--j-bronze) 47%, var(--j-bronze-lo) 53%, var(--j-bronze) 76%, var(--j-bronze-deep) 100%);
  --j-metal-rust: linear-gradient(180deg, var(--j-rust-light) 0%, var(--j-rust-hi) 26%, var(--j-rust) 48%, var(--j-rust-lo) 54%, var(--j-rust) 78%, var(--j-rust-deep) 100%);
  /* Column variants (lit from the side) for tall vertical bars, where a horizontal horizon would cut the bar in two. */
  --j-metal-silver-col: linear-gradient(90deg, var(--j-silver-700) 0%, var(--j-silver-500) 12%, var(--j-silver-200) 34%, var(--j-silver-50) 46%, var(--j-silver-400) 64%, var(--j-silver-600) 86%, var(--j-silver-800) 100%);
  --j-metal-bronze-col: linear-gradient(90deg, var(--j-bronze-deep) 0%, var(--j-bronze-lo) 14%, var(--j-bronze-hi) 40%, var(--j-bronze-light) 48%, var(--j-bronze) 64%, var(--j-bronze-lo) 86%, var(--j-bronze-deep) 100%);
  --j-metal-rust-col: linear-gradient(90deg, var(--j-rust-deep) 0%, var(--j-rust-lo) 14%, var(--j-rust-hi) 42%, var(--j-rust-light) 49%, var(--j-rust) 64%, var(--j-rust-lo) 86%, var(--j-rust-deep) 100%);
  /* A diagonal band of light swept across metal once (j-sheen); see .j-sheen in journey.css. */
  --j-sheen: linear-gradient(105deg, rgba(var(--j-white-rgb), 0) 30%, rgba(var(--j-white-rgb), 0.55) 47%, rgba(var(--j-white-rgb), 0.8) 50%, rgba(var(--j-white-rgb), 0) 66%);

  /* Branded red buttons, ribbons and active markers: a lit face, a bright top lip, a dark bottom edge and a hover glow. */
  --j-red-face: linear-gradient(180deg, var(--j-red-350) 0%, var(--j-red-400) 46%, var(--j-red-500) 100%);
  --j-red-face-hover: linear-gradient(180deg, var(--j-red-300) 0%, var(--j-red-350) 46%, var(--j-red-500) 100%);
  --j-red-lip: inset 0 1px 0 rgba(var(--j-blush-rgb), 0.3), inset 0 -1px 0 rgba(var(--j-blood-rgb), 0.55);
  --j-red-edge: rgba(var(--j-red-200-rgb), 0.35);
  --j-red-glow: 0 0 18px rgba(var(--j-red-300-rgb), 0.45);
  /* Active tab underline and section markers. */
  --j-red-bar: linear-gradient(180deg, var(--j-red-200), var(--j-red-350) 45%, var(--j-as-red));
  --j-red-bar-glow: 0 0 12px rgba(var(--j-rose-rgb), 0.6);

  /* Panel material (journey.css .j-panel): --j-panel is the background stack, --j-panel-shadow the lip and drop shadow,
     --j-panel-feature the richer stack for framed panels (.j-corners / .j-frame: a top rule over the panel). */
  --j-panel-shadow: none;
  --j-panel-feature: var(--j-rule-center) 14px 0 / calc(100% - 28px) 1px no-repeat, var(--j-panel);
  /* Panel material layers (journey.css .j-panel): the lit top edge and an optional glass reflection. */
  --j-panel-edge: linear-gradient(90deg, rgba(var(--j-light-rgb), 0) 8%, rgba(var(--j-light-rgb), 0.32) 50%, rgba(var(--j-light-rgb), 0) 92%);
  --j-panel-shine: linear-gradient(transparent, transparent);

  /* Type. Display (titles, tab labels, panel titles, every big number) is the Beaufort serif at one weight with wide
     tracking; body and small letter-spaced caps labels are a clean humanist sans (Source Sans 3, loaded by
     _theme_head.html at 400 and 600 only, so heavier requests render at 600). --j-brand, --j-display, --j-sans and
     --j-body are the names pages use; --j-font-* are the single place to swap a face. */
  --j-font-display: "JourneyDisplay", "Cinzel", Georgia, "Times New Roman", serif;
  --j-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --j-font-logo: "ArenaBrand", Georgia, serif;
  --j-brand: var(--j-font-display);
  --j-display: var(--j-font-display);
  --j-sans: var(--j-font-body);
  --j-body: var(--j-font-body);
  /* Tracking scale (em): titles .04-.08, panel titles .22, tab labels .2, nav .16, labels .12-.28, kickers .42. */
  --j-track-title: 0.06em;
  --j-track-head: 0.22em;
  --j-track-tab: 0.2em;
  --j-track-nav: 0.16em;
  --j-track-label: 0.12em;
  --j-track-meta: 0.24em;
  --j-track-kicker: 0.42em;

  /* Motion. Easings and durations measured from arena.drawyoursword.lol (the DYS audit, kept outside git). */
  --j-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* rise / appear / reveal / row-in */
  --j-ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* colour, border and underline transitions */
  --j-ease-out: cubic-bezier(0, 0, 0.2, 1); /* card lift, art zoom, sheen */
  --j-ease-cell: cubic-bezier(0.2, 0.8, 0.2, 1); /* honeycomb cells */
  --j-ease-pop: cubic-bezier(0.2, 0.8, 0.2, 1.3); /* overshoot pop */
  --j-ease-slide: cubic-bezier(0.7, 0, 0.2, 1); /* slide, rise, tilt, wipe transitions */
  --j-ease-iris: cubic-bezier(0.6, 0, 0.3, 1);
  --j-dur-fast: 0.15s;
  --j-dur: 0.3s;
  --j-dur-slow: 0.7s;
  --j-dur-appear: 0.6s;
  --j-dur-rise: 0.8s;
  --j-spin-fast: 22s;
  --j-spin-mid: 44s;
  --j-spin-slow: 64s;
  --j-breathe: 5s;
  --j-breathe-glow: 7s;

  /* Ornament: thin gold rules that fade out, corner brackets, diamonds, the focus ring. */
  --j-rule: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0.45), rgba(var(--j-gold-rgb), 0));
  --j-rule-center: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0), rgba(var(--j-gold-rgb), 0.45) 12%, rgba(var(--j-gold-rgb), 0.45) 88%, rgba(var(--j-gold-rgb), 0));
  --j-rule-glint: linear-gradient(90deg, rgba(var(--j-gold-rgb), 0), var(--j-gold-300) 28%, var(--j-gold-50) 50%, var(--j-gold-300) 72%, rgba(var(--j-gold-rgb), 0));
  --j-bracket: rgba(var(--j-gold-rgb), 0.7);
  --j-bracket-hover: var(--j-gold-100);
  --j-focus-ring: 0 0 0 4px rgba(var(--j-gold-rgb), 0.18);
  /* A diamond as an alpha mask (shape only, no colour), for corner ornaments drawn with mask-image. */
  --j-diamond-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath d='M1 0 2 1 1 2 0 1z'/%3E%3C/svg%3E");

  /* The one red call to action per page (the header's ArenaSweats Leaderboard button): a crimson plate with a thin gold
     rim, so the red sits inside the gold-and-ink palette instead of on top of it. */
  --j-cta-face: linear-gradient(180deg, var(--j-red-350) 0%, var(--j-red-400) 55%, var(--j-red-500) 100%);
  --j-cta-face-hover: linear-gradient(180deg, var(--j-red-300) 0%, var(--j-red-350) 55%, var(--j-red-400) 100%);
  --j-cta-rim: rgba(var(--j-gold-rgb), 0.55);
  --j-cta-rim-hover: var(--j-gold-200);
  --j-cta-lip: inset 0 1px 0 rgba(var(--j-blush-rgb), 0.28), inset 0 -1px 0 rgba(var(--j-blood-rgb), 0.5);
  --j-cta-glow: 0 0 22px rgba(var(--j-red-300-rgb), 0.35), 0 0 34px rgba(var(--j-gold-rgb), 0.12);

  /* Page art (setBackdrop / .j-scene): blur, desaturate and darken, then shade and light it. */
  --j-scene-filter: blur(6px) saturate(0.7) brightness(0.5);
  --j-scene-filter-hero: blur(2px) saturate(0.8) brightness(0.55);
  --j-scene-filter-section: blur(2px) saturate(0.75) brightness(0.54); /* section art (.j-scene__art) */
  --j-scene-filter-wrap: blur(4px) saturate(1.15) brightness(0.36); /* Wrap slide art */
  --j-scene-filter-soft: blur(16px) saturate(0.62) brightness(0.42);
  --j-scene-shade: linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.45) 0%, rgba(var(--j-ink-rgb), 0.82) 34%, var(--j-coal-950) 72%);
  --j-scene-shade-hero: radial-gradient(78% 70% at 50% 40%, rgba(var(--j-ink-rgb), 0.2) 0%, rgba(var(--j-ink-rgb), 0.8) 58%, var(--j-coal-1000) 100%);
  --j-scene-wash-a: radial-gradient(70% 60% at 8% 4%, rgba(var(--j-gold-rgb), 0.16), rgba(var(--j-gold-rgb), 0) 72%);
  --j-scene-wash-b: radial-gradient(70% 65% at 96% 100%, rgba(var(--j-ember-rgb), 0.16), rgba(var(--j-ember-rgb), 0) 72%);
  --j-scene-wash-top: radial-gradient(1200px 600px at 20% -10%, rgba(var(--j-coal-700-rgb), 0.7) 0%, rgba(var(--j-coal-700-rgb), 0) 60%);

  /* Site header (templates/site/_topbar.html): the main bar, the journey row under it on journey pages, and the
     whole sticky header height that sticky offsets and full-height sections use (site.css adds the journey row). */
  --j-bar-h: 64px;
  --j-subbar-h: 46px;
  --j-topbar-h: var(--j-bar-h);
  --j-gutter: 24px;
}