/* CNG Studios house style (the Studio wall look). One file for the home page AND every subpage.
   Tokens first, then components. Change a token here and every page follows. */
:root{--ink:#16161d;--wall:#f6f3ea;--or:#ff5a1f;--bl:#2747ff;--pk:#ff5fa8;--yl:#ffe14a;--gr:#19c37d;
 --torn:polygon(0 2.4%,7% .4%,16% 2%,28% .3%,40% 2.2%,54% .6%,67% 2.4%,79% .5%,90% 2%,100% .2%,100% 98%,91% 99.7%,79% 97.9%,64% 99.6%,50% 97.8%,37% 99.5%,23% 97.7%,11% 99.6%,0 98%)}
*{box-sizing:border-box;margin:0}
body{font:400 18px/1.5 Karla,system-ui,sans-serif;color:var(--ink);background:var(--wall) radial-gradient(rgba(22,22,29,.13) 1.2px,transparent 1.4px) 0 0/22px 22px;overflow-x:hidden}
main{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--bl);outline-offset:4px}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;line-height:.95;text-transform:uppercase;letter-spacing:.005em}
.hand{font-family:"Patrick Hand",cursive;line-height:1.15}
.wrap{width:min(1240px,100% - 44px);margin-inline:auto;position:relative}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:10px;z-index:99}
.btn{display:inline-block;font-weight:800;text-decoration:none;padding:13px 24px;background:var(--ink);color:#fff;rotate:-1deg;transition:rotate .15s,scale .15s}
.btn:hover{rotate:1.5deg;scale:1.05}
.btn.y{background:var(--yl);color:var(--ink)}

nav{position:sticky;top:0;z-index:50;background:rgba(246,243,234,.9);backdrop-filter:blur(8px)}
nav .wrap{display:flex;align-items:center;gap:22px;padding:12px 0}
nav img{height:26px}
nav ul{display:flex;gap:20px;list-style:none;padding:0;margin-left:auto;font-weight:800}
nav a{text-decoration:none}nav ul a:hover{background:var(--yl)}
nav .btn{padding:9px 18px}

/* pinned bits */
.pin{position:absolute;touch-action:pan-y;cursor:grab;translate:var(--dx,0) var(--dy,0);rotate:var(--r,0deg);z-index:3;user-select:none;-webkit-user-drag:none}
.pin:active{cursor:grabbing;z-index:9}
.pin img{pointer-events:none}
.stick img,img.stick{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 8px rgba(22,22,29,.28))}
.pola{background:#fff;padding:10px 10px 14px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45)}
.pola img{width:100%;display:block}
.pola figcaption,.pola .cap{font:400 1.15rem "Patrick Hand";text-align:center;margin-top:8px}
.tape::before{content:"";position:absolute;left:50%;top:-14px;width:96px;height:28px;translate:-50% 0;rotate:-4deg;background:rgba(255,225,74,.78);box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:2}
.tape.b::before{background:rgba(39,71,255,.45);rotate:5deg}
.tape.p::before{background:rgba(255,95,168,.6)}

/* hero */
.hero{position:relative;padding:40px 0 120px;min-height:92svh}
.mega{font:400 clamp(5rem,23.5vw,22rem)/.8 Anton;color:var(--bl);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;margin-left:-.04em}
.mega+ .mega{color:var(--or);margin-top:.06em}
.hero h1{font:400 clamp(1.7rem,3.2vw,2.8rem)/1.1 "Patrick Hand";text-transform:none;max-width:22ch;margin-top:34px;rotate:-2deg}
.hero p{max-width:40ch;margin:18px 0 24px;font-weight:600;font-size:1.15rem}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.note{background:var(--yl);padding:14px 18px;font:400 1.3rem/1.15 "Patrick Hand";box-shadow:0 10px 14px -8px rgba(22,22,29,.4);max-width:210px}

/* clusters on torn sheets that overlap */
.cluster{position:relative;padding:120px 0 150px;margin-top:-70px}
.cluster>.sheet{position:absolute;inset:0;background:var(--c);clip-path:var(--torn);rotate:var(--tilt,-1.2deg);scale:1.04 1}
.cluster:nth-of-type(even)>.sheet{--tilt:1.2deg}
.cluster h2{font-size:clamp(3rem,8vw,7.4rem)}
.cluster .kind{font:400 1.5rem "Patrick Hand";display:block;margin-bottom:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.two.r>.vis{order:2}
.two p{max-width:38ch;margin:18px 0 24px;font-weight:600}
.vis{position:relative;min-height:440px}
.on-dark{color:#fff}.on-dark .btn{background:var(--yl);color:var(--ink)}

.todo{list-style:none;padding:0;columns:2;gap:40px;font:400 clamp(1.7rem,3.4vw,2.8rem)/1.35 "Patrick Hand";margin-top:26px;max-width:860px}
.todo li::before{content:"";display:inline-block;width:.62em;height:.62em;border:3px solid var(--ink);margin-right:.4em;background:linear-gradient(45deg,transparent 42%,var(--or) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--or) 42% 58%,transparent 58%)}
.todo li{break-inside:avoid}
.todo small{font:600 .95rem Karla;display:block;margin:-4px 0 6px 1.4em}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
.grid4 .pola:nth-child(odd){rotate:-2.5deg}.grid4 .pola:nth-child(even){rotate:2deg;translate:0 18px}
.pola{position:relative;margin:0}
.pin.pola{position:absolute}
.pola .ga{display:grid;place-items:center;aspect-ratio:1;background:#eef0f6;padding:12px}
.pola .ga img{max-height:100%;width:auto}
.pola small{display:block;text-align:center;font-size:.9rem;font-weight:600}
.tix{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.film{text-decoration:none;background:#fff;padding:10px 10px 14px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);position:relative;transition:rotate .2s}
.film:nth-child(odd){rotate:1.5deg}.film:nth-child(even){rotate:-2deg}
.film:hover{rotate:0deg}
.film .th{display:block;aspect-ratio:16/9;overflow:hidden}
.film .th img{width:100%;height:100%;object-fit:cover}
.film b{font:400 1.5rem "Patrick Hand";display:block;margin-top:8px}
.film small{font-weight:600;font-size:.9rem}

.strip{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.strip img{height:200px;width:auto;background:#fff;padding:7px;box-shadow:0 12px 18px -10px rgba(22,22,29,.45);transition:rotate .2s,translate .2s}
.strip a:nth-child(3n+1) img{rotate:-3deg}.strip a:nth-child(3n) img{rotate:2.5deg}
.strip a:hover img,.strip a:focus-visible img{rotate:0deg;translate:0 -8px}
.nums{display:flex;gap:36px;flex-wrap:wrap;margin-top:40px;font-weight:800}
.nums b{font:400 3.4rem/1 Anton;display:block}

.tags{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.tag{background:#fff;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);text-align:center;padding-bottom:20px}
.tag:nth-child(odd){rotate:-2deg}.tag:nth-child(even){rotate:2deg}
.tag i{display:block;background:var(--c);color:#fff;font:400 1.1rem Anton;font-style:normal;text-transform:uppercase;padding:10px;letter-spacing:.04em}
.tag b{font:800 1.5rem/1.1 Karla;display:block;margin:22px 10px 6px}
.tag span{font-size:.95rem;font-weight:600;padding:0 12px;display:block}
.tag img{width:84px;height:84px;border-radius:50%;margin:16px auto 0;object-fit:cover}

.flyers{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.flyer{background:#fff;padding:28px;box-shadow:0 14px 22px -10px rgba(22,22,29,.45);display:flex;flex-direction:column;gap:12px;position:relative}
.flyer:nth-child(2){rotate:-1.5deg}.flyer:nth-child(3){rotate:1.5deg}
.flyer h3{font-size:2.2rem}
.flyer .btn{margin-top:auto;align-self:flex-start}
form{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
input[type=email]{flex:1 1 170px;padding:12px;border:3px solid var(--ink);font:600 1rem Karla;background:#fff;color:var(--ink)}
footer{margin-top:60px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-weight:600;font-size:.95rem}

@media (max-width:900px){
 nav ul{display:none}nav .btn{margin-left:auto}
 .hero{min-height:0;padding-bottom:110px}
 .hero .pin,.hero .pin.pola{position:relative;right:auto!important;top:auto!important;display:inline-block;vertical-align:middle;width:27%!important;margin:26px 2% 0}
 .hero .pin.note,.hero .pin:last-child{display:none}
 .two{grid-template-columns:1fr}.two.r>.vis{order:0}
 .vis{min-height:330px}
 .todo{columns:1}
 .grid4,.tags{grid-template-columns:1fr 1fr}
 .tix,.flyers{grid-template-columns:1fr}
 .strip img{height:140px}
 .cluster{padding:100px 0 120px}
 .cluster>.sheet{scale:1.2 1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}