/* ==========================================================================
   CARD ART: one bespoke illustration per game and tool (cards and spotlight on
   the homepage, /games/ and /tools/). Markup is stamped by
   .claude/refresh-catalogue.mjs (ART map); items without an entry fall back to
   the abstract shape art in jf.css (.jf-art--sq-a etc.).
   One visual language: flat primaries, 3px ink outline, var(--jf-rim) depth,
   a floor ellipse in var(--jf-ground), square corners (only true circles and
   half-rounds are round), Fredoka 700 for letters and the allowed glyphs.
   The stage (.jf-art-s) is a 4:3 box centred in the art, so a composition
   keeps its proportions in a 16:10 card, a square phone card or the wide
   spotlight. Positions are % of the stage (or of the parent piece); text
   uses cqh so it scales with the stage. Only fixed tokens, so light and
   dark mode look the same on the art itself.
   ========================================================================== */
.jf-art--pic { container-type: size; }
.jf-art-s { position: absolute; left: 50%; top: 50%; width: min(90cqw, 117cqh); aspect-ratio: 4 / 3; translate: -50% -50%; container-type: size; }
.jf-art-s i { position: absolute; display: grid; place-items: center; box-sizing: border-box; border: var(--jf-line) solid var(--jf-black); box-shadow: var(--jf-rim); background: var(--jf-cream); color: var(--jf-black); font: 700 16cqh/1 var(--jf-font); font-style: normal; text-transform: uppercase; }
.jf-art-s .ja-c { border-radius: 50%; }                                  /* true circle / ellipse */
.jf-art-s .ja-f { border: 0; box-shadow: none; }                         /* flat detail */
.jf-art-s .ja-k { border: 0; }                                           /* clipped shape: rim, no outline */
.jf-art-s .ja-n { border: 0; box-shadow: none; background: none; }       /* bare text or group */
.jf-art-s .ja-g { border: 0; box-shadow: none; border-radius: 50%; background: var(--jf-ground); } /* floor shadow */
.jf-art-s .ja-a { aspect-ratio: 1; }
/* Water drop: a circle plus the triangle that meets it at its tangents. Size it 1 wide : 2 tall in stage %. */
.jf-art-s .ja-drop { border: 0; box-shadow: none; background: none; }
.jf-art-s .ja-drop::before, .jf-art-s .ja-drop::after { content: ""; position: absolute; background: var(--jf-blue); box-shadow: var(--jf-rim); }
.jf-art-s .ja-drop::before { left: 6.7%; top: 0; width: 86.6%; height: 52%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.jf-art-s .ja-drop::after { left: 0; top: 33.3%; width: 100%; aspect-ratio: 1; border-radius: 50%; }
/* Phones: hub cards put Save at the bottom left of the art, so lift the picture clear of it. */
@media (max-width: 600px) {
  .jf-card-wrap:has(.jf-card-save:not([hidden])) .jf-art-s { top: var(--jf-s1); translate: -50% 0; width: min(90cqw, (100cqh - 56px) * 4 / 3); }
}
/* Hover: one piece per composition springs (the .45s transition comes from .jf-art i in jf.css). */
@media (hover: hover) {
  .jf-card:hover .ja-hv, .jf-spot:hover .ja-hv { transform: translateY(-8%) rotate(-5deg); }
}

/* AI or Real: a photo under a magnifier whose glass shows chunky AI pixels */
.jf-art--id-ai-or-real { background: var(--jf-red); }
.jf-art--id-ai-or-real .ja-g { left: 8%; top: 85%; width: 60%; height: 9%; }
.jf-art--id-ai-or-real .ja-1 { left: 10%; top: 8%; width: 54%; height: 78%; }
.jf-art--id-ai-or-real .ja-2 { left: 8%; top: 7%; width: 84%; height: 66%; background: var(--jf-blue); }
.jf-art--id-ai-or-real .ja-3 { left: 56%; top: 14%; width: 22%; background: var(--jf-yellow); }
.jf-art--id-ai-or-real .ja-4 { left: 8%; top: 40%; width: 84%; height: 60%; background: var(--jf-black); clip-path: polygon(0 100%, 34% 18%, 58% 58%, 76% 36%, 100% 100%); }
.jf-art--id-ai-or-real .ja-5 { left: 8%; top: 82%; width: 52%; height: 7%; background: var(--jf-black); }
.jf-art--id-ai-or-real .ja-6 { left: 48%; top: 30%; width: 40%; height: 64%; }
.jf-art--id-ai-or-real .ja-7 { left: 66%; top: 52%; width: 15%; height: 48%; background: var(--jf-black); rotate: -40deg; }
.jf-art--id-ai-or-real .ja-8 { left: 0; top: 0; width: 76%; background: var(--jf-yellow); }
.jf-art--id-ai-or-real .ja-9 { left: 14%; top: 14%; width: 72%; overflow: hidden; }
.jf-art--id-ai-or-real .ja-10 { left: 23%; top: 23%; width: 27%; background: var(--jf-blue); box-shadow: 5.9cqw 0 0 var(--jf-red), 0 5.9cqw 0 var(--jf-yellow), 5.9cqw 5.9cqw 0 var(--jf-black); }

/* Higher or Lower Movie Budget: two film posters, £ on each, ▲ ▼ between */
.jf-art--id-higher-or-lower-movie-budget { background: var(--jf-yellow); }
.jf-art--id-higher-or-lower-movie-budget .ja-g { top: 87%; width: 38%; height: 9%; left: 6%; }
.jf-art--id-higher-or-lower-movie-budget .ja-g + .ja-g { left: 56%; }
.jf-art--id-higher-or-lower-movie-budget .ja-1, .jf-art--id-higher-or-lower-movie-budget .ja-2 { top: 6%; width: 34%; height: 84%; color: var(--jf-cream); font-size: 34cqh; padding-bottom: 14%; }
.jf-art--id-higher-or-lower-movie-budget .ja-1 { left: 8%; background: var(--jf-red); }
.jf-art--id-higher-or-lower-movie-budget .ja-2 { left: 58%; background: var(--jf-blue); }
.jf-art--id-higher-or-lower-movie-budget .ja-3 { left: 0; bottom: 0; width: 100%; height: 18%; background: var(--jf-black); }
.jf-art--id-higher-or-lower-movie-budget .ja-4, .jf-art--id-higher-or-lower-movie-budget .ja-5 { left: 41%; width: 18%; font-size: 13cqh; }
.jf-art--id-higher-or-lower-movie-budget .ja-4 { top: 20%; background: var(--jf-black); color: var(--jf-cream); }
.jf-art--id-higher-or-lower-movie-budget .ja-5 { top: 52%; }

/* Billion Pound Clicker: a big £ coin that presses in, +£1 and a coin stack */
.jf-art--id-billion-pound-clicker { background: var(--jf-blue); }
.jf-art--id-billion-pound-clicker .ja-g { left: 12%; top: 84%; width: 56%; height: 10%; }
.jf-art--id-billion-pound-clicker .ja-1 { left: 16%; top: 8%; width: 48%; background: var(--jf-yellow); font-size: 32cqh; }
.jf-art--id-billion-pound-clicker .ja-2 { left: 12%; top: 12%; width: 76%; background: none; box-shadow: none; }
.jf-art--id-billion-pound-clicker .ja-3 { left: 66%; top: 30%; width: 30%; height: 20%; font-size: 12cqh; rotate: 8deg; }
.jf-art--id-billion-pound-clicker .ja-4 { left: 72%; width: 22%; height: 14%; background: var(--jf-yellow); }
.jf-art--id-billion-pound-clicker .ja-4:nth-of-type(4) { top: 76%; } .jf-art--id-billion-pound-clicker .ja-4:nth-of-type(5) { top: 66%; } .jf-art--id-billion-pound-clicker .ja-4:nth-of-type(6) { top: 56%; }
@media (hover: hover) { .jf-card:hover .jf-art--id-billion-pound-clicker .ja-hv, .jf-spot:hover .jf-art--id-billion-pound-clicker .ja-hv { transform: translateY(5%) scale(.93); } }

/* Crypto Empire: a tower of mined coins beside a rising market chart */
.jf-art--id-crypto-empire { background: var(--jf-black); }
.jf-art--id-crypto-empire .ja-1 { left: 8%; width: 38%; height: 20%; background: var(--jf-yellow); }
.jf-art--id-crypto-empire .ja-1:nth-of-type(1) { top: 70%; } .jf-art--id-crypto-empire .ja-1:nth-of-type(2) { top: 57%; } .jf-art--id-crypto-empire .ja-1:nth-of-type(3) { top: 44%; } .jf-art--id-crypto-empire .ja-1:nth-of-type(4) { top: 31%; }
.jf-art--id-crypto-empire .ja-2 { width: 11%; bottom: 10%; }
.jf-art--id-crypto-empire .ja-2:nth-of-type(5) { left: 54%; height: 26%; background: var(--jf-blue); }
.jf-art--id-crypto-empire .ja-2:nth-of-type(6) { left: 68%; height: 44%; background: var(--jf-cream); }
.jf-art--id-crypto-empire .ja-2:nth-of-type(7) { left: 82%; height: 64%; background: var(--jf-red); }
.jf-art--id-crypto-empire .ja-3 { left: 50%; top: 89%; width: 46%; height: 3%; background: var(--jf-cream); }
.jf-art--id-crypto-empire .ja-4 { left: 65%; top: 24%; width: 17%; height: 20%; color: var(--jf-yellow); font-size: 18cqh; }

/* Can You Survive on Minimum Wage?: a month on the calendar and one £ coin */
.jf-art--id-minimum-wage-survivor { background: var(--jf-red); }
.jf-art--id-minimum-wage-survivor .ja-g { left: 10%; top: 86%; width: 60%; height: 9%; }
.jf-art--id-minimum-wage-survivor .ja-1 { left: 12%; top: 12%; width: 54%; height: 76%; }
.jf-art--id-minimum-wage-survivor .ja-2 { left: 0; top: 0; width: 100%; height: 26%; background: var(--jf-blue); }
.jf-art--id-minimum-wage-survivor .ja-3 { top: -14%; width: 8%; height: 24%; background: var(--jf-black); left: 20%; }
.jf-art--id-minimum-wage-survivor .ja-3 + .ja-3 { left: 70%; }
.jf-art--id-minimum-wage-survivor .ja-4 { left: 12%; top: 38%; width: 9cqw; height: 9cqw; background: var(--jf-black); box-shadow: 15.5cqw 0 0 var(--jf-black), 31cqw 0 0 var(--jf-black), 0 15cqw 0 var(--jf-black), 15.5cqw 15cqw 0 var(--jf-black), 31cqw 15cqw 0 var(--jf-red); }
.jf-art--id-minimum-wage-survivor .ja-5 { left: 58%; top: 50%; width: 30%; background: var(--jf-yellow); font-size: 22cqh; }

/* Real Headline or Made Up?: a front page stamped ✓ and ✗ */
.jf-art--id-real-or-fake-headline { background: var(--jf-yellow); }
.jf-art--id-real-or-fake-headline .ja-g { left: 8%; top: 87%; width: 62%; height: 9%; }
.jf-art--id-real-or-fake-headline .ja-1 { left: 8%; top: 8%; width: 62%; height: 80%; rotate: -4deg; }
.jf-art--id-real-or-fake-headline .ja-2 { left: 6%; top: 4%; width: 88%; height: 22%; font-size: 15cqh; }
.jf-art--id-real-or-fake-headline .ja-3 { left: 6%; width: 88%; background: var(--jf-black); }
.jf-art--id-real-or-fake-headline .ja-3:nth-of-type(2) { top: 29%; height: 4%; }
.jf-art--id-real-or-fake-headline .ja-3:nth-of-type(3) { top: 40%; height: 11%; }
.jf-art--id-real-or-fake-headline .ja-3:nth-of-type(4) { top: 56%; height: 11%; width: 62%; }
.jf-art--id-real-or-fake-headline .ja-3:nth-of-type(5) { top: 75%; height: 4%; box-shadow: 0 3.5cqw 0 var(--jf-black); }
.jf-art--id-real-or-fake-headline .ja-4, .jf-art--id-real-or-fake-headline .ja-5 { width: 24%; color: var(--jf-white); font-size: 18cqh; }
.jf-art--id-real-or-fake-headline .ja-4 { left: 64%; top: 28%; background: var(--jf-good); rotate: 8deg; }
.jf-art--id-real-or-fake-headline .ja-5 { left: 72%; top: 60%; background: var(--jf-red); rotate: -6deg; }

/* SpellSnap: a speaker you listen to, then letter tiles marked like the game */
.jf-art--id-spellsnap { background: var(--jf-blue); }
.jf-art--id-spellsnap .ja-g { left: 4%; top: 69%; width: 92%; height: 9%; }
.jf-art--id-spellsnap .ja-1 { left: 37%; top: 11%; width: 8%; height: 18%; }
.jf-art--id-spellsnap .ja-2 { left: 43%; top: 4%; width: 10%; height: 32%; background: var(--jf-cream); clip-path: polygon(0 32%, 100% 0, 100% 100%, 0 68%); }
.jf-art--id-spellsnap .ja-3 { top: 20%; height: 0; border-color: var(--jf-cream); border-bottom: 0; border-radius: 999px 999px 0 0; background: none; box-shadow: none; rotate: 90deg; }
.jf-art--id-spellsnap .ja-3:nth-of-type(4) { left: 51%; width: 8%; height: 5.3%; translate: 0 -50%; }
.jf-art--id-spellsnap .ja-3:nth-of-type(5) { left: 49%; width: 16%; height: 10.7%; translate: 0 -50%; }
.jf-art--id-spellsnap .ja-4 { top: 42%; width: 20%; font-size: 17cqh; }
.jf-art--id-spellsnap .ja-4:nth-of-type(6) { left: 4%; background: var(--jf-good); color: var(--jf-white); }
.jf-art--id-spellsnap .ja-4:nth-of-type(7) { left: 28%; background: var(--jf-good); color: var(--jf-white); }
.jf-art--id-spellsnap .ja-4:nth-of-type(8) { left: 52%; background: var(--jf-yellow); }
.jf-art--id-spellsnap .ja-4:nth-of-type(9) { left: 76%; }

/* Reaction Snap: a stopwatch and the green GO diamond */
.jf-art--id-reaction-snap { background: var(--jf-cream); }
.jf-art--id-reaction-snap .ja-g { left: 4%; top: 86%; width: 54%; height: 9%; }
.jf-art--id-reaction-snap .ja-1 { left: 26%; top: 5%; width: 10%; height: 14%; background: var(--jf-black); }
.jf-art--id-reaction-snap .ja-2 { left: 47%; top: 15%; width: 8%; background: var(--jf-black); rotate: 45deg; }
.jf-art--id-reaction-snap .ja-3 { left: 8%; top: 17%; width: 46%; background: var(--jf-red); }
.jf-art--id-reaction-snap .ja-4 { left: 13%; top: 13%; width: 74%; }
.jf-art--id-reaction-snap .ja-5 { left: 46%; top: 12%; width: 8%; height: 38%; background: var(--jf-black); transform-origin: 50% 100%; rotate: 40deg; }
.jf-art--id-reaction-snap .ja-6 { left: 40%; top: 40%; width: 20%; background: var(--jf-black); }
.jf-art--id-reaction-snap .ja-7 { left: 63%; top: 30%; width: 25%; background: var(--jf-good); rotate: 45deg; }
.jf-art--id-reaction-snap .ja-8 { inset: 0; color: var(--jf-white); font-size: 12cqh; rotate: -45deg; }

/* Can You Beat Josh?: the higher ▲ and lower ▼ buttons under a ★ streak */
.jf-art--id-can-you-beat-josh { background: var(--jf-red); }
.jf-art--id-can-you-beat-josh .ja-g { top: 80%; width: 38%; height: 10%; left: 10%; }
.jf-art--id-can-you-beat-josh .ja-g + .ja-g { left: 52%; }
.jf-art--id-can-you-beat-josh .ja-1 { left: 6%; top: 3%; width: 88%; height: 24%; color: var(--jf-yellow); font-size: 18cqh; letter-spacing: .1em; }
.jf-art--id-can-you-beat-josh .ja-2, .jf-art--id-can-you-beat-josh .ja-3 { top: 30%; width: 34%; font-size: 26cqh; }
.jf-art--id-can-you-beat-josh .ja-2 { left: 12%; background: var(--jf-blue); color: var(--jf-cream); }
.jf-art--id-can-you-beat-josh .ja-3 { left: 54%; background: var(--jf-yellow); }

/* Guess the Number: an estimate gauge and the 1-2-3 ranking */
.jf-art--id-guess-the-stat { background: var(--jf-cream); }
.jf-art--id-guess-the-stat .ja-1 { left: 12%; top: 10%; width: 76%; height: 50.7%; background: var(--jf-yellow); border-radius: 999px 999px 0 0; }
.jf-art--id-guess-the-stat .ja-2 { left: 22%; top: 44%; width: 56%; height: 56%; border-radius: 999px 999px 0 0; border-bottom: 0; }
.jf-art--id-guess-the-stat .ja-3 { left: 48.5%; top: 22%; width: 3%; height: 38.7%; background: var(--jf-black); transform-origin: 50% 100%; rotate: 38deg; }
.jf-art--id-guess-the-stat .ja-4 { left: 45%; top: 54%; width: 10%; background: var(--jf-black); }
.jf-art--id-guess-the-stat .ja-5 { left: 6%; top: 60%; width: 88%; height: 7%; background: var(--jf-black); }
.jf-art--id-guess-the-stat .ja-6 { top: 74%; width: 15%; font-size: 13cqh; }
.jf-art--id-guess-the-stat .ja-6:nth-of-type(5) { left: 24%; background: var(--jf-blue); color: var(--jf-cream); }
.jf-art--id-guess-the-stat .ja-6:nth-of-type(6) { left: 42.5%; background: var(--jf-red); color: var(--jf-white); }
.jf-art--id-guess-the-stat .ja-6:nth-of-type(7) { left: 61%; background: var(--jf-yellow); }
@media (hover: hover) { .jf-card:hover .jf-art--id-guess-the-stat .ja-hv, .jf-spot:hover .jf-art--id-guess-the-stat .ja-hv { transform: rotate(-70deg); } }


/* Blink: a 3x3 grid with shapes flashing on it */
.jf-art--id-blink { background: var(--jf-yellow); }
.jf-art--id-blink .ja-g { left: 18%; top: 88%; width: 64%; height: 8%; }
.jf-art--id-blink .ja-1 { left: 22%; top: 6%; width: 56%; height: 75%; background: var(--jf-black); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4%; padding: 4%; place-items: stretch; }
.jf-art--id-blink .ja-2 { position: static; background: var(--jf-cream); }
.jf-art--id-blink .ja-3 { left: 27%; top: 12%; width: 13%; background: var(--jf-blue); }
.jf-art--id-blink .ja-4 { left: 58.5%; top: 37%; width: 14%; background: var(--jf-red); }
.jf-art--id-blink .ja-5 { left: 29%; top: 60%; width: 16%; height: 16%; background: var(--jf-black); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Guess the Movie: a frame of film strip holding a pixelated poster */
.jf-art--id-guess-the-movie { background: var(--jf-blue); }
.jf-art--id-guess-the-movie .ja-1 { left: 4%; top: 14%; width: 92%; height: 72%; background: var(--jf-black); rotate: -3deg; }
.jf-art--id-guess-the-movie .ja-2 { left: 4%; width: 5cqw; height: 5cqw; box-shadow: 10cqw 0 0 var(--jf-cream), 20cqw 0 0 var(--jf-cream), 30cqw 0 0 var(--jf-cream), 40cqw 0 0 var(--jf-cream), 50cqw 0 0 var(--jf-cream), 60cqw 0 0 var(--jf-cream), 70cqw 0 0 var(--jf-cream), 80cqw 0 0 var(--jf-cream); }
.jf-art--id-guess-the-movie .ja-2:nth-of-type(1) { top: 5%; } .jf-art--id-guess-the-movie .ja-2:nth-of-type(2) { bottom: 5%; }
.jf-art--id-guess-the-movie .ja-3 { left: 25%; top: 22%; width: 50%; height: 56%; background: var(--jf-blue); overflow: hidden; }
.jf-art--id-guess-the-movie .ja-4 { left: 50%; top: 0; width: 11.5cqw; height: 10cqw; background: var(--jf-yellow); box-shadow: -11.5cqw 10cqw 0 var(--jf-red), 0 10cqw 0 var(--jf-red), -23cqw 20cqw 0 var(--jf-cream), -11.5cqw 20cqw 0 var(--jf-red), 0 20cqw 0 var(--jf-red), 11.5cqw 20cqw 0 var(--jf-cream); }
.jf-art--id-guess-the-movie .ja-5 { left: 80%; top: 70%; width: 17%; background: var(--jf-yellow); font-size: 15cqh; }

/* Music Royalty Calculator: two beamed notes earning a £ */
.jf-art--id-music-royalty-calculator { background: var(--jf-yellow); }
.jf-art--id-music-royalty-calculator .ja-g { left: 66%; top: 86%; width: 30%; height: 8%; }
.jf-art--id-music-royalty-calculator .ja-1 { width: 20%; height: 20%; background: var(--jf-black); rotate: -16deg; }
.jf-art--id-music-royalty-calculator .ja-1:nth-of-type(2) { left: 12%; top: 62%; } .jf-art--id-music-royalty-calculator .ja-1:nth-of-type(3) { left: 44%; top: 54%; }
.jf-art--id-music-royalty-calculator .ja-2 { width: 4%; height: 56%; background: var(--jf-black); }
.jf-art--id-music-royalty-calculator .ja-2:nth-of-type(4) { left: 28%; top: 14%; } .jf-art--id-music-royalty-calculator .ja-2:nth-of-type(5) { left: 60%; top: 6%; }
.jf-art--id-music-royalty-calculator .ja-3 { left: 28%; top: 4%; width: 36%; height: 20%; background: var(--jf-black); clip-path: polygon(0 50%, 100% 0, 100% 50%, 0 100%); }
.jf-art--id-music-royalty-calculator .ja-4 { left: 69%; top: 50%; width: 26%; background: var(--jf-red); color: var(--jf-white); font-size: 22cqh; }

/* AI Water Converter: a drop falling into a glass of water */
.jf-art--id-ai-water-converter { background: var(--jf-red); }
.jf-art--id-ai-water-converter .ja-g { left: 22%; top: 88%; width: 56%; height: 8%; }
.jf-art--id-ai-water-converter .ja-1 { left: 30%; top: 44%; width: 40%; height: 46%; font-size: 11cqh; place-items: start center; padding-top: 3%; }
.jf-art--id-ai-water-converter .ja-2 { left: 0; top: 42%; width: 100%; height: 58%; background: var(--jf-blue); }
.jf-art--id-ai-water-converter .ja-drop { left: 41%; top: 1%; width: 18%; height: 36%; }

/* Password Generator: a padlock with a ★★★★ password */
.jf-art--id-password-generator { background: var(--jf-blue); }
.jf-art--id-password-generator .ja-g { left: 18%; top: 88%; width: 64%; height: 8%; }
.jf-art--id-password-generator .ja-1 { left: 32%; top: 4%; width: 36%; height: 44%; border: 5cqw solid var(--jf-black); border-bottom: 0; border-radius: 999px 999px 0 0; background: none; box-shadow: none; }
.jf-art--id-password-generator .ja-2 { left: 20%; top: 38%; width: 60%; height: 50%; background: var(--jf-yellow); }
.jf-art--id-password-generator .ja-3 { left: 44%; top: 14%; width: 12%; background: var(--jf-black); }
.jf-art--id-password-generator .ja-4 { left: 47%; top: 30%; width: 6%; height: 24%; background: var(--jf-black); }
.jf-art--id-password-generator .ja-5 { left: 9%; top: 64%; width: 82%; height: 26%; font-size: 9cqh; letter-spacing: .12em; box-shadow: var(--jf-sunken); }
@media (hover: hover) { .jf-card:hover .jf-art--id-password-generator .ja-hv, .jf-spot:hover .jf-art--id-password-generator .ja-hv { transform: translateY(-14%); } }

/* Colour Palette Picker: a fanned deck of paint swatches */
.jf-art--id-colour-palette-picker { background: var(--jf-black); }
.jf-art--id-colour-palette-picker .ja-1 { left: 37%; top: 18%; width: 26%; height: 72%; transform-origin: 50% 90%; }
.jf-art--id-colour-palette-picker .ja-1:nth-of-type(1) { rotate: -22deg; } .jf-art--id-colour-palette-picker .ja-1:nth-of-type(2) { rotate: 22deg; }
.jf-art--id-colour-palette-picker .ja-2 { left: 0; top: 0; width: 100%; height: 66%; }
.jf-art--id-colour-palette-picker .ja-1:nth-of-type(1) .ja-2 { background: var(--jf-red); }
.jf-art--id-colour-palette-picker .ja-1:nth-of-type(2) .ja-2 { background: var(--jf-blue); }
.jf-art--id-colour-palette-picker .ja-1:nth-of-type(3) .ja-2 { background: var(--jf-yellow); }
.jf-art--id-colour-palette-picker .ja-3 { left: 14%; top: 74%; width: 52%; height: 7%; background: var(--jf-black); }
.jf-art--id-colour-palette-picker .ja-4 { left: 46.5%; top: 79%; width: 7%; background: var(--jf-black); border-color: var(--jf-cream); box-shadow: none; }

/* Font Pairing Generator: a heavy heading "Aa" paired with a light body "Aa" */
.jf-art--id-font-pairing-generator { background: var(--jf-cream); }
.jf-art--id-font-pairing-generator .ja-g { left: 8%; top: 87%; width: 84%; height: 8%; }
.jf-art--id-font-pairing-generator .ja-1, .jf-art--id-font-pairing-generator .ja-3 { text-transform: none; }
.jf-art--id-font-pairing-generator .ja-1 { left: 6%; top: 8%; width: 50%; height: 68%; background: var(--jf-yellow); font-size: 28cqh; rotate: -5deg; place-items: start; padding: 6% 0 0 10%; }
.jf-art--id-font-pairing-generator .ja-2 { left: 44%; top: 26%; width: 50%; height: 64%; background: var(--jf-blue); }
.jf-art--id-font-pairing-generator .ja-3 { left: 0; top: 0; width: 100%; height: 60%; color: var(--jf-cream); font-weight: 300; font-size: 26cqh; }
.jf-art--id-font-pairing-generator .ja-4 { left: 14%; top: 62%; width: 72%; height: 7%; background: var(--jf-cream); box-shadow: 0 5cqw 0 var(--jf-cream); }

/* Job Title Inflator: a job-title balloon blown up to CEO */
.jf-art--id-job-title-inflator { background: var(--jf-yellow); }
.jf-art--id-job-title-inflator .ja-g { left: 38%; top: 90%; width: 24%; height: 6%; }
.jf-art--id-job-title-inflator .ja-1 { left: 49.2%; top: 62%; width: 1.6%; height: 30%; background: var(--jf-black); }
.jf-art--id-job-title-inflator .ja-2 { left: 45%; top: 57%; width: 10%; height: 9%; background: var(--jf-red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.jf-art--id-job-title-inflator .ja-3 { left: 27%; top: 1%; width: 46%; height: 59%; background: var(--jf-red); color: var(--jf-cream); font-size: 15cqh; }
.jf-art--id-job-title-inflator .ja-4 { top: 14%; width: 14%; height: 20%; font-size: 15cqh; }
.jf-art--id-job-title-inflator .ja-4:nth-of-type(5) { left: 8%; top: 40%; } .jf-art--id-job-title-inflator .ja-4:nth-of-type(6) { left: 78%; top: 40%; }

/* Corporate Jargon Translator: a blunt "NO" bubble → a long corporate bubble */
.jf-art--id-corporate-jargon-translator { background: var(--jf-red); }
.jf-art--id-corporate-jargon-translator .ja-1 { left: 4%; top: 10%; width: 34%; height: 32%; font-size: 15cqh; }
.jf-art--id-corporate-jargon-translator .ja-2 { left: 16%; top: 100%; width: 30%; height: 36%; clip-path: polygon(0 0, 100% 0, 0 100%); }
.jf-art--id-corporate-jargon-translator .ja-3 { left: 37%; top: 12%; width: 16%; height: 26%; color: var(--jf-cream); font-size: 26cqh; }
.jf-art--id-corporate-jargon-translator .ja-4 { left: 46%; top: 30%; width: 50%; height: 52%; background: var(--jf-blue); }
.jf-art--id-corporate-jargon-translator .ja-5 { left: 12%; height: 12%; background: var(--jf-cream); }
.jf-art--id-corporate-jargon-translator .ja-5:nth-of-type(1) { top: 16%; width: 76%; } .jf-art--id-corporate-jargon-translator .ja-5:nth-of-type(2) { top: 42%; width: 58%; } .jf-art--id-corporate-jargon-translator .ja-5:nth-of-type(3) { top: 68%; width: 70%; }
.jf-art--id-corporate-jargon-translator .ja-6 { left: 68%; top: 100%; width: 20%; height: 24%; background: var(--jf-blue); clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* UK Inflation Time Machine: a clock and a £ price tag with prices going ▲ */
.jf-art--id-uk-inflation-time-machine { background: var(--jf-blue); }
.jf-art--id-uk-inflation-time-machine .ja-g { left: 4%; top: 86%; width: 56%; height: 9%; }
.jf-art--id-uk-inflation-time-machine .ja-1 { left: 6%; top: 8%; width: 50%; }
.jf-art--id-uk-inflation-time-machine .ja-2 { left: 46%; width: 8%; background: var(--jf-black); transform-origin: 50% 100%; }
.jf-art--id-uk-inflation-time-machine .ja-2:nth-of-type(1) { top: 22%; height: 28%; rotate: -50deg; } .jf-art--id-uk-inflation-time-machine .ja-2:nth-of-type(2) { top: 10%; height: 40%; rotate: 20deg; width: 6%; left: 47%; }
.jf-art--id-uk-inflation-time-machine .ja-3 { left: 42%; top: 42%; width: 16%; background: var(--jf-red); }
.jf-art--id-uk-inflation-time-machine .ja-4 { left: 50%; top: 42%; width: 42%; height: 38%; background: var(--jf-yellow); font-size: 22cqh; rotate: -12deg; padding-left: 10%; }
.jf-art--id-uk-inflation-time-machine .ja-5 { left: 8%; top: 38%; width: 12%; background: var(--jf-blue); }
.jf-art--id-uk-inflation-time-machine .ja-6 { left: 62%; top: 14%; width: 16%; height: 26%; color: var(--jf-cream); font-size: 20cqh; }

/* AI Footprint Estimator: an AI server, a bolt of electricity and a drop of water */
.jf-art--id-ai-footprint-estimator { background: var(--jf-black); }
.jf-art--id-ai-footprint-estimator .ja-1 { left: 8%; top: 20%; width: 48%; height: 66%; background: var(--jf-blue); color: var(--jf-cream); font-size: 15cqh; place-items: end center; padding-bottom: 8%; }
.jf-art--id-ai-footprint-estimator .ja-2 { left: 10%; top: 12%; width: 80%; height: 14%; background: var(--jf-cream); box-shadow: 0 13cqw 0 var(--jf-cream); }
.jf-art--id-ai-footprint-estimator .ja-3 { left: 74%; top: 15%; width: 8%; background: var(--jf-red); box-shadow: 0 13cqw 0 var(--jf-good); }
.jf-art--id-ai-footprint-estimator .ja-4 { left: 44%; top: 10%; width: 34%; height: 78%; background: var(--jf-yellow); clip-path: polygon(60% 0, 8% 58%, 44% 58%, 28% 100%, 92% 40%, 56% 40%, 78% 0); }
.jf-art--id-ai-footprint-estimator .ja-drop { left: 80%; top: 56%; width: 12%; height: 24%; }

/* Am I Rich?: the UK pay curve with a ▼ marker on one bar */
.jf-art--id-am-i-rich { background: var(--jf-red); }
.jf-art--id-am-i-rich .ja-1 { width: 11%; bottom: 10%; }
.jf-art--id-am-i-rich .ja-1:nth-of-type(1) { left: 5%; height: 14%; } .jf-art--id-am-i-rich .ja-1:nth-of-type(2) { left: 18%; height: 32%; } .jf-art--id-am-i-rich .ja-1:nth-of-type(3) { left: 31%; height: 52%; } .jf-art--id-am-i-rich .ja-1:nth-of-type(4) { left: 44%; height: 62%; }
.jf-art--id-am-i-rich .ja-1:nth-of-type(5) { left: 57%; height: 46%; background: var(--jf-yellow); } .jf-art--id-am-i-rich .ja-1:nth-of-type(6) { left: 70%; height: 28%; } .jf-art--id-am-i-rich .ja-1:nth-of-type(7) { left: 83%; height: 14%; }
.jf-art--id-am-i-rich .ja-2 { left: 2%; top: 89%; width: 96%; height: 4%; background: var(--jf-black); }
.jf-art--id-am-i-rich .ja-3 { left: 55%; top: 16%; width: 15%; background: var(--jf-black); color: var(--jf-cream); font-size: 12cqh; }

/* Colour Contrast Checker: dark-on-yellow passes ✓, blue-on-black fails ✗ */
.jf-art--id-colour-contrast-checker { background: var(--jf-blue); }
.jf-art--id-colour-contrast-checker .ja-g { left: 4%; top: 89%; width: 92%; height: 8%; }
.jf-art--id-colour-contrast-checker .ja-1, .jf-art--id-colour-contrast-checker .ja-2 { width: 42%; height: 60%; font-size: 24cqh; text-transform: none; }
.jf-art--id-colour-contrast-checker .ja-1 { left: 6%; top: 10%; background: var(--jf-yellow); }
.jf-art--id-colour-contrast-checker .ja-2 { left: 52%; top: 30%; background: var(--jf-black); color: var(--jf-blue); }
.jf-art--id-colour-contrast-checker .ja-3, .jf-art--id-colour-contrast-checker .ja-4 { width: 18%; color: var(--jf-white); font-size: 14cqh; }
.jf-art--id-colour-contrast-checker .ja-3 { left: 1%; top: 2%; background: var(--jf-good); }
.jf-art--id-colour-contrast-checker .ja-4 { left: 80%; top: 72%; background: var(--jf-red); }