html,body{overflow-x:hidden;max-width:100%}
main,.site-footer,.hero-art{max-width:100%;overflow-x:clip}
@media (max-width:1023px){
  .desktop-nav.mobile-open{display:flex;position:absolute;left:0;right:0;top:84px;z-index:30;padding:1rem;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 18px rgba(27,36,50,.08);flex-direction:column;gap:0}
  .desktop-nav.mobile-open a{padding:.8rem 0;font-size:.95rem}
  .desktop-nav.mobile-open a:after{display:none}
}
@media (min-width:1024px){.desktop-nav{display:flex}}

/* Hand-made paint and sketch details */
body{background-image:radial-gradient(circle at 8% 9%,rgba(239,101,61,.09) 0 3px,transparent 4px),radial-gradient(circle at 92% 18%,rgba(40,101,215,.08) 0 2px,transparent 3px);background-size:74px 74px,91px 91px}
.hero:before{content:"";position:absolute;left:-4rem;top:36%;width:11rem;height:3.2rem;border:3px solid rgba(239,101,61,.18);border-left:0;border-right:0;transform:rotate(-14deg);border-radius:50%}
.hero:after{content:"✦  ·  ○  ·  ✎";position:absolute;left:42%;bottom:1rem;color:rgba(40,101,215,.3);font:500 1rem var(--mono);letter-spacing:.65rem;transform:rotate(-5deg)}
.hero h1 span{display:block;width:max-content;margin-top:.12em;font-size:.72em;line-height:.95;transform:rotate(-3deg);position:relative}
.hero h1 span:after{content:"";position:absolute;left:-.08em;right:-.15em;bottom:-.08em;height:.11em;background:var(--orange);border-radius:50%;transform:rotate(2deg);opacity:.35}
.paint-squeeze{position:relative;isolation:isolate;min-width:15rem;border-radius:54% 46% 48% 52%/42% 50% 50% 58%;padding:1rem 1.65rem 1rem 1.85rem;box-shadow:none;transform:rotate(-1.4deg);overflow:visible}
.paint-squeeze:before{content:"";position:absolute;z-index:-1;left:-.65rem;right:-.55rem;top:-.28rem;bottom:-.35rem;background:var(--orange);clip-path:polygon(4% 32%,12% 10%,30% 17%,46% 4%,64% 14%,82% 3%,96% 20%,100% 59%,91% 79%,78% 83%,65% 100%,49% 86%,31% 96%,16% 80%,0 72%)}
.paint-squeeze:after{content:"";position:absolute;z-index:-1;width:1.15rem;height:1.9rem;right:14%;bottom:-1.25rem;background:var(--orange);border-radius:40% 55% 65% 35%;transform:rotate(12deg)}
.paint-squeeze:hover{box-shadow:none;transform:rotate(1deg) scale(1.03)}
.method,.practice{position:relative;overflow:hidden}
.routine{width:100%;min-width:0}
.routine-item{min-width:0;width:100%}
.ticker{max-width:100vw}
.method:before{content:"PAINT  /  PRACTICE  /  PLAY";position:absolute;top:2.1rem;right:-1rem;color:rgba(27,36,50,.09);font:500 clamp(1.4rem,3vw,3rem) var(--mono);letter-spacing:.16em;transform:rotate(3deg)}
.method:after{content:"";position:absolute;width:13rem;height:5rem;left:-4rem;bottom:2rem;border:9px solid rgba(40,101,215,.11);border-left:0;border-right:0;border-radius:50%;transform:rotate(18deg)}
.method-card{min-height:350px}
.method-art{position:absolute;display:block;object-fit:contain;z-index:-1;pointer-events:none;filter:drop-shadow(7px 8px 0 rgba(27,36,50,.12))}
.art-eye{width:62%;height:43%;right:-3%;top:14%;transform:rotate(8deg)}
.art-hands{width:58%;height:51%;right:-2%;top:6%;transform:rotate(-5deg)}
.art-girl{width:52%;height:59%;right:2%;top:0;transform:rotate(4deg)}
.method-card h3,.method-card p{max-width:58%}
.practice:before{content:"";position:absolute;width:15rem;height:15rem;right:-5rem;top:1.5rem;border:2px dashed rgba(239,101,61,.2);border-radius:47% 53% 42% 58%;transform:rotate(24deg)}
.practice:after{content:"COLOR  •  LINE  •  IMAGINE";position:absolute;left:2%;bottom:2rem;color:rgba(27,36,50,.11);font:500 1rem var(--mono);letter-spacing:.23em;transform:rotate(-4deg)}
.routine{position:relative;z-index:1;background:transparent;border:0;gap:1rem}
.routine-item{overflow:hidden;border:1px solid var(--line);min-height:270px;padding:1.55rem;background:rgba(252,247,238,.9);isolation:isolate}
.routine-item:nth-child(1){transform:rotate(-.8deg)}.routine-item:nth-child(2){transform:rotate(.7deg)}.routine-item:nth-child(3){transform:rotate(-.45deg)}
.routine-item img{position:absolute;z-index:-1;right:-8%;top:2%;width:54%;height:62%;object-fit:contain;opacity:.9;filter:drop-shadow(6px 6px 0 rgba(27,36,50,.1));transition:transform .25s,opacity .25s}
.routine-item:nth-child(2) img{width:48%;right:-3%;top:0}.routine-item:nth-child(3) img{width:43%;right:0;top:-3%}
.routine-item:hover img,.routine-item.active img{transform:translate(-5px,5px) rotate(3deg);opacity:1}
.routine-item.active{background:var(--yellow);box-shadow:7px 8px 0 rgba(27,36,50,.12)}
.routine-message{position:relative;z-index:1;background:var(--paper);display:inline-block;padding:.25rem .7rem .25rem 0}
.canvas-section:before,.download-section:before{content:"";position:absolute;pointer-events:none;width:9rem;height:2.4rem;border-top:10px solid rgba(245,200,71,.27);border-radius:50%;transform:rotate(-20deg)}
.canvas-section,.download-section{position:relative;overflow:hidden}.canvas-section:before{right:4%;top:3rem}.download-section:before{left:3%;bottom:2rem;border-color:rgba(255,255,255,.2)}
@media (max-width:639px){
  .hero:after{display:none}.paint-squeeze{min-width:13rem;padding-left:1.3rem;padding-right:1.3rem}
  .method-card{min-height:330px}.method-art{opacity:.9}.method-card h3,.method-card p{max-width:64%}
  .routine{gap:1.1rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%;min-width:0}.routine-item{min-height:230px;padding:1rem .7rem;min-width:0!important;width:auto!important;max-width:100%}.routine-item b{font-size:3rem}.routine-item strong{font-size:.9rem}.routine-item small{font-size:.68rem}.routine-item img{width:48%;height:58%}
}