/* Halloween theme (content/seasons.json "theme": "halloween"). scripts/build_art.py links this file and puts
   data-season="halloween" on <html> on every page while the season is on, and takes both off when it ends.
   Effects go on frames, boxes and the page, never on Kitty's artwork: no filter, overlay or tilt on an art image. */
@font-face { font-family: "Creepster"; src: url("/themes/creepster.woff2") format("woff2"); font-display: swap; }  /* OFL: /themes/Creepster-OFL.txt */

[data-season="halloween"] {
  --pumpkin: #e8661c; --slime: #7cc22a; --purple: #3b1f5c;
  --bg: #ebdfc4; --card: #fbf4e4; --text: #2a1740; --line: #2a1740; --accent: #5a2589;
  --pink: var(--pumpkin); --yellow: var(--slime); --web: #2a174066;
  --grime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stain: radial-gradient(ellipse 40% 30% at 85% 15%, #6b4a2a1f, transparent 70%), radial-gradient(ellipse 30% 40% at 10% 90%, #5c9a1814, transparent 70%);
  --torn-a: polygon(0% 1px,7% 0,12% 0,18% 3px,24% 5px,30% 1px,33% 3px,36% 3px,42% 4px,45% 5px,51% 2px,55% 4px,58% 2px,61% 0,64% 5px,71% 0,77% 5px,81% 3px,84% 4px,88% 3px,94% 4px,98% 2px,calc(100% - 5px) 0%,calc(100% - 3px) 7%,100% 16%,calc(100% - 4px) 27%,calc(100% - 1px) 32%,100% 41%,calc(100% - 5px) 50%,calc(100% - 4px) 61%,calc(100% - 2px) 68%,calc(100% - 4px) 77%,calc(100% - 4px) 88%,calc(100% - 4px) 99%,100% calc(100% - 3px),96% calc(100% - 5px),90% calc(100% - 3px),86% calc(100% - 2px),79% calc(100% - 5px),74% 100%,68% calc(100% - 5px),61% 100%,57% calc(100% - 4px),51% calc(100% - 2px),45% calc(100% - 5px),42% calc(100% - 3px),39% calc(100% - 2px),32% calc(100% - 4px),25% calc(100% - 3px),21% calc(100% - 1px),14% calc(100% - 1px),11% calc(100% - 1px),4% calc(100% - 4px),3px 100%,4px 91%,3px 82%,5px 73%,3px 68%,4px 61%,3px 54%,3px 49%,4px 40%,4px 33%,3px 22%,3px 13%,0 4%);
  --torn-b: polygon(0% 2px,4% 3px,7% 0,14% 0,19% 4px,22% 4px,26% 0,29% 3px,35% 0,39% 0,46% 3px,49% 4px,52% 1px,59% 0,66% 4px,72% 0,76% 0,83% 1px,88% 3px,92% 4px,95% 4px,calc(100% - 4px) 0%,100% 7%,calc(100% - 2px) 14%,calc(100% - 4px) 19%,calc(100% - 4px) 24%,calc(100% - 4px) 29%,calc(100% - 3px) 36%,calc(100% - 2px) 47%,calc(100% - 4px) 58%,calc(100% - 2px) 69%,calc(100% - 1px) 78%,calc(100% - 5px) 85%,100% 92%,100% calc(100% - 4px),94% calc(100% - 2px),88% calc(100% - 2px),81% 100%,78% calc(100% - 4px),72% calc(100% - 1px),67% calc(100% - 1px),61% calc(100% - 3px),58% calc(100% - 5px),55% calc(100% - 4px),48% calc(100% - 2px),43% calc(100% - 5px),38% calc(100% - 4px),32% calc(100% - 4px),26% 100%,23% calc(100% - 2px),17% calc(100% - 5px),14% 100%,9% calc(100% - 5px),2% calc(100% - 5px),2px 100%,5px 89%,0 80%,2px 69%,4px 62%,3px 57%,1px 52%,1px 43%,3px 36%,3px 25%,1px 20%,3px 9%);
  --web-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 102 102' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 0L100 0M0 0L94 34M0 0L71 71M0 0L34 94M0 0L0 100M22 0Q17 3 21 8Q15 9 16 16Q9 15 8 21Q3 17 0 22M42 0Q33 6 39 14Q28 18 30 30Q18 28 14 39Q6 33 0 42M62 0Q49 9 58 21Q42 27 44 44Q27 42 21 58Q9 49 0 62M84 0Q67 12 79 29Q57 36 59 59Q36 57 29 79Q12 67 0 84'/%3E%3C/svg%3E");
  /* art below: generated (animated + -still for reduced motion); blood drips, ghost, bat, zombie hand */
  --blood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 48'%3E%3Cstyle%3E.g0{transform-box:fill-box;transform-origin:50%25 0;animation:a0 8.5s ease-in-out -0.0s infinite}.b0{animation:c0 8.5s ease-in-out -0.0s infinite}@keyframes a0{0%25,100%25{transform:scaleY(0.68)}62%25{transform:scaleY(1)}70%25{transform:scaleY(0.84)}}@keyframes c0{0%25,100%25{transform:translateY(-6.7px)}62%25{transform:translateY(0)}70%25{transform:translateY(-3.3px)}}.d0{opacity:0;animation:f0 8.5s ease-in -0.0s infinite}@keyframes f0{0%25,61%25{opacity:0;transform:translateY(0)}63%25{opacity:1;transform:translateY(0)}80%25{opacity:.9;transform:translateY(17.0px)}86%25,100%25{opacity:0;transform:translateY(22.7px)}}.g1{transform-box:fill-box;transform-origin:50%25 0;animation:a1 7.0s ease-in-out -2.3s infinite}.b1{animation:c1 7.0s ease-in-out -2.3s infinite}@keyframes a1{0%25,100%25{transform:scaleY(0.68)}62%25{transform:scaleY(1)}70%25{transform:scaleY(0.84)}}@keyframes c1{0%25,100%25{transform:translateY(-2.6px)}62%25{transform:translateY(0)}70%25{transform:translateY(-1.3px)}}.g2{transform-box:fill-box;transform-origin:50%25 0;animation:a2 9.5s ease-in-out -1.1s infinite}.b2{animation:c2 9.5s ease-in-out -1.1s infinite}@keyframes a2{0%25,100%25{transform:scaleY(0.68)}62%25{transform:scaleY(1)}70%25{transform:scaleY(0.84)}}@keyframes c2{0%25,100%25{transform:translateY(-8.3px)}62%25{transform:translateY(0)}70%25{transform:translateY(-4.2px)}}.d2{opacity:0;animation:f2 9.5s ease-in -1.1s infinite}@keyframes f2{0%25,61%25{opacity:0;transform:translateY(0)}63%25{opacity:1;transform:translateY(0)}80%25{opacity:.9;transform:translateY(12.3px)}86%25,100%25{opacity:0;transform:translateY(16.4px)}}.g3{transform-box:fill-box;transform-origin:50%25 0;animation:a3 7.5s ease-in-out -3.6s infinite}.b3{animation:c3 7.5s ease-in-out -3.6s infinite}@keyframes a3{0%25,100%25{transform:scaleY(0.68)}62%25{transform:scaleY(1)}70%25{transform:scaleY(0.84)}}@keyframes c3{0%25,100%25{transform:translateY(-4.2px)}62%25{transform:translateY(0)}70%25{transform:translateY(-2.1px)}}.g4{transform-box:fill-box;transform-origin:50%25 0;animation:a4 8.0s ease-in-out -0.5s infinite}.b4{animation:c4 8.0s ease-in-out -0.5s infinite}@keyframes a4{0%25,100%25{transform:scaleY(0.68)}62%25{transform:scaleY(1)}70%25{transform:scaleY(0.84)}}@keyframes c4{0%25,100%25{transform:translateY(-5.8px)}62%25{transform:translateY(0)}70%25{transform:translateY(-2.9px)}}.d4{opacity:0;animation:f4 8.0s ease-in -0.5s infinite}@keyframes f4{0%25,61%25{opacity:0;transform:translateY(0)}63%25{opacity:1;transform:translateY(0)}80%25{opacity:.9;transform:translateY(19.7px)}86%25,100%25{opacity:0;transform:translateY(26.3px)}}.g5{transform-box:fill-box;transform-origin:50%25 0;animation:a5 6.5s ease-in-out -2.9s infinite}.b5{animation:c5 6.5s ease-in-out -2.9s infinite}@keyframes a5{0%25,100%25{transform:scaleY(0.68)}62%25{transform:scaleY(1)}70%25{transform:scaleY(0.84)}}@keyframes c5{0%25,100%25{transform:translateY(-1.9px)}62%25{transform:translateY(0)}70%25{transform:translateY(-1.0px)}}.g6{transform-box:fill-box;transform-origin:50%25 0;animation:a6 9.0s ease-in-out -4.4s infinite}.b6{animation:c6 9.0s ease-in-out -4.4s infinite}@keyframes a6{0%25,100%25{transform:scaleY(0.68)}62%25{transform:scaleY(1)}70%25{transform:scaleY(0.84)}}@keyframes c6{0%25,100%25{transform:translateY(-4.8px)}62%25{transform:translateY(0)}70%25{transform:translateY(-2.4px)}}.d6{opacity:0;animation:f6 9.0s ease-in -4.4s infinite}@keyframes f6{0%25,61%25{opacity:0;transform:translateY(0)}63%25{opacity:1;transform:translateY(0)}80%25{opacity:.9;transform:translateY(21.7px)}86%25,100%25{opacity:0;transform:translateY(29.0px)}}@media (prefers-reduced-motion:reduce){*{animation:none!important}}%3C/style%3E%3Cdefs%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='40'%3E%3Cstop offset='0' stop-color='%235e0000'/%3E%3Cstop offset='.4' stop-color='%238a0303'/%3E%3Cstop offset='1' stop-color='%23c1121f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23r)'%3E%3Cpath d='M0 0H160V4Q150 7 140 4.5Q130 6 120 5Q110 8 100 4Q90 6 80 5.5Q70 7 60 4.5Q50 6 40 5.5Q30 7 20 4Q10 6 0 4Z'/%3E%3Cg class='g0'%3E%3Crect class='s0' x='9.5' y='2' width='7' height='19'/%3E%3Crect x='10.8' y='4' width='1.1' height='14' fill='%23fff' fill-opacity='.22'/%3E%3C/g%3E%3Cpath d='M6.5 4Q9.5 4.5 9.5 9H16.5Q16.5 4.5 19.5 4Z'/%3E%3Cg class='b0'%3E%3Ccircle cx='13' cy='21' r='4.3'/%3E%3Cellipse cx='11.5' cy='19.5' rx='1.2' ry='1.7' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg class='d0'%3E%3Ccircle cx='13' cy='23.6' r='3.1'/%3E%3Ccircle cx='11.9' cy='22.5' r='0.9' fill='%23fff' fill-opacity='.5'/%3E%3C/g%3E%3Cg class='g1'%3E%3Crect class='s1' x='33.25' y='2' width='3.5' height='6'/%3E%3Crect x='33.9' y='4' width='0.7' height='1' fill='%23fff' fill-opacity='.22'/%3E%3C/g%3E%3Cpath d='M30.25 4Q33.25 4.5 33.25 9H36.75Q36.75 4.5 39.75 4Z'/%3E%3Cg class='b1'%3E%3Ccircle cx='35' cy='8' r='2.2'/%3E%3Cellipse cx='34.2' cy='7.2' rx='0.6' ry='0.9' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg class='g2'%3E%3Crect class='s2' x='50.5' y='2' width='9' height='24'/%3E%3Crect x='52.1' y='4' width='1.4' height='19' fill='%23fff' fill-opacity='.22'/%3E%3C/g%3E%3Cpath d='M47.5 4Q50.5 4.5 50.5 9H59.5Q59.5 4.5 62.5 4Z'/%3E%3Cg class='b2'%3E%3Ccircle cx='55' cy='26' r='5.6'/%3E%3Cellipse cx='53.0' cy='24.0' rx='1.6' ry='2.2' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg class='d2'%3E%3Ccircle cx='55' cy='29.3' r='4.0'/%3E%3Ccircle cx='53.6' cy='27.9' r='1.2' fill='%23fff' fill-opacity='.5'/%3E%3C/g%3E%3Cg class='g3'%3E%3Crect class='s3' x='76.75' y='2' width='4.5' height='11'/%3E%3Crect x='77.6' y='4' width='0.7' height='6' fill='%23fff' fill-opacity='.22'/%3E%3C/g%3E%3Cpath d='M73.75 4Q76.75 4.5 76.75 9H81.25Q81.25 4.5 84.25 4Z'/%3E%3Cg class='b3'%3E%3Ccircle cx='79' cy='13' r='2.8'/%3E%3Cellipse cx='78.0' cy='12.0' rx='0.8' ry='1.1' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg class='g4'%3E%3Crect class='s4' x='96' y='2' width='6' height='16'/%3E%3Crect x='97.1' y='4' width='1.0' height='11' fill='%23fff' fill-opacity='.22'/%3E%3C/g%3E%3Cpath d='M93 4Q96 4.5 96 9H102Q102 4.5 105 4Z'/%3E%3Cg class='b4'%3E%3Ccircle cx='99' cy='18' r='3.7'/%3E%3Cellipse cx='97.7' cy='16.7' rx='1.0' ry='1.5' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg class='d4'%3E%3Ccircle cx='99' cy='20.2' r='2.7'/%3E%3Ccircle cx='98.1' cy='19.3' r='0.8' fill='%23fff' fill-opacity='.5'/%3E%3C/g%3E%3Cg class='g5'%3E%3Crect class='s5' x='117.5' y='2' width='3' height='4'/%3E%3Crect x='118.0' y='4' width='0.7' height='-1' fill='%23fff' fill-opacity='.22'/%3E%3C/g%3E%3Cpath d='M114.5 4Q117.5 4.5 117.5 9H120.5Q120.5 4.5 123.5 4Z'/%3E%3Cg class='b5'%3E%3Ccircle cx='119' cy='6' r='1.9'/%3E%3Cellipse cx='118.3' cy='5.3' rx='0.5' ry='0.7' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg class='g6'%3E%3Crect class='s6' x='136.75' y='2' width='6.5' height='13'/%3E%3Crect x='137.9' y='4' width='1.0' height='8' fill='%23fff' fill-opacity='.22'/%3E%3C/g%3E%3Cpath d='M133.75 4Q136.75 4.5 136.75 9H143.25Q143.25 4.5 146.25 4Z'/%3E%3Cg class='b6'%3E%3Ccircle cx='140' cy='15' r='4.0'/%3E%3Cellipse cx='138.6' cy='13.6' rx='1.1' ry='1.6' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Cg class='d6'%3E%3Ccircle cx='140' cy='17.4' r='2.9'/%3E%3Ccircle cx='139.0' cy='16.4' r='0.9' fill='%23fff' fill-opacity='.5'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M0 1.6H160' stroke='%23fff' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");
  --blood-still: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 48'%3E%3Cdefs%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='40'%3E%3Cstop offset='0' stop-color='%235e0000'/%3E%3Cstop offset='.4' stop-color='%238a0303'/%3E%3Cstop offset='1' stop-color='%23c1121f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23r)'%3E%3Cpath d='M0 0H160V4Q150 7 140 4.5Q130 6 120 5Q110 8 100 4Q90 6 80 5.5Q70 7 60 4.5Q50 6 40 5.5Q30 7 20 4Q10 6 0 4Z'/%3E%3Crect class='s0' x='9.5' y='2' width='7' height='19'/%3E%3Crect x='10.8' y='4' width='1.1' height='14' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M6.5 4Q9.5 4.5 9.5 9H16.5Q16.5 4.5 19.5 4Z'/%3E%3Cg class='b0'%3E%3Ccircle cx='13' cy='21' r='4.3'/%3E%3Cellipse cx='11.5' cy='19.5' rx='1.2' ry='1.7' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Ccircle cx='13' cy='37.5' r='3.1' fill-opacity='.85'/%3E%3Ccircle cx='11.9' cy='36.4' r='0.9' fill='%23fff' fill-opacity='.5'/%3E%3Crect class='s1' x='33.25' y='2' width='3.5' height='6'/%3E%3Crect x='33.9' y='4' width='0.7' height='1' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M30.25 4Q33.25 4.5 33.25 9H36.75Q36.75 4.5 39.75 4Z'/%3E%3Cg class='b1'%3E%3Ccircle cx='35' cy='8' r='2.2'/%3E%3Cellipse cx='34.2' cy='7.2' rx='0.6' ry='0.9' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Crect class='s2' x='50.5' y='2' width='9' height='24'/%3E%3Crect x='52.1' y='4' width='1.4' height='19' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M47.5 4Q50.5 4.5 50.5 9H59.5Q59.5 4.5 62.5 4Z'/%3E%3Cg class='b2'%3E%3Ccircle cx='55' cy='26' r='5.6'/%3E%3Cellipse cx='53.0' cy='24.0' rx='1.6' ry='2.2' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Ccircle cx='55' cy='40.0' r='4.0' fill-opacity='.85'/%3E%3Ccircle cx='53.6' cy='38.6' r='1.2' fill='%23fff' fill-opacity='.5'/%3E%3Crect class='s3' x='76.75' y='2' width='4.5' height='11'/%3E%3Crect x='77.6' y='4' width='0.7' height='6' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M73.75 4Q76.75 4.5 76.75 9H81.25Q81.25 4.5 84.25 4Z'/%3E%3Cg class='b3'%3E%3Ccircle cx='79' cy='13' r='2.8'/%3E%3Cellipse cx='78.0' cy='12.0' rx='0.8' ry='1.1' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Crect class='s4' x='96' y='2' width='6' height='16'/%3E%3Crect x='97.1' y='4' width='1.0' height='11' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M93 4Q96 4.5 96 9H102Q102 4.5 105 4Z'/%3E%3Cg class='b4'%3E%3Ccircle cx='99' cy='18' r='3.7'/%3E%3Cellipse cx='97.7' cy='16.7' rx='1.0' ry='1.5' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Ccircle cx='99' cy='36.0' r='2.7' fill-opacity='.85'/%3E%3Ccircle cx='98.1' cy='35.1' r='0.8' fill='%23fff' fill-opacity='.5'/%3E%3Crect class='s5' x='117.5' y='2' width='3' height='4'/%3E%3Crect x='118.0' y='4' width='0.7' height='-1' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M114.5 4Q117.5 4.5 117.5 9H120.5Q120.5 4.5 123.5 4Z'/%3E%3Cg class='b5'%3E%3Ccircle cx='119' cy='6' r='1.9'/%3E%3Cellipse cx='118.3' cy='5.3' rx='0.5' ry='0.7' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Crect class='s6' x='136.75' y='2' width='6.5' height='13'/%3E%3Crect x='137.9' y='4' width='1.0' height='8' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M133.75 4Q136.75 4.5 136.75 9H143.25Q143.25 4.5 146.25 4Z'/%3E%3Cg class='b6'%3E%3Ccircle cx='140' cy='15' r='4.0'/%3E%3Cellipse cx='138.6' cy='13.6' rx='1.1' ry='1.6' fill='%23fff' fill-opacity='.55'/%3E%3C/g%3E%3Ccircle cx='140' cy='34.5' r='2.9' fill-opacity='.85'/%3E%3Ccircle cx='139.0' cy='33.5' r='0.9' fill='%23fff' fill-opacity='.5'/%3E%3C/g%3E%3Cpath d='M0 1.6H160' stroke='%23fff' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");
  --ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 116'%3E%3Cstyle%3Eg{animation:b 3.2s ease-in-out infinite alternate}@keyframes b{to{transform:translateY(7px) rotate(3deg)}}@media (prefers-reduced-motion:reduce){*{animation:none!important}}%3C/style%3E%3Cg style='transform-origin:42px 50px'%3E%3Cpath d='M10 46C10 22 24 8 42 8S74 22 74 46V96Q68 104 62 96T50 96T38 98T26 95T10 98Z' fill='%23f7f2ff' fill-opacity='.9' stroke='%233b1f5c' stroke-opacity='.45' stroke-width='2'%3E%3Canimate attributeName='d' dur='2.4s' repeatCount='indefinite' values='M10 46C10 22 24 8 42 8S74 22 74 46V96Q68 104 62 96T50 96T38 98T26 95T10 98Z;M10 46C10 22 24 8 42 8S74 22 74 46V98Q68 94 62 99T50 95T38 99T26 96T10 95Z;M10 46C10 22 24 8 42 8S74 22 74 46V96Q68 104 62 96T50 96T38 98T26 95T10 98Z'/%3E%3C/path%3E%3Cpath d='M11 52Q2 58 4 66Q10 62 13 60M73 52Q82 58 80 66Q74 62 71 60' fill='%23f7f2ff' stroke='%233b1f5c' stroke-opacity='.45' stroke-width='2'/%3E%3Cellipse cx='32' cy='42' rx='5.5' ry='8.5' fill='%232a1740'/%3E%3Cellipse cx='52' cy='42' rx='5.5' ry='8.5' fill='%232a1740'/%3E%3Cellipse cx='42' cy='64' rx='6' ry='9' fill='%232a1740'/%3E%3Ccircle cx='33.5' cy='39' r='1.6' fill='%23fff'/%3E%3Ccircle cx='53.5' cy='39' r='1.6' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --ghost-still: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 116'%3E%3Cg style='transform-origin:42px 50px'%3E%3Cpath d='M10 46C10 22 24 8 42 8S74 22 74 46V96Q68 104 62 96T50 96T38 98T26 95T10 98Z' fill='%23f7f2ff' fill-opacity='.9' stroke='%233b1f5c' stroke-opacity='.45' stroke-width='2'%3E%3C/path%3E%3Cpath d='M11 52Q2 58 4 66Q10 62 13 60M73 52Q82 58 80 66Q74 62 71 60' fill='%23f7f2ff' stroke='%233b1f5c' stroke-opacity='.45' stroke-width='2'/%3E%3Cellipse cx='32' cy='42' rx='5.5' ry='8.5' fill='%232a1740'/%3E%3Cellipse cx='52' cy='42' rx='5.5' ry='8.5' fill='%232a1740'/%3E%3Cellipse cx='42' cy='64' rx='6' ry='9' fill='%232a1740'/%3E%3Ccircle cx='33.5' cy='39' r='1.6' fill='%23fff'/%3E%3Ccircle cx='53.5' cy='39' r='1.6' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 60 40'%3E%3Cstyle%3Epath{transform-origin:30px 11px;animation:f .32s ease-in-out infinite alternate}@keyframes f{to{transform:scaleY(.3)}}@media (prefers-reduced-motion:reduce){*{animation:none!important}}%3C/style%3E%3Cpath fill='%234a2a6a' d='M30 7C28 3 26 2 25 2l1 5C20 1 10 0 2 5c5 1 7 5 7 9 3-2 7-2 10 1 2-3 6-4 9-2l2 6 2-6c3-2 7-1 9 2 3-3 7-3 10-1 0-4 2-8 7-9C50 0 40 1 34 7l1-5c-1 0-3 1-5 5z'/%3E%3Ccircle cx='28.6' cy='8.5' r='.9' fill='%23ff8c3a'/%3E%3Ccircle cx='31.4' cy='8.5' r='.9' fill='%23ff8c3a'/%3E%3C/svg%3E");
  --bat-still: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 60 40'%3E%3Cpath fill='%234a2a6a' d='M30 7C28 3 26 2 25 2l1 5C20 1 10 0 2 5c5 1 7 5 7 9 3-2 7-2 10 1 2-3 6-4 9-2l2 6 2-6c3-2 7-1 9 2 3-3 7-3 10-1 0-4 2-8 7-9C50 0 40 1 34 7l1-5c-1 0-3 1-5 5z'/%3E%3Ccircle cx='28.6' cy='8.5' r='.9' fill='%23ff8c3a'/%3E%3Ccircle cx='31.4' cy='8.5' r='.9' fill='%23ff8c3a'/%3E%3C/svg%3E");
  --hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'%3E%3Cstyle%3E.f0{animation:t 2.6s ease-in-out -0.0s infinite}.f1{animation:t 2.6s ease-in-out -0.4s infinite}.f2{animation:t 2.6s ease-in-out -0.8s infinite}.f3{animation:t 2.6s ease-in-out -1.2s infinite}@keyframes t{0%25,100%25{transform:rotate(0)}40%25{transform:rotate(9deg)}55%25{transform:rotate(-4deg)}}@media (prefers-reduced-motion:reduce){*{animation:none!important}}%3C/style%3E%3Cg stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M49 128L50 70h22l2 58z' fill='%237aa33a' stroke='%232c4a10' stroke-width='3'/%3E%3Cpath d='M57 104l9 3M56 110l2-4M63 110l2-4' stroke='%232c4a10' stroke-width='1.5'/%3E%3Cg class='f0' style='transform-origin:51px 50px'%3E%3Cpath d='M51 50L43 22' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M51 50L43 22' stroke='%237aa33a' stroke-width='6'/%3E%3C/g%3E%3Cg class='f1' style='transform-origin:59px 48px'%3E%3Cpath d='M59 48L57 13' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M59 48L57 13' stroke='%237aa33a' stroke-width='6'/%3E%3C/g%3E%3Cg class='f2' style='transform-origin:67px 48px'%3E%3Cpath d='M67 48L71 15' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M67 48L71 15' stroke='%237aa33a' stroke-width='6'/%3E%3C/g%3E%3Cg class='f3' style='transform-origin:74px 52px'%3E%3Cpath d='M74 52L84 29' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M74 52L84 29' stroke='%237aa33a' stroke-width='6'/%3E%3C/g%3E%3Cpath d='M47 66L31 52' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M47 66L31 52' stroke='%237aa33a' stroke-width='6'/%3E%3Cpath d='M57 15l1 6' stroke='%23e9e2cc' stroke-width='3'/%3E%3Cpath d='M45 76c-3-15 1-25 7-28h20c6 4 8 14 4 28z' fill='%237aa33a' stroke='%232c4a10' stroke-width='3'/%3E%3Cpath d='M52 56q6 6 4 12M66 54q-2 5 2 10' stroke='%234f7322' stroke-width='2'/%3E%3Cpath d='M58 60l3 3-2 3' stroke='%238a0303' stroke-width='2.5'/%3E%3Cpath d='M44 128l2-34 6 5 4-8 6 9 5-8 6 7 5-4 3 33z' fill='%233b1f5c' stroke='%231d0f2e' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M0 140c8-18 30-26 60-26s52 8 60 26z' fill='%23503420'/%3E%3Cg fill='%23382314'%3E%3Ccircle cx='30' cy='130' r='3'/%3E%3Ccircle cx='88' cy='128' r='4'/%3E%3Ccircle cx='60' cy='122' r='2.5'/%3E%3Ccircle cx='42' cy='121' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --hand-still: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M49 128L50 70h22l2 58z' fill='%237aa33a' stroke='%232c4a10' stroke-width='3'/%3E%3Cpath d='M57 104l9 3M56 110l2-4M63 110l2-4' stroke='%232c4a10' stroke-width='1.5'/%3E%3Cg class='f0' style='transform-origin:51px 50px'%3E%3Cpath d='M51 50L43 22' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M51 50L43 22' stroke='%237aa33a' stroke-width='6'/%3E%3C/g%3E%3Cg class='f1' style='transform-origin:59px 48px'%3E%3Cpath d='M59 48L57 13' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M59 48L57 13' stroke='%237aa33a' stroke-width='6'/%3E%3C/g%3E%3Cg class='f2' style='transform-origin:67px 48px'%3E%3Cpath d='M67 48L71 15' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M67 48L71 15' stroke='%237aa33a' stroke-width='6'/%3E%3C/g%3E%3Cg class='f3' style='transform-origin:74px 52px'%3E%3Cpath d='M74 52L84 29' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M74 52L84 29' stroke='%237aa33a' stroke-width='6'/%3E%3C/g%3E%3Cpath d='M47 66L31 52' stroke='%232c4a10' stroke-width='11'/%3E%3Cpath d='M47 66L31 52' stroke='%237aa33a' stroke-width='6'/%3E%3Cpath d='M57 15l1 6' stroke='%23e9e2cc' stroke-width='3'/%3E%3Cpath d='M45 76c-3-15 1-25 7-28h20c6 4 8 14 4 28z' fill='%237aa33a' stroke='%232c4a10' stroke-width='3'/%3E%3Cpath d='M52 56q6 6 4 12M66 54q-2 5 2 10' stroke='%234f7322' stroke-width='2'/%3E%3Cpath d='M58 60l3 3-2 3' stroke='%238a0303' stroke-width='2.5'/%3E%3Cpath d='M44 128l2-34 6 5 4-8 6 9 5-8 6 7 5-4 3 33z' fill='%233b1f5c' stroke='%231d0f2e' stroke-width='2'/%3E%3C/g%3E%3Cpath d='M0 140c8-18 30-26 60-26s52 8 60 26z' fill='%23503420'/%3E%3Cg fill='%23382314'%3E%3Ccircle cx='30' cy='130' r='3'/%3E%3Ccircle cx='88' cy='128' r='4'/%3E%3Ccircle cx='60' cy='122' r='2.5'/%3E%3Ccircle cx='42' cy='121' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
[data-season="halloween"][data-dark] {
  --bg: #170e21; --card: #241731; --text: #efe6d2; --line: #c9b6dc; --accent: #ff8c3a;
  --pink: var(--slime); --yellow: var(--pumpkin); --web: #e8dcf266;
  --grime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .8 0 0 0 0 .9 0 0 0 .7 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stain: radial-gradient(ellipse 40% 30% at 85% 15%, #7cc22a14, transparent 70%), radial-gradient(ellipse 30% 40% at 10% 90%, #e8661c14, transparent 70%);
}

/* the page: grimy, with a bruised vignette */
[data-season="halloween"] body {
  background: var(--grime), radial-gradient(ellipse 120% 80% at 50% 0%, transparent 50%, #3b1f5c38), var(--bg);
}
[data-season="halloween"] h1, [data-season="halloween"] h2 { font-family: "Creepster", "Quicksand", system-ui, sans-serif; font-weight: 400; letter-spacing: .04em; line-height: 1.15; }
[data-season="halloween"] h2 { font-size: 2rem; }
[data-season="halloween"] .label { font-size: 1.6rem; }
[data-season="halloween"] .piece h1 { font-size: 2.6rem; text-shadow: 2px 2px 0 var(--pink); }
[data-season="halloween"] .piece h2, [data-season="halloween"] .how h2 { font-size: 1.7rem; }

/* blood dripping under a few big headings only: drips lengthen, a drop falls, loops */
[data-season="halloween"] #art-h, [data-season="halloween"] .page-h {
  position: relative; width: fit-content; margin-left: auto; margin-right: auto; padding-bottom: 42px; font-size: 2.6rem;
}
[data-season="halloween"] #art-h::after, [data-season="halloween"] .page-h::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: 0; height: 44px; pointer-events: none;
  background: var(--blood) 0 0 / auto 44px round no-repeat;
}

/* decayed boxes: torn edges, grime, a slight lean; the offset shadow moves to the parent so the tear keeps it */
[data-season="halloween"] .shop, [data-season="halloween"] .buy a, [data-season="halloween"] .buy .sold,
[data-season="halloween"] .artgrid li a, [data-season="halloween"] .feed li, [data-season="halloween"] .made figure {
  border-radius: 3px; box-shadow: none; clip-path: var(--torn-a);
  background: var(--stain), var(--grime), var(--card);
}
[data-season="halloween"] .buy .main { background: var(--stain), var(--grime), var(--accent); color: #fff; }
[data-season="halloween"][data-dark] .buy .main { color: #1a0f24; }
[data-season="halloween"] .shops li:nth-child(even) .shop, [data-season="halloween"] .buy li:nth-child(even) a,
[data-season="halloween"] .artgrid li:nth-child(even) a, [data-season="halloween"] .feed li:nth-child(even) { clip-path: var(--torn-b); }
[data-season="halloween"] .shops li, [data-season="halloween"] .buy li, [data-season="halloween"] .artgrid li,
[data-season="halloween"] .feed, [data-season="halloween"] .made li { filter: drop-shadow(5px 5px 0 var(--pink)); }
[data-season="halloween"] .shops li:nth-child(odd) { transform: rotate(-1deg); }
[data-season="halloween"] .shops li:nth-child(even) { transform: rotate(.8deg); }
[data-season="halloween"] .buy li:nth-child(odd) { transform: rotate(-.6deg); }
[data-season="halloween"] .buy li:nth-child(even) { transform: rotate(.5deg); }
[data-season="halloween"] .shop:hover, [data-season="halloween"] .shop:focus-visible,
[data-season="halloween"] .buy a:hover, [data-season="halloween"] .buy a:focus-visible,
[data-season="halloween"] .artgrid li a:hover, [data-season="halloween"] .artgrid li a:focus-visible { box-shadow: none; transform: translate(2px, 2px); }
/* art cards: the picture sits inside a torn frame, never cut, filtered or tilted itself */
[data-season="halloween"] .artgrid li a { padding: 7px 7px 0; }
[data-season="halloween"] .artgrid img { border: 2px solid var(--line); }
[data-season="halloween"] .feed li { padding: 6px 6px 0; }
[data-season="halloween"] .made figure { padding: 6px; }
[data-season="halloween"] .art { padding: 12px; border: 0; box-shadow: none; border-radius: 0; clip-path: var(--torn-b);
  background: var(--grime), linear-gradient(135deg, var(--purple), #24123a 60%, var(--purple)); }
[data-season="halloween"][data-dark] .art { background: var(--grime), linear-gradient(135deg, #2f5a0e, #1b3a06 60%, #2f5a0e); }
[data-season="halloween"] .art img { outline: 2px solid #00000040; }
@media (max-width: 480px) { [data-season="halloween"] #art-h, [data-season="halloween"] .page-h { font-size: 2.1rem; } [data-season="halloween"] .artgrid li a { padding: 5px 5px 0; } [data-season="halloween"] .artgrid li { filter: drop-shadow(3px 3px 0 var(--pink)); } }

/* buttons and stickers in the new colours */
[data-season="halloween"] .sticker, [data-season="halloween"][data-dark] .sticker { background: var(--pumpkin); color: #1a0f24; border-color: #2a1740; box-shadow: 4px 4px 0 var(--purple); }
[data-season="halloween"][data-dark] .sticker { box-shadow: 4px 4px 0 var(--slime); }
[data-season="halloween"] .theme { background: var(--card); }

/* cobwebs in a few corners (never over a picture) */
[data-season="halloween"] .shops, [data-season="halloween"] .socials, [data-season="halloween"] .piece > div,
[data-season="halloween"] .narrow, [data-season="halloween"] main > .artgrid:not(#my-art) { position: relative; }
[data-season="halloween"] .shops::before, [data-season="halloween"] .socials::before, [data-season="halloween"] .piece > div::before,
[data-season="halloween"] .narrow::before, [data-season="halloween"] main > .artgrid:not(#my-art)::before {
  content: ""; position: absolute; top: -10px; width: 96px; height: 96px; pointer-events: none; background: var(--web);
  -webkit-mask: var(--web-svg) 0 0 / contain no-repeat; mask: var(--web-svg) 0 0 / contain no-repeat;
}
[data-season="halloween"] .shops::before, [data-season="halloween"] .narrow::before { left: 0; }
[data-season="halloween"] .piece > div::before { top: -36px; right: -12px; }
[data-season="halloween"] .narrow::before { top: -26px; left: -12px; }
[data-season="halloween"] .socials::before, [data-season="halloween"] .piece > div::before,
[data-season="halloween"] main > .artgrid:not(#my-art)::before { right: 0; transform: scaleX(-1); }
@media (max-width: 600px) {
  [data-season="halloween"] .shops::before, [data-season="halloween"] .socials::before, [data-season="halloween"] .piece > div::before,
  [data-season="halloween"] .narrow::before, [data-season="halloween"] main > .artgrid:not(#my-art)::before { width: 64px; height: 64px; }
}

/* the home banner: a cracked, torn slab with dripping words and a ghost peeking out */
[data-season="halloween"] .season { margin-bottom: 44px; }
/* the ghost hangs on .season-wrap, outside .season's drop-shadow filter, so it never gets the slab's shadow */
[data-season="halloween"] .season-wrap { position: relative; isolation: isolate; }
[data-season="halloween"] .season a, [data-season="halloween"][data-dark] .season a {
  position: relative; flex-direction: column; align-items: center; gap: 2px; padding: 18px 34px 20px; border: 0; border-radius: 0;
  background: var(--stain), var(--grime), linear-gradient(160deg, #3b1f5c, #24123a); color: #f3ead6; box-shadow: none;
  clip-path: var(--torn-a); transform: rotate(-1.2deg);
}
[data-season="halloween"] .season { filter: drop-shadow(6px 6px 0 var(--pumpkin)); }
[data-season="halloween"][data-dark] .season { filter: drop-shadow(6px 6px 0 var(--slime)); }
[data-season="halloween"] .season a:hover, [data-season="halloween"] .season a:focus-visible { transform: rotate(-1.2deg) translate(2px, 2px); box-shadow: none; }
[data-season="halloween"] .season span {
  position: relative; padding-bottom: 44px; font: 400 1.75rem/1.2 "Creepster", "Quicksand", sans-serif; letter-spacing: .04em; color: #ff8c3a; text-wrap: balance;
}
[data-season="halloween"] .season span::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 40px; pointer-events: none;
  background: var(--blood) 0 0 / auto 40px round no-repeat;
}
[data-season="halloween"] .season b { color: #a6e35a; font-size: 1.05rem; }
[data-season="halloween"] .season a::before {  /* the crack */
  content: ""; position: absolute; top: 0; left: 62%; width: 70px; height: 100%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 100' preserveAspectRatio='none' fill='none' stroke='%230c0612' stroke-width='2.4' stroke-linejoin='bevel'%3E%3Cpath d='M30 0L36 14L27 26L40 41L31 55L44 68L35 84L41 100M40 41L56 46L66 58M31 55L16 61L8 74M35 84L24 92'/%3E%3Cpath d='M31 0L37 14L28 26L41 41L32 55L45 68L36 84L42 100' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1' transform='translate(1.5 0)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
[data-season="halloween"] .season-wrap::after {  /* the ghost, behind the slab */
  content: ""; position: absolute; z-index: -1; right: max(0px, calc(50% - 352px)); top: -54px; width: 78px; height: 98px;
  background: var(--ghost) 0 0 / contain no-repeat; transform: rotate(14deg); animation: hw-peek 6s ease-in-out infinite;
}
@keyframes hw-peek { 0%, 100% { translate: 0 18px; } 45%, 60% { translate: 6px -6px; } }
@media (max-width: 480px) {
  [data-season="halloween"] .season a { padding: 14px 18px 16px; }
  [data-season="halloween"] .season span { font-size: 1.35rem; }
  [data-season="halloween"] .season-wrap::after { width: 54px; height: 68px; top: -40px; }
  [data-season="halloween"] .feed li { padding: 4px 4px 0; }
}

/* ghosts and bats drifting across, behind everything */
[data-season="halloween"]::before, [data-season="halloween"]::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
[data-season="halloween"]::before {
  background: var(--ghost) no-repeat, var(--ghost) no-repeat; background-size: 74px 92px, 52px 65px; opacity: .4;
  animation: hw-ghosts 70s linear -24s infinite;
}
[data-season="halloween"]::after {
  background: var(--bat) no-repeat, var(--bat) no-repeat, var(--bat) no-repeat; background-size: 60px 40px, 40px 27px, 30px 20px; opacity: .75;
  animation: hw-bats 38s linear -9s infinite;
}
[data-season="halloween"][data-dark]::after { filter: brightness(1.9); opacity: .65; }
@keyframes hw-ghosts {
  0% { background-position: -120px 72vh, calc(100% + 120px) 22vh; }
  25% { background-position: calc(25% - 30px) 62vh, 75% 30vh; }
  50% { background-position: 50% 70vh, 50% 18vh; }
  75% { background-position: 75% 58vh, 25% 26vh; }
  100% { background-position: calc(100% + 120px) 66vh, -120px 20vh; }
}
@keyframes hw-bats {
  0% { background-position: calc(100% + 80px) 14vh, calc(100% + 160px) 20vh, calc(100% + 240px) 10vh; }
  33% { background-position: 66% 8vh, 72% 26vh, 80% 14vh; }
  66% { background-position: 33% 18vh, 40% 12vh, 47% 22vh; }
  100% { background-position: -80px 10vh, -160px 24vh, -240px 16vh; }
}

/* a zombie hand poking up out of the ground at the bottom of the home page */
[data-season="halloween"] main:has(> header .brand) > footer { position: relative; padding-top: 128px; overflow: hidden; }
[data-season="halloween"] main:has(> header .brand) > footer::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 120px; height: 132px; margin-left: -60px; transform-origin: 50% 100%;
  background: var(--hand) 0 0 / contain no-repeat;
  animation: hw-grab 5s ease-in-out infinite;
}
@keyframes hw-grab { 0%, 100% { rotate: -5deg; } 50% { rotate: 6deg; } }

@media (prefers-reduced-motion: reduce) {
  [data-season="halloween"]::before, [data-season="halloween"]::after,
  [data-season="halloween"] .season-wrap::after, [data-season="halloween"] footer::before { animation: none !important; }
  [data-season="halloween"]::before { background-position: 6% 72vh, 94% 22vh; }
  [data-season="halloween"]::after { background-image: var(--bat-still), var(--bat-still), var(--bat-still); background-position: 80% 14vh, 86% 20vh, 92% 10vh; }
  [data-season="halloween"]::before { background-image: var(--ghost-still), var(--ghost-still); }
  [data-season="halloween"] .season-wrap::after { background-image: var(--ghost-still); }
  [data-season="halloween"] #art-h::after, [data-season="halloween"] .page-h::after, [data-season="halloween"] .season span::after { background-image: var(--blood-still); }
  [data-season="halloween"] main:has(> header .brand) > footer::before { background-image: var(--hand-still); }
}