/* Challenge 2 · BLADES: A Natural History (scope everything under #run2) */
#run2 { background: #0B1120; font-family: 'Inter', sans-serif; color: #fff; }
#run2 .c2-full { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
#run2 canvas.c2-full { pointer-events: none; }
#run2 .c2-scene { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; visibility: hidden; opacity: 0; }
#run2 .c2-over { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; visibility: hidden; opacity: 0; }

/* title */
#run2 .c2-title { position: absolute; left: 0; top: 300px; width: 1920px; text-align: center; visibility: hidden; opacity: 0; }
#run2 .c2-title .t1 { font: 500 196px/1 'Cormorant', serif; letter-spacing: .34em; padding-left: .34em; color: #FBF1E6; text-shadow: 0 6px 40px rgba(20,24,44,.35); white-space: nowrap; }
#run2 .c2-title .t2 { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 34px; font: italic 400 66px/1.1 'Cormorant', serif; color: #F7DCC2; white-space: nowrap; }
#run2 .c2-title .hl { display: block; width: 150px; height: 2px; background: rgba(247,220,194,.75); }
#run2 .c2-title .hl.l { transform-origin: 100% 50%; }
#run2 .c2-title .hl.r { transform-origin: 0 50%; }

/* field-guide tag */
#run2 .c2-tag { position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; will-change: transform; }
#run2 .c2-tag .card { position: relative; background: rgba(245,237,224,.95); color: #231D18; padding: 18px 34px 20px 30px; box-shadow: 0 14px 40px rgba(10,14,28,.35); }
#run2 .c2-tag .card::before { content: ''; position: absolute; inset: 7px; border: 1.5px solid rgba(60,45,30,.35); pointer-events: none; }
#run2 .c2-tag .nm { position: relative; font: italic 600 74px/1.08 'Cormorant', serif; white-space: nowrap; height: 82px; }
#run2 .c2-tag .nm .g { display: inline-block; }
#run2 .c2-tag .nm .sw { position: relative; display: inline-block; vertical-align: top; height: 82px; overflow: hidden; contain: paint; padding-right: 8px; box-sizing: content-box; }
#run2 .c2-tag .nm .sp { display: inline-block; white-space: nowrap; }
#run2 .c2-tag .nm .sp2 { position: absolute; left: 0; top: 0; }
#run2 .c2-tag .nm .strike { position: absolute; left: -4px; width: 10px; top: 44px; height: 4px; background: #B5262B; transform-origin: 0 50%; transform: scaleX(0); }
#run2 .c2-tag .cap { position: relative; contain: paint; margin-top: 6px; height: 34px; overflow: hidden; font: 600 26px/34px 'Inter', sans-serif; letter-spacing: .06em; color: #5A4A3C; white-space: nowrap; }
#run2 .c2-tag .cap span { display: inline-block; white-space: nowrap; }
#run2 .c2-tag .cap .k2 { position: absolute; left: 0; top: 0; }
#run2 .c2-tag .chip { position: absolute; right: -22px; top: -26px; width: 104px; height: 52px; perspective: 400px; }
#run2 .c2-tag .chip b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #1C2742; color: #F5E6D2; font: 700 26px/1 'Inter', sans-serif; letter-spacing: .12em; backface-visibility: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
#run2 .c2-tag .chip b.sun { background: #E8A869; color: #1C2742; transform: rotateX(180deg); }
#run2 .c2-tag .chip .flip { position: absolute; inset: 0; transform-style: preserve-3d; }

/* plate */
#run2 .c2-plate .card { position: absolute; left: 200px; top: 182px; width: 1520px; height: 766px; }
#run2 .c2-ptxt { position: absolute; color: #2A2119; white-space: nowrap; }
#run2 .c2-ptxt.hd { font: 600 26px/1 'Inter', sans-serif; letter-spacing: .2em; color: #6E5A45; }
#run2 .c2-ptxt.ti { font: italic 600 100px/1 'Cormorant', serif; }
#run2 .c2-ptxt.su { font: 600 26px/1 'Inter', sans-serif; letter-spacing: .12em; color: #6E5A45; }
#run2 .c2-ptxt.an { font: 600 62px/1 'Cormorant', serif; }
#run2 .c2-ptxt.an small { display: block; margin-top: 12px; font: 600 28px/1 'Inter', sans-serif; letter-spacing: .04em; color: #1E6B43; }
#run2 .c2-ptxt.an.red { color: #B8242B; font-style: italic; font-size: 70px; }
#run2 .c2-ptxt.an.red small { color: #B8242B; }
#run2 .c2-ptxt .mk { display: block; overflow: hidden; clip-path: inset(0 -30px -10px -10px); padding-bottom: 6px; }

/* rhyme labels */
#run2 .c2-rl { position: absolute; white-space: nowrap; font: 600 28px/1 'Inter', sans-serif; letter-spacing: .14em; color: #9FB3CF; }
#run2 .c2-rt { position: absolute; left: 0; width: 1920px; text-align: center; font: italic 500 84px/1 'Cormorant', serif; color: #F3E6D6; }

/* explainer */
#run2 .c2-ex { position: absolute; color: #0A1424; white-space: nowrap; }
#run2 .c2-ex.h { left: 150px; top: 196px; font: 800 124px/1 'Inter', sans-serif; letter-spacing: -.045em; }
#run2 .c2-ex.h .w { padding-bottom: 8px; }
#run2 .c2-ex.row { left: 290px; font: 700 66px/1 'Inter', sans-serif; letter-spacing: -.03em; }
#run2 .c2-ex.row .num { color: #D21E26; font-variant-numeric: tabular-nums; }
#run2 .c2-ex.src { left: 152px; top: 884px; font: 500 26px/1 'Inter', sans-serif; color: #3D506A; letter-spacing: .01em; }
#run2 .c2-ex .mk { display: block; overflow: hidden; clip-path: inset(-10px -40px -14px -10px); }

/* rink */
#run2 .c2-rinkCam { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 30%; }
#run2 .c2-rinkPlane { position: absolute; left: 60px; top: 150px; width: 1800px; height: 780px; transform-style: preserve-3d; transform-origin: 50% 50%; }
#run2 .c2-rinkPlane > svg { position: absolute; left: 0; top: 0; width: 1800px; height: 780px; overflow: visible; }
#run2 .c2-wall { position: absolute; left: 240px; top: -96px; width: 1320px; height: 96px; transform-origin: 50% 100%; transform: rotateX(-90deg); transform-style: preserve-3d; display: flex; gap: 8px; padding: 0 6px; background: #0E1830; border-top: 6px solid #DDE3EA; }
#run2 .c2-wall .ad { flex: 1; position: relative; transform-style: preserve-3d; }
#run2 .c2-wall .ad i { position: absolute; inset: 6px 0 8px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; font: italic 900 54px/1 'Inter', sans-serif; letter-spacing: -.05em; }
#run2 .c2-wall .ad i.a { background: #12264A; color: #2C4778; }
#run2 .c2-wall .ad i.b { background: #F6F7F9; color: #E21F26; transform: rotateX(180deg); }
#run2 .c2-wall .ad .fl { position: absolute; inset: 0; transform-style: preserve-3d; }
#run2 .c2-cap8 { position: absolute; left: 150px; top: 896px; padding: 16px 28px; background: #F4F7FA; color: #0A1424; font: 700 44px/1 'Inter', sans-serif; letter-spacing: -.02em; white-space: nowrap; }

/* X + finish */
#run2 .c2-xt { position: absolute; left: 0; top: 862px; width: 1920px; text-align: center; font: italic 500 92px/1.1 'Cormorant', serif; color: #FBEFE2; white-space: nowrap; }
#run2 .c2-vix { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; visibility: hidden; opacity: 0; }
#run2 .c2-vix .wm { position: absolute; left: 0; width: 1920px; top: 284px; text-align: center; font: italic 900 330px/1 'Inter', sans-serif; letter-spacing: -.06em; padding-right: .06em; color: #E21F26; text-shadow: 0 18px 60px rgba(4,8,20,.55); }
#run2 .c2-vix .gl { color: #FFF4E8; text-shadow: none; -webkit-mask-image: linear-gradient(105deg, transparent 0 46%, rgba(0,0,0,.8) 49% 51%, transparent 54% 100%); mask-image: linear-gradient(105deg, transparent 0 46%, rgba(0,0,0,.8) 49% 51%, transparent 54% 100%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* letterbox + vignette */
#run2 .c2-lb { position: absolute; left: 0; width: 1920px; height: 110px; background: #04060B; z-index: 30; visibility: hidden; }
#run2 .c2-lb.t { top: 0; }
#run2 .c2-lb.b { top: 970px; }
#run2 .c2-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(4,6,14,.42) 100%); visibility: hidden; opacity: 0; }

/* field-photo prints (only shown when the photo files exist) */
#run2 .c2-print { position: absolute; left: 0; top: 0; width: 424px; height: 292px; padding: 12px 12px 0; background: #F3ECDF; box-shadow: 0 22px 46px rgba(5,8,18,.48), 0 2px 5px rgba(5,8,18,.3); visibility: hidden; opacity: 0; }
#run2 .c2-print .ph, #run2 .pr-van .fc .ph { position: relative; width: 400px; height: 225px; background: #2A2F3A center / cover no-repeat; filter: contrast(1.06) saturate(.8) sepia(.16) brightness(1.02); }
#run2 .c2-print .ph::after, #run2 .pr-van .fc .ph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 55%, rgba(34,22,10,.34) 100%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .22 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
#run2 .c2-print .pc { position: absolute; left: 20px; bottom: 11px; font: italic 600 31px/1 'Cormorant', serif; color: #3A2E24; white-space: nowrap; }
#run2 .c2-print .tape { position: absolute; top: -15px; left: 50%; width: 132px; height: 34px; margin-left: -66px; background: rgba(238,229,205,.8); transform: rotate(-3deg); box-shadow: 0 1px 3px rgba(0,0,0,.18); z-index: 2; }
#run2 .pr-van { background: none; box-shadow: none; padding: 0; perspective: 1400px; }
#run2 .pr-van .flp { position: absolute; inset: 0; transform-style: preserve-3d; }
#run2 .pr-van .fc { position: absolute; inset: 0; padding: 12px 12px 0; background: #F3ECDF; box-shadow: 0 22px 46px rgba(5,8,18,.48), 0 2px 5px rgba(5,8,18,.3); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#run2 .pr-van .fc.b { transform: rotateY(180deg); }
#run2 .pr-babson { z-index: 3; }
#run2 .c2-cap8 { z-index: 4; }
#run2 .pr-babson .pc { font: 700 30px/1 'Inter', sans-serif; font-style: normal; letter-spacing: -.02em; color: #0A1424; bottom: 14px; }