/* ╔═══════════════════════════════════════════════════════════════╗
   ║  GENERATED FILE — DO NOT EDIT BY HAND                         ║
   ║  Written by build.js from data/prints.json.                    ║
   ║  Any edit here is lost the next time you run the build.        ║
   ║  To change a print, edit the JSON. To change the LOOK of the   ║
   ║  selected state, edit the LIT_* constants in build.js.         ║
   ║  23 prints                                                    ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ---- default state: nothing targeted, print 1 on the easel ---- */
.line:not(:has(.stub:target)) [data-panel="1"] { display: block; animation: sw-n 0.4s ease both; }
.line:not(:has(.stub:target)) .line-track { transform: translateX(-97.9em); }
.line:not(:has(.stub:target)) .peg[data-i="1"] { opacity: 1; transform: rotate(0deg) scale(1.12); z-index: 6; background: #f2ece0; box-shadow: 0 1.1em 2em rgba(0,0,0,0.75), 0 0 2em rgba(255,45,45,0.4); }
.line:not(:has(.stub:target)) .peg[data-i="1"] .pgf img { filter: brightness(1) contrast(1.05) saturate(1.05); }
.line:not(:has(.stub:target)) .peg[data-i="1"] .pgclip { filter: brightness(1.35) sepia(0.6) hue-rotate(-30deg) saturate(3); }
.line:not(:has(.stub:target)) .peg[data-i="1"] .pgc { color: #1c1013; display: block; }

/* ---- arrived forward: the print swipes in from the right ---- */
.line:has(#f1:target) [data-panel="1"],
.line:has(#f2:target) [data-panel="2"],
.line:has(#f3:target) [data-panel="3"],
.line:has(#f4:target) [data-panel="4"],
.line:has(#f5:target) [data-panel="5"],
.line:has(#f6:target) [data-panel="6"],
.line:has(#f7:target) [data-panel="7"],
.line:has(#f8:target) [data-panel="8"],
.line:has(#f9:target) [data-panel="9"],
.line:has(#f10:target) [data-panel="10"],
.line:has(#f11:target) [data-panel="11"],
.line:has(#f12:target) [data-panel="12"],
.line:has(#f13:target) [data-panel="13"],
.line:has(#f14:target) [data-panel="14"],
.line:has(#f15:target) [data-panel="15"],
.line:has(#f16:target) [data-panel="16"],
.line:has(#f17:target) [data-panel="17"],
.line:has(#f18:target) [data-panel="18"],
.line:has(#f19:target) [data-panel="19"],
.line:has(#f20:target) [data-panel="20"],
.line:has(#f21:target) [data-panel="21"],
.line:has(#f22:target) [data-panel="22"],
.line:has(#f23:target) [data-panel="23"] { display: block; animation: sw-f 0.5s cubic-bezier(0.3,0.9,0.3,1) both; }

/* ---- arrived backward: it swipes in from the left ---- */
.line:has(#b1:target) [data-panel="1"],
.line:has(#b2:target) [data-panel="2"],
.line:has(#b3:target) [data-panel="3"],
.line:has(#b4:target) [data-panel="4"],
.line:has(#b5:target) [data-panel="5"],
.line:has(#b6:target) [data-panel="6"],
.line:has(#b7:target) [data-panel="7"],
.line:has(#b8:target) [data-panel="8"],
.line:has(#b9:target) [data-panel="9"],
.line:has(#b10:target) [data-panel="10"],
.line:has(#b11:target) [data-panel="11"],
.line:has(#b12:target) [data-panel="12"],
.line:has(#b13:target) [data-panel="13"],
.line:has(#b14:target) [data-panel="14"],
.line:has(#b15:target) [data-panel="15"],
.line:has(#b16:target) [data-panel="16"],
.line:has(#b17:target) [data-panel="17"],
.line:has(#b18:target) [data-panel="18"],
.line:has(#b19:target) [data-panel="19"],
.line:has(#b20:target) [data-panel="20"],
.line:has(#b21:target) [data-panel="21"],
.line:has(#b22:target) [data-panel="22"],
.line:has(#b23:target) [data-panel="23"] { display: block; animation: sw-b 0.5s cubic-bezier(0.3,0.9,0.3,1) both; }

/* ---- pan the wire so the selection sits dead centre ---- */
/* offset = 5.5 + 13.2 * (7 + index) */
.line:has(#f1:target) .line-track, .line:has(#b1:target) .line-track { transform: translateX(-97.9em); }
.line:has(#f2:target) .line-track, .line:has(#b2:target) .line-track { transform: translateX(-111.1em); }
.line:has(#f3:target) .line-track, .line:has(#b3:target) .line-track { transform: translateX(-124.3em); }
.line:has(#f4:target) .line-track, .line:has(#b4:target) .line-track { transform: translateX(-137.5em); }
.line:has(#f5:target) .line-track, .line:has(#b5:target) .line-track { transform: translateX(-150.7em); }
.line:has(#f6:target) .line-track, .line:has(#b6:target) .line-track { transform: translateX(-163.9em); }
.line:has(#f7:target) .line-track, .line:has(#b7:target) .line-track { transform: translateX(-177.1em); }
.line:has(#f8:target) .line-track, .line:has(#b8:target) .line-track { transform: translateX(-190.3em); }
.line:has(#f9:target) .line-track, .line:has(#b9:target) .line-track { transform: translateX(-203.5em); }
.line:has(#f10:target) .line-track, .line:has(#b10:target) .line-track { transform: translateX(-216.7em); }
.line:has(#f11:target) .line-track, .line:has(#b11:target) .line-track { transform: translateX(-229.9em); }
.line:has(#f12:target) .line-track, .line:has(#b12:target) .line-track { transform: translateX(-243.1em); }
.line:has(#f13:target) .line-track, .line:has(#b13:target) .line-track { transform: translateX(-256.3em); }
.line:has(#f14:target) .line-track, .line:has(#b14:target) .line-track { transform: translateX(-269.5em); }
.line:has(#f15:target) .line-track, .line:has(#b15:target) .line-track { transform: translateX(-282.7em); }
.line:has(#f16:target) .line-track, .line:has(#b16:target) .line-track { transform: translateX(-295.9em); }
.line:has(#f17:target) .line-track, .line:has(#b17:target) .line-track { transform: translateX(-309.1em); }
.line:has(#f18:target) .line-track, .line:has(#b18:target) .line-track { transform: translateX(-322.3em); }
.line:has(#f19:target) .line-track, .line:has(#b19:target) .line-track { transform: translateX(-335.5em); }
.line:has(#f20:target) .line-track, .line:has(#b20:target) .line-track { transform: translateX(-348.7em); }
.line:has(#f21:target) .line-track, .line:has(#b21:target) .line-track { transform: translateX(-361.9em); }
.line:has(#f22:target) .line-track, .line:has(#b22:target) .line-track { transform: translateX(-375.1em); }
.line:has(#f23:target) .line-track, .line:has(#b23:target) .line-track { transform: translateX(-388.3em); }

/* ---- the selected print, fully developed ---- */
.line:has(#f1:target) .peg[data-i="1"],
.line:has(#b1:target) .peg[data-i="1"],
.line:has(#f2:target) .peg[data-i="2"],
.line:has(#b2:target) .peg[data-i="2"],
.line:has(#f3:target) .peg[data-i="3"],
.line:has(#b3:target) .peg[data-i="3"],
.line:has(#f4:target) .peg[data-i="4"],
.line:has(#b4:target) .peg[data-i="4"],
.line:has(#f5:target) .peg[data-i="5"],
.line:has(#b5:target) .peg[data-i="5"],
.line:has(#f6:target) .peg[data-i="6"],
.line:has(#b6:target) .peg[data-i="6"],
.line:has(#f7:target) .peg[data-i="7"],
.line:has(#b7:target) .peg[data-i="7"],
.line:has(#f8:target) .peg[data-i="8"],
.line:has(#b8:target) .peg[data-i="8"],
.line:has(#f9:target) .peg[data-i="9"],
.line:has(#b9:target) .peg[data-i="9"],
.line:has(#f10:target) .peg[data-i="10"],
.line:has(#b10:target) .peg[data-i="10"],
.line:has(#f11:target) .peg[data-i="11"],
.line:has(#b11:target) .peg[data-i="11"],
.line:has(#f12:target) .peg[data-i="12"],
.line:has(#b12:target) .peg[data-i="12"],
.line:has(#f13:target) .peg[data-i="13"],
.line:has(#b13:target) .peg[data-i="13"],
.line:has(#f14:target) .peg[data-i="14"],
.line:has(#b14:target) .peg[data-i="14"],
.line:has(#f15:target) .peg[data-i="15"],
.line:has(#b15:target) .peg[data-i="15"],
.line:has(#f16:target) .peg[data-i="16"],
.line:has(#b16:target) .peg[data-i="16"],
.line:has(#f17:target) .peg[data-i="17"],
.line:has(#b17:target) .peg[data-i="17"],
.line:has(#f18:target) .peg[data-i="18"],
.line:has(#b18:target) .peg[data-i="18"],
.line:has(#f19:target) .peg[data-i="19"],
.line:has(#b19:target) .peg[data-i="19"],
.line:has(#f20:target) .peg[data-i="20"],
.line:has(#b20:target) .peg[data-i="20"],
.line:has(#f21:target) .peg[data-i="21"],
.line:has(#b21:target) .peg[data-i="21"],
.line:has(#f22:target) .peg[data-i="22"],
.line:has(#b22:target) .peg[data-i="22"],
.line:has(#f23:target) .peg[data-i="23"],
.line:has(#b23:target) .peg[data-i="23"] { opacity: 1; transform: rotate(0deg) scale(1.12); z-index: 6; background: #f2ece0; box-shadow: 0 1.1em 2em rgba(0,0,0,0.75), 0 0 2em rgba(255,45,45,0.4); }

.line:has(#f1:target) .peg[data-i="1"] .pgf img,
.line:has(#b1:target) .peg[data-i="1"] .pgf img,
.line:has(#f2:target) .peg[data-i="2"] .pgf img,
.line:has(#b2:target) .peg[data-i="2"] .pgf img,
.line:has(#f3:target) .peg[data-i="3"] .pgf img,
.line:has(#b3:target) .peg[data-i="3"] .pgf img,
.line:has(#f4:target) .peg[data-i="4"] .pgf img,
.line:has(#b4:target) .peg[data-i="4"] .pgf img,
.line:has(#f5:target) .peg[data-i="5"] .pgf img,
.line:has(#b5:target) .peg[data-i="5"] .pgf img,
.line:has(#f6:target) .peg[data-i="6"] .pgf img,
.line:has(#b6:target) .peg[data-i="6"] .pgf img,
.line:has(#f7:target) .peg[data-i="7"] .pgf img,
.line:has(#b7:target) .peg[data-i="7"] .pgf img,
.line:has(#f8:target) .peg[data-i="8"] .pgf img,
.line:has(#b8:target) .peg[data-i="8"] .pgf img,
.line:has(#f9:target) .peg[data-i="9"] .pgf img,
.line:has(#b9:target) .peg[data-i="9"] .pgf img,
.line:has(#f10:target) .peg[data-i="10"] .pgf img,
.line:has(#b10:target) .peg[data-i="10"] .pgf img,
.line:has(#f11:target) .peg[data-i="11"] .pgf img,
.line:has(#b11:target) .peg[data-i="11"] .pgf img,
.line:has(#f12:target) .peg[data-i="12"] .pgf img,
.line:has(#b12:target) .peg[data-i="12"] .pgf img,
.line:has(#f13:target) .peg[data-i="13"] .pgf img,
.line:has(#b13:target) .peg[data-i="13"] .pgf img,
.line:has(#f14:target) .peg[data-i="14"] .pgf img,
.line:has(#b14:target) .peg[data-i="14"] .pgf img,
.line:has(#f15:target) .peg[data-i="15"] .pgf img,
.line:has(#b15:target) .peg[data-i="15"] .pgf img,
.line:has(#f16:target) .peg[data-i="16"] .pgf img,
.line:has(#b16:target) .peg[data-i="16"] .pgf img,
.line:has(#f17:target) .peg[data-i="17"] .pgf img,
.line:has(#b17:target) .peg[data-i="17"] .pgf img,
.line:has(#f18:target) .peg[data-i="18"] .pgf img,
.line:has(#b18:target) .peg[data-i="18"] .pgf img,
.line:has(#f19:target) .peg[data-i="19"] .pgf img,
.line:has(#b19:target) .peg[data-i="19"] .pgf img,
.line:has(#f20:target) .peg[data-i="20"] .pgf img,
.line:has(#b20:target) .peg[data-i="20"] .pgf img,
.line:has(#f21:target) .peg[data-i="21"] .pgf img,
.line:has(#b21:target) .peg[data-i="21"] .pgf img,
.line:has(#f22:target) .peg[data-i="22"] .pgf img,
.line:has(#b22:target) .peg[data-i="22"] .pgf img,
.line:has(#f23:target) .peg[data-i="23"] .pgf img,
.line:has(#b23:target) .peg[data-i="23"] .pgf img { filter: brightness(1) contrast(1.05) saturate(1.05); }

.line:has(#f1:target) .peg[data-i="1"] .pgclip,
.line:has(#b1:target) .peg[data-i="1"] .pgclip,
.line:has(#f2:target) .peg[data-i="2"] .pgclip,
.line:has(#b2:target) .peg[data-i="2"] .pgclip,
.line:has(#f3:target) .peg[data-i="3"] .pgclip,
.line:has(#b3:target) .peg[data-i="3"] .pgclip,
.line:has(#f4:target) .peg[data-i="4"] .pgclip,
.line:has(#b4:target) .peg[data-i="4"] .pgclip,
.line:has(#f5:target) .peg[data-i="5"] .pgclip,
.line:has(#b5:target) .peg[data-i="5"] .pgclip,
.line:has(#f6:target) .peg[data-i="6"] .pgclip,
.line:has(#b6:target) .peg[data-i="6"] .pgclip,
.line:has(#f7:target) .peg[data-i="7"] .pgclip,
.line:has(#b7:target) .peg[data-i="7"] .pgclip,
.line:has(#f8:target) .peg[data-i="8"] .pgclip,
.line:has(#b8:target) .peg[data-i="8"] .pgclip,
.line:has(#f9:target) .peg[data-i="9"] .pgclip,
.line:has(#b9:target) .peg[data-i="9"] .pgclip,
.line:has(#f10:target) .peg[data-i="10"] .pgclip,
.line:has(#b10:target) .peg[data-i="10"] .pgclip,
.line:has(#f11:target) .peg[data-i="11"] .pgclip,
.line:has(#b11:target) .peg[data-i="11"] .pgclip,
.line:has(#f12:target) .peg[data-i="12"] .pgclip,
.line:has(#b12:target) .peg[data-i="12"] .pgclip,
.line:has(#f13:target) .peg[data-i="13"] .pgclip,
.line:has(#b13:target) .peg[data-i="13"] .pgclip,
.line:has(#f14:target) .peg[data-i="14"] .pgclip,
.line:has(#b14:target) .peg[data-i="14"] .pgclip,
.line:has(#f15:target) .peg[data-i="15"] .pgclip,
.line:has(#b15:target) .peg[data-i="15"] .pgclip,
.line:has(#f16:target) .peg[data-i="16"] .pgclip,
.line:has(#b16:target) .peg[data-i="16"] .pgclip,
.line:has(#f17:target) .peg[data-i="17"] .pgclip,
.line:has(#b17:target) .peg[data-i="17"] .pgclip,
.line:has(#f18:target) .peg[data-i="18"] .pgclip,
.line:has(#b18:target) .peg[data-i="18"] .pgclip,
.line:has(#f19:target) .peg[data-i="19"] .pgclip,
.line:has(#b19:target) .peg[data-i="19"] .pgclip,
.line:has(#f20:target) .peg[data-i="20"] .pgclip,
.line:has(#b20:target) .peg[data-i="20"] .pgclip,
.line:has(#f21:target) .peg[data-i="21"] .pgclip,
.line:has(#b21:target) .peg[data-i="21"] .pgclip,
.line:has(#f22:target) .peg[data-i="22"] .pgclip,
.line:has(#b22:target) .peg[data-i="22"] .pgclip,
.line:has(#f23:target) .peg[data-i="23"] .pgclip,
.line:has(#b23:target) .peg[data-i="23"] .pgclip { filter: brightness(1.35) sepia(0.6) hue-rotate(-30deg) saturate(3); }

/* re-shows the caption the mobile breakpoint hides — these carry
   an id inside :has(), so they out-specify it on specificity. */
.line:has(#f1:target) .peg[data-i="1"] .pgc,
.line:has(#b1:target) .peg[data-i="1"] .pgc,
.line:has(#f2:target) .peg[data-i="2"] .pgc,
.line:has(#b2:target) .peg[data-i="2"] .pgc,
.line:has(#f3:target) .peg[data-i="3"] .pgc,
.line:has(#b3:target) .peg[data-i="3"] .pgc,
.line:has(#f4:target) .peg[data-i="4"] .pgc,
.line:has(#b4:target) .peg[data-i="4"] .pgc,
.line:has(#f5:target) .peg[data-i="5"] .pgc,
.line:has(#b5:target) .peg[data-i="5"] .pgc,
.line:has(#f6:target) .peg[data-i="6"] .pgc,
.line:has(#b6:target) .peg[data-i="6"] .pgc,
.line:has(#f7:target) .peg[data-i="7"] .pgc,
.line:has(#b7:target) .peg[data-i="7"] .pgc,
.line:has(#f8:target) .peg[data-i="8"] .pgc,
.line:has(#b8:target) .peg[data-i="8"] .pgc,
.line:has(#f9:target) .peg[data-i="9"] .pgc,
.line:has(#b9:target) .peg[data-i="9"] .pgc,
.line:has(#f10:target) .peg[data-i="10"] .pgc,
.line:has(#b10:target) .peg[data-i="10"] .pgc,
.line:has(#f11:target) .peg[data-i="11"] .pgc,
.line:has(#b11:target) .peg[data-i="11"] .pgc,
.line:has(#f12:target) .peg[data-i="12"] .pgc,
.line:has(#b12:target) .peg[data-i="12"] .pgc,
.line:has(#f13:target) .peg[data-i="13"] .pgc,
.line:has(#b13:target) .peg[data-i="13"] .pgc,
.line:has(#f14:target) .peg[data-i="14"] .pgc,
.line:has(#b14:target) .peg[data-i="14"] .pgc,
.line:has(#f15:target) .peg[data-i="15"] .pgc,
.line:has(#b15:target) .peg[data-i="15"] .pgc,
.line:has(#f16:target) .peg[data-i="16"] .pgc,
.line:has(#b16:target) .peg[data-i="16"] .pgc,
.line:has(#f17:target) .peg[data-i="17"] .pgc,
.line:has(#b17:target) .peg[data-i="17"] .pgc,
.line:has(#f18:target) .peg[data-i="18"] .pgc,
.line:has(#b18:target) .peg[data-i="18"] .pgc,
.line:has(#f19:target) .peg[data-i="19"] .pgc,
.line:has(#b19:target) .peg[data-i="19"] .pgc,
.line:has(#f20:target) .peg[data-i="20"] .pgc,
.line:has(#b20:target) .peg[data-i="20"] .pgc,
.line:has(#f21:target) .peg[data-i="21"] .pgc,
.line:has(#b21:target) .peg[data-i="21"] .pgc,
.line:has(#f22:target) .peg[data-i="22"] .pgc,
.line:has(#b22:target) .peg[data-i="22"] .pgc,
.line:has(#f23:target) .peg[data-i="23"] .pgc,
.line:has(#b23:target) .peg[data-i="23"] .pgc { color: #1c1013; display: block; }