/* Ian S. at AIisLife. A crayon page. */
@font-face{font-family:"Finger Paint";src:url(../fonts/fingerpaint.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Gloria";src:url(../fonts/gloria.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Patrick Hand";src:url(../fonts/patrickhand.woff2) format("woff2");font-display:swap}
:root{
  --kid:"Finger Paint","Comic Sans MS",cursive;
  --hand:"Gloria","Comic Sans MS",cursive;
  --body:"Patrick Hand","Comic Sans MS",cursive;
  --ink:#262322;--red:#d9302c;--blue:#2a5cb8;--green:#2e9346;--orange:#ef7420;--purple:#7a3da8;--brown:#8b5a2b;
  --paper:#fffdf8;--kraft:#c59d6e;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:400 1.28rem/1.45 var(--body);background:var(--kraft) var(--grain);min-height:100vh}
.top,main,.foot{overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--paper);padding:8px 14px;z-index:9;font-family:var(--hand)}
.skip:focus{top:12px}
:focus-visible{outline:3px dashed var(--blue);outline-offset:5px;border-radius:12px 4px 14px 6px}

/* crayon wax texture */
.crayon,.wax{filter:url(#wax0)}
.crayon .lt{display:inline}
.lt .w{display:inline-block;white-space:nowrap}
.lt .ch{display:inline-block;transform:translateY(var(--y)) rotate(var(--r));font-size:calc(1em * var(--s))}
.c-red{color:var(--red)}.c-blue{color:var(--blue)}.c-green{color:var(--green)}.c-orange{color:var(--orange)}.c-purple{color:var(--purple)}


/* ---------- v3: a book with chapters ---------- */
html{scroll-padding-top:20px}
body{overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
.top{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 0;position:relative;z-index:6;max-width:1240px;margin:0 auto;view-transition-name:bookhead}
.logo{position:relative;display:inline-block;padding:12px 20px 8px;text-decoration:none;font:400 2rem/1 var(--kid);transform:rotate(-4deg);background:var(--paper);box-shadow:2px 3px 0 rgba(60,35,10,.25);flex:none}
.logo .frame{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);overflow:visible}
.logo:hover .crayon{animation:boil .42s steps(1) infinite}

/* chapter tabs: paper tabs sticking out of the top of the book */
.tabs{display:none}
.tabs ol,.chap ol{list-style:none;margin:0;padding:0}
.tab a{display:block;text-decoration:none;font:400 1.05rem/1 var(--hand);padding:12px 14px 16px;background:var(--paper) var(--fiber);border-radius:10px 14px 0 0/12px 10px 0 0;box-shadow:inset 0 -6px 0 var(--tc),0 2px 0 rgba(60,35,10,.18);transform:translateY(8px) rotate(calc((var(--i) - 2.5) * .8deg));transition:transform .18s}
.tab a:hover,.tab a:focus-visible{transform:translateY(2px) rotate(calc((var(--i) - 2.5) * .8deg))}
.tab a[aria-current]{transform:translateY(-4px) rotate(-1deg);box-shadow:inset 0 -12px 0 var(--tc),0 3px 0 rgba(60,35,10,.22);font-weight:700}
.t-red{--tc:var(--red)}.t-blue{--tc:var(--blue)}.t-purple{--tc:var(--purple)}.t-orange{--tc:var(--orange)}.t-green{--tc:var(--green)}.t-brown{--tc:var(--brown)}
.chap{margin-left:auto;position:relative}
.chap summary{list-style:none;cursor:pointer;font:400 1.1rem/1 var(--hand);background:var(--paper);padding:11px 16px 9px;transform:rotate(3deg);border:2px dashed var(--red);border-radius:3px;box-shadow:2px 3px 0 rgba(60,35,10,.25);margin-top:6px}
.chap summary::-webkit-details-marker{display:none}
.chap[open] summary{transform:rotate(-2deg)}
.chap nav{position:absolute;right:0;top:calc(100% + 10px);width:min(78vw,280px);background:#fff repeating-linear-gradient(transparent 0 41px,#9fc3e7 41px 43px);padding:8px 16px 10px;transform:rotate(-1.5deg);box-shadow:0 10px 18px -6px rgba(60,35,10,.5);border-top:3px solid #e9877f}
.chap .tab a{background:none;box-shadow:none;transform:none;padding:12px 4px 10px;font-size:1.25rem;border-radius:0}
.chap .tab a::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50% 40% 55% 45%;background:var(--tc);margin-right:10px;vertical-align:-1px}
.chap .tab a[aria-current]{text-decoration:underline wavy var(--tc) 2px;text-underline-offset:5px}

main.sheetmain{display:block;max-width:1240px;margin:0 auto;padding:0 0 10px;overflow-x:clip;position:relative}
.paper{position:relative;background:var(--paper) var(--fiber)}
/* stickers */
.stickers{position:absolute;inset:0;pointer-events:none;z-index:5}
.stkr{position:absolute;width:62px;height:62px;pointer-events:auto;touch-action:none;cursor:grab;filter:drop-shadow(0 3px 2px rgba(0,0,0,.28));transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--sr,0deg))}
.stkr svg{width:100%;height:100%;overflow:visible}
.stkr:hover{animation:wig .4s ease-in-out}
.stkr.drag{cursor:grabbing;filter:drop-shadow(0 14px 8px rgba(0,0,0,.3));z-index:9;animation:none}
.stkr:focus-visible{outline:3px dashed var(--blue);outline-offset:4px}
.s-star{left:5%;bottom:34px;--sr:-12deg}
.s-aplus{left:22%;bottom:42px;--sr:12deg;width:70px}
.s-robot{left:40%;bottom:30px;--sr:8deg}
.s-heart{left:57%;bottom:44px;--sr:-6deg;width:54px}
.s-wow{left:71%;bottom:30px;--sr:-10deg;width:72px}
.s-smile{right:3%;bottom:70px;--sr:10deg;width:52px}
.stk-hint{position:relative;z-index:4;font:400 1.02rem/1.3 var(--hand);color:var(--purple);margin:26px 0 0 4px;transform:rotate(-1.5deg);max-width:34ch}
html:not(.js) [data-js-only]{display:none!important}
.linkish{font:inherit;color:var(--blue);background:none;border:0;padding:4px 2px;text-decoration:underline wavy 1.5px;text-underline-offset:4px;cursor:pointer}

/* lift the flap: colored paper flaps taped at the top; lifting one shows the note underneath */
.how{padding:0 10px;margin-top:60px}
.sheet-how{padding:40px 20px 44px;transform:rotate(-.4deg)}
.h2{font:400 clamp(2.4rem,10vw,4rem)/1 var(--kid);margin:0}
.hint{font:400 1.02rem/1.3 var(--hand);color:#5d5650;margin:6px 0 16px}
.flaps{display:grid;gap:26px}
.flap{position:relative;transform:rotate(var(--rot));background:#fff repeating-linear-gradient(transparent 0 31px,#cfdff0 31px 33px);background-position:0 8px;box-shadow:0 6px 10px -5px rgba(60,35,10,.4);min-height:132px}
.flap summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:132px;padding:18px 18px 22px;background:var(--fc) var(--fiber);color:#fff;font:400 1.45rem/1.12 var(--kid);transform-origin:50% 0;transition:transform .55s cubic-bezier(.3,1.25,.4,1),filter .3s;position:relative;z-index:2;clip-path:polygon(0 0,100% 0,100% 88%,93% 94%,86% 90%,77% 97%,66% 92%,55% 98%,44% 91%,33% 96%,22% 90%,12% 97%,0 92%);filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}
.flap summary::-webkit-details-marker{display:none}
.flap summary:hover{transform:perspective(700px) rotateX(16deg)}
.flap summary:focus-visible{outline:none;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px var(--ink))}
.flap[open] summary{position:absolute;left:0;right:0;top:0;transform:perspective(800px) rotateX(76deg);filter:drop-shadow(0 10px 6px rgba(0,0,0,.25))}
.ftop{display:flex;align-items:flex-start;gap:12px}
.fnum{font:400 1.7rem/1 var(--kid);width:42px;height:42px;flex:none;display:grid;place-items:center;background:#fff;color:var(--fc);border-radius:48% 52% 46% 54%/55% 45% 55% 45%;transform:rotate(-6deg)}
.flift{font:400 1rem/1 var(--hand);align-self:flex-end;opacity:.95;border-bottom:2px dotted rgba(255,255,255,.85);padding-bottom:3px;transform:rotate(-3deg)}
.flap .tape{width:70px;height:24px;left:calc(50% - 35px);top:-12px;z-index:3}
.fbody{padding:46px 18px 8px;position:relative;z-index:1}
.flap[open] .ftop,.flap[open] .flift{opacity:0;transition:opacity .2s}
.fbody .fq{font:400 1.2rem/1.2 var(--kid);color:var(--fc);margin:0 0 6px}
.fbody p{margin:0 0 14px;line-height:33px}
.flap[open] .fbody{animation:peel .5s .1s ease-out both}
@keyframes peel{from{opacity:0;transform:translateY(-8px)}}
.f-red{--fc:var(--red)}.f-blue{--fc:var(--blue)}.f-green{--fc:var(--green)}.f-purple{--fc:var(--purple)}.f-orange{--fc:var(--orange)}

.bigbtn{position:relative;display:inline-block;font:400 clamp(1.4rem,6vw,2rem)/1 var(--kid);color:#fff;text-decoration:none;padding:18px 28px 16px;background:var(--red) var(--fiber);border:0;cursor:pointer;transform:rotate(-2deg);box-shadow:3px 4px 0 rgba(38,35,34,.85);transition:transform .15s,box-shadow .15s}
.bigbtn .frame{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);overflow:visible;pointer-events:none}
.bigbtn:hover{transform:rotate(1deg) translateY(-2px);box-shadow:5px 7px 0 rgba(38,35,34,.85)}
.bigbtn:active{transform:rotate(0) translateY(2px);box-shadow:1px 1px 0 rgba(38,35,34,.85)}
.bigbtn.small{font-size:1.25rem;padding:14px 20px 12px;background-color:var(--blue)}
.bigbtn[disabled]{opacity:.6;cursor:wait}
/* hover wiggle */
@keyframes wig{0%,100%{rotate:0deg}25%{rotate:-2.2deg}75%{rotate:2deg}}
.wig:hover{animation:wig .38s ease-in-out}
.flipbtn{font:400 1.12rem/1 var(--hand);background:#fff;border:2px dashed currentColor;color:var(--ink);padding:10px 14px 8px;cursor:pointer;transform:rotate(-2deg);border-radius:3px;min-height:44px}
.flipbtn:hover{background:var(--paper);transform:rotate(1deg)}
.sheetl{position:relative;background:#fff repeating-linear-gradient(transparent 0 calc(2.1rem - 2px),#b6cde8 calc(2.1rem - 2px) 2.1rem);background-position:0 1.1rem;padding:2.1rem 22px 2.6rem 64px;font:400 1.18rem/2.1rem var(--hand);transform:rotate(-1deg);box-shadow:0 10px 16px -8px rgba(60,35,10,.5)}
.sheetl::before{content:"";position:absolute;left:46px;top:0;bottom:0;width:2px;background:#e48c86}
.sheetl::after{content:"";position:absolute;left:12px;top:40px;bottom:40px;width:18px;background:radial-gradient(circle at 9px 9px,var(--kraft) 8px,transparent 9px) 0 0/18px 160px repeat-y}
.sheetl h2{font:400 clamp(1.9rem,7vw,2.6rem)/2.1rem var(--kid);margin:0 0 2.1rem}
.sheetl p{margin:0 0 2.1rem}
.sheetl strong{color:var(--red);font-weight:400}
/* parallax layers use the translate property so their rotate stays put */
[data-depth]{translate:calc(var(--mx,0) * 1px) calc((var(--py,0) + var(--my,0)) * 1px);will-change:translate}

/* drawing in, and line boil */
.js .dr path{stroke-dasharray:1 1}
.js .dr:not(.on) path{stroke-dashoffset:1}
.js .dr:not(.on) text{opacity:0}
.js .dr.on path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.5,.1,.3,1)}
.js .dr.on .fills path{transition-duration:1.6s;transition-delay:.5s}
.js .dr.on text{opacity:1;transition:opacity .4s .9s}
.js .tick path,.js .circ path,.js .crayon-dr path,.js .stk path,.js .corner-dr path,.js .uline path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.js .tick text,.js .stk text{opacity:1!important}
@keyframes boil{0%{filter:url(#wax0)}33%{filter:url(#wax1)}66%{filter:url(#wax2)}}
.mini a:hover .wax,.prod:hover .front .wax,.cover-art .l-cast .wax,.env:hover .wax,.s-art:hover .wax{animation:boil .42s steps(1) infinite}


.logo .lgw{white-space:nowrap}.logo .lgw .w{display:inline-block}.logo .lgw .w+.w{margin-left:.06em}
.logo [data-cap]{position:relative;padding:0 .07em}.logo [data-cap]::before,.logo [data-cap]::after{content:"";position:absolute;left:0;right:0;height:.085em;background:currentColor;border-radius:.05em;opacity:.9}.logo [data-cap]::before{top:.22em}.logo [data-cap]::after{bottom:.42em}
@media (max-width:420px){.logo{font-size:1.75rem;padding:10px 14px 6px}}
/* ---------- Ian's page ---------- */
.cover,.do .paper,.stop-p,.pf .face,.sheet-num,.sum,.hire .paper{filter:drop-shadow(0 8px 10px rgba(70,40,10,.25)) drop-shadow(0 1px 1px rgba(70,40,10,.3))}
.logo{font-size:1.8rem}
.logo .lt .w+.w{margin-left:.18em}
section{scroll-margin-top:14px}

/* cover */
.cover{position:relative;margin:-30px 0 0;padding:0 10px}
.cover .paper{padding:66px 20px 170px;transform:rotate(.4deg)}
.byline{font:400 1.05rem/1 var(--hand);margin:0 0 18px 4px;color:var(--brown);transform:rotate(-2deg);display:inline-block}
.byline a{color:inherit}
.big{font:400 clamp(3.6rem,17vw,8.6rem)/.92 var(--kid);margin:0;letter-spacing:-.02em}
.big .w:nth-child(3){display:block;margin-left:12%}
.role{font:400 clamp(1.5rem,6vw,2.3rem)/1.05 var(--kid);margin:18px 0 0;max-width:18ch;transform:rotate(-1.5deg)}
.role2{font:400 1.3rem/1.2 var(--hand);margin:6px 0 0 6px;color:#4a3722}
.lede{max-width:30ch;font-size:1.38rem;margin:18px 0 0}
.where{display:flex;align-items:center;gap:8px;margin:14px 0 0;font:400 1.15rem/1.3 var(--hand)}
.where .pin{width:26px;flex:none}.where .pin svg{overflow:visible}
.now{color:var(--purple)}
.verified{display:inline-block;margin:10px 0 0;font:400 1.05rem/1.2 var(--hand);padding:6px 10px 4px;border:2px dashed var(--blue);color:var(--blue);transform:rotate(-2deg)}
.cover-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin:26px 0 0}
.btn-up{position:relative;display:inline-block;font:400 clamp(1.35rem,5.6vw,1.9rem)/1 var(--kid);color:#fff;text-decoration:none;padding:18px 26px 16px;background:var(--red) var(--fiber);transform:rotate(-2deg);box-shadow:3px 4px 0 rgba(38,35,34,.85);transition:transform .15s,box-shadow .15s}
.btn-up .frame{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);overflow:visible;pointer-events:none}
.btn-up span{position:relative}
.btn-up:hover{transform:rotate(1deg) translateY(-2px);box-shadow:5px 7px 0 rgba(38,35,34,.85)}
.btn-up:active{transform:rotate(0) translateY(2px);box-shadow:1px 1px 0 rgba(38,35,34,.85)}
.crayon-link{position:relative;display:inline-block;font:400 1.15rem/1.1 var(--hand);text-decoration:none;padding:6px 0 12px;color:var(--blue)}
.crayon-link .uline{position:absolute;left:0;bottom:0;width:100%;height:12px;overflow:visible}
.portrait{position:relative;margin:30px auto 0;width:min(100%,460px);aspect-ratio:520/600}
.portrait .layer{position:absolute;inset:0}
.portrait .dr{width:100%;height:100%;overflow:visible}
.portrait figcaption{position:absolute;left:4%;bottom:-6px;font:400 1.05rem/1 var(--hand);color:var(--brown);transform:rotate(-4deg)}
.l-ian .wax,.l-props .wax{transform-origin:50% 90%}
.portrait:hover .l-ian .wax{animation:boil .42s steps(1) infinite}
.note{position:relative;margin:34px 4px 0 auto;width:min(92%,330px);background:#fff repeating-linear-gradient(transparent 0 33px,#9fc3e7 33px 35px);background-position:0 18px;padding:14px 22px 16px;transform:rotate(-3deg);box-shadow:0 8px 14px -6px rgba(60,35,10,.4);border-top:3px solid #e9877f;z-index:2}
.note-t{font:400 1.25rem/1.1 var(--kid);margin:6px 0 8px;color:var(--red)}
.note ol{list-style:none;margin:0;padding:0;font:400 1.2rem/35px var(--hand)}
.note .nn{color:var(--blue)}
.s-shield{left:4%;bottom:30px;--sr:-10deg}
.s-star{left:20%;bottom:44px;--sr:12deg}
.s-five{left:38%;bottom:28px;--sr:-6deg;width:70px}
.s-heart{left:56%;bottom:46px;--sr:8deg;width:54px}
.s-gg{left:71%;bottom:28px;--sr:-10deg;width:72px}
.s-smile{right:3%;bottom:76px;--sr:10deg;width:52px}

/* section heads on the kraft */
.kraft-h{font:400 clamp(2.5rem,10.5vw,4.8rem)/1 var(--kid);margin:0 0 8px 6px;transform:rotate(-2.5deg);max-width:16ch}
.kraft-p{margin:0 0 22px 8px;max-width:44ch;color:#241b12}
.kraft-p a{color:var(--blue);text-decoration-thickness:2px}
.kraft-p.small{font-size:1.15rem;margin-top:26px}
.h2{font:400 clamp(2.4rem,10vw,4rem)/1 var(--kid);margin:0}
.h3{font:400 clamp(1.8rem,7vw,2.5rem)/1 var(--kid);margin:0}
.hint{font:400 1.05rem/1.3 var(--hand);color:#5d5650;margin:8px 0 18px}

/* capital I gets serifs so it never reads as a small l */
.lt [data-capg],.logo [data-capg]{font-family:var(--hand);font-weight:700;font-size:calc(.96em * var(--s))}
.f-brown{--fc:var(--brown)}
.kraft-h{color:var(--ink)}
.kul{width:min(80%,560px);height:16px;margin:-4px 0 14px 8px}.kul.short{width:min(50%,260px)}
.kul .uline{width:100%;height:100%;overflow:visible}

/* what I do */
.do{padding:0 10px;margin-top:70px;position:relative}
.sheet-do{padding:44px 20px 40px;transform:rotate(-.4deg)}
.fbody p{margin:0 0 8px;line-height:33px}
.fsk-h{font:400 1rem/1 var(--hand)!important;color:#6d6862;margin:6px 0 4px!important}
.fsk{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font:400 1.02rem/1.6 var(--hand);color:var(--fc)}
.fsk li{text-decoration:underline wavy 1.4px;text-underline-offset:4px}
.box{margin:46px 0 0}
.crayons{list-style:none;margin:0;padding:18px 14px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 18px;background:#fff var(--fiber);border:3px solid var(--ink);border-radius:6px 14px 8px 12px/12px 6px 14px 8px;transform:rotate(.5deg)}
.cr{display:flex;align-items:center;gap:10px;transform:rotate(var(--rot));transition:transform .2s;min-height:36px}
.cr-dr{width:104px;flex:none;overflow:visible}
.cr-l{font:400 1.12rem/1.15 var(--hand)}
.cr:hover .cr-dr{transform:translateX(6px) rotate(-6deg)}.cr-dr{transition:transform .2s}

/* communities timeline */
.comm{padding:0 12px;margin-top:80px}
.road-w{position:relative;padding-left:44px}
.road{position:absolute;left:4px;top:0;bottom:0;width:36px;height:100%;overflow:visible}
.stops{list-style:none;margin:0;padding:0;display:grid;gap:34px}
.stop{position:relative;transform:rotate(var(--rot))}
.stop-dot{position:absolute;left:-46px;top:26px;width:38px}
.stop-dot svg{overflow:visible}
.stop-p{padding:26px 18px 22px}
.when{font:400 1.15rem/1 var(--kid);margin:0 0 8px}
.stop-t{font:400 1.45rem/1.15 var(--hand);margin:0 0 10px;font-weight:700}
.stop-r{display:flex;align-items:center;gap:8px;font:400 1.2rem/1 var(--kid)}
.stop-r .stars{width:150px;overflow:visible}
.hrs{margin:10px 0 0;font:400 1.15rem/1.2 var(--hand)}
.hrs b{font:400 1.4rem/1 var(--kid);color:var(--red)}
.stop .tape{width:80px;height:26px;left:calc(50% - 40px);top:-12px}

/* portfolio cards */
.work{padding:0 12px;margin-top:80px}
.pfs{list-style:none;margin:0;padding:0;display:grid;gap:40px}
.pf{position:relative;transform:rotate(var(--rot))}
.pf .tape{width:80px;height:26px;left:calc(50% - 40px);top:-12px;z-index:3}
.face{padding:26px 20px 24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pf-art{width:100%;max-width:240px;margin:0 auto}.pf-art .dr{width:100%;max-width:300px;margin:0 auto;overflow:visible}
.pf-t{font:400 1.45rem/1.12 var(--kid);margin:0}
.back{background-color:#fff;background-image:repeating-linear-gradient(transparent 0 31px,#cfdff0 31px 33px)}
.back p{margin:0;line-height:1.35}
.pf-k{font:400 1rem/1 var(--hand)!important}
.pf-bt{font:400 1.3rem/1.15 var(--kid)!important}
.back a{color:var(--blue);text-decoration-thickness:2px}
.js .pf-in{display:grid;perspective:1400px}
.js .pf-in>.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.4,.2,.2,1)}
.js .pf-in>.back{transform:rotateY(180deg)}
.js .pf.flipped .front{transform:rotateY(-180deg)}
.js .pf.flipped .back{transform:rotateY(0)}
html:not(.js) .flipbtn{display:none}
html:not(.js) .back{margin-top:-4px}
.pf:hover .front .wax{animation:boil .42s steps(1) infinite}

/* numbers */
.nums{padding:0 10px;margin-top:80px;position:relative}
.sheet-num{padding:44px 20px 40px;transform:rotate(.4deg)}
.numgrid{display:grid;gap:30px}
.num{display:grid;grid-template-columns:110px 1fr;grid-template-areas:"a v" "a c";column-gap:16px;align-items:center}
.num-art{grid-area:a}.num-art .dr{width:100%;overflow:visible}
.n-jobs{grid-template-columns:1fr;grid-template-areas:"a" "v" "c"}
.n-jobs .num-art{max-width:380px}
.num-v{grid-area:v;font:400 clamp(2rem,8vw,2.8rem)/1 var(--kid);margin:0;align-self:end}
.num-c{grid-area:c;margin:4px 0 0;font:400 1.15rem/1.25 var(--hand);color:#4a3722;align-self:start}

/* clients say */
.clients{padding:0 12px;margin-top:80px}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:24px 18px}
.tag{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--paper) var(--fiber);padding:20px 26px 16px;transform:rotate(var(--rot));box-shadow:0 6px 10px -5px rgba(60,35,10,.45)}
.tag-w{font:400 1.5rem/1 var(--kid)}
.tag-n{display:flex;align-items:center;gap:8px;font:400 1rem/1 var(--hand);color:#5d5650}
.tag-n .stally{width:84px;overflow:visible}
.tag .circ{position:absolute;inset:-8px -12px;width:calc(100% + 24px);height:calc(100% + 16px);overflow:visible;pointer-events:none;opacity:0;transition:opacity .25s}
.tag:hover .circ,.tag:focus-within .circ{opacity:1}
.sum{position:relative;margin:44px 6px 0;padding:30px 22px 22px;transform:rotate(-1deg);max-width:640px}
.sum-k{margin:0 0 6px;font:400 1.05rem/1.2 var(--hand);color:#5d5650}
.sum-q{margin:0;font:400 1.4rem/1.3 var(--hand);color:var(--purple)}
.sum-s{margin:10px 0 0;font:400 .98rem/1.2 var(--hand);color:#8d8a86}

/* when and how */
.avail{padding:0 12px;margin-top:80px}
.sheetl{clip-path:none}
.h3s{font:400 1.5rem/2.1rem var(--kid);margin:0;color:var(--red)}
.ln{list-style:none;margin:0 0 2.1rem;padding:0}
.ln b{font-weight:400;color:var(--blue)}
.cols{display:grid;gap:0 30px}
.globe-w{width:130px;margin:-10px 0 0 auto;transform:rotate(8deg)}
.globe-w .dr{overflow:visible}

/* hire */
.hire{padding:0 10px;margin-top:80px}
.hire .paper{padding:56px 22px 50px;transform:rotate(-.5deg);display:grid;gap:18px}
.env{max-width:420px;width:100%;transform:rotate(-4deg)}
.env .dr{overflow:visible}
.say p{margin:12px 0 22px;max-width:34ch}
.say .h2{max-width:13ch}
.big-btn{font-size:clamp(1.5rem,6.4vw,2.3rem);padding:22px 30px 20px}
.crew{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:8px;text-decoration:none;margin-top:18px;justify-self:start;transform:rotate(-2deg);padding:10px 14px 6px;background:#fff;box-shadow:2px 3px 0 rgba(60,35,10,.2)}
.crew-k{font:400 1.05rem/1 var(--hand)}
.logo-s{font:400 1.7rem/1 var(--kid)}
.logo-s .lgw{white-space:nowrap}.logo-s .lgw .w{display:inline-block}.logo-s .lgw .w+.w{margin-left:.06em}
.logo-s [data-cap]{position:relative;padding:0 .07em}.logo-s [data-cap]::before,.logo-s [data-cap]::after{content:"";position:absolute;left:0;right:0;height:.085em;background:currentColor;border-radius:.05em;opacity:.9}.logo-s [data-cap]::before{top:.22em}.logo-s [data-cap]::after{bottom:.42em}
.crew:hover .logo-s{animation:boil .42s steps(1) infinite}
.hire .t-top{left:calc(50% - 59px)}

.foot{max-width:1240px;margin:0 auto;padding:40px 18px 40px;font:400 1.05rem/1.4 var(--hand);color:#2f241a}
.foot p{margin:0 0 4px}
.foot a{color:inherit;text-decoration-thickness:1.5px}
.t-top{left:calc(50% - 59px);top:-14px;transform:rotate(-4deg)}
.t-tl{left:-18px;top:6px;transform:rotate(-38deg)}
.t-tr{right:-6px;top:4px;transform:rotate(36deg)}
.tab a{font-size:1rem;padding:11px 12px 15px}

@media (min-width:600px){
  .pfs{grid-template-columns:1fr 1fr;gap:44px 30px}
  .numgrid{grid-template-columns:1fr 1fr}
  .n-jobs{grid-column:1/-1}
  .cols{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .top{padding:20px 26px 0;align-items:flex-end}
  .tabs{display:block;margin-left:auto}
  .tabs ol{display:flex;gap:3px;align-items:flex-end}
  .chap{display:none}
  .logo{font-size:2.1rem;align-self:flex-start}
  .cover{padding:0 24px;margin-top:-4px}
  .cover .paper{padding:70px 48px 130px;display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"by art" "h art" "r art" "r2 art" "l art" "w art" "v note" "cta note" "hint .";column-gap:30px;align-items:start}
  .byline{grid-area:by;align-self:end}.big{grid-area:h}.role{grid-area:r}.role2{grid-area:r2}.lede{grid-area:l}.where{grid-area:w}.verified{grid-area:v;justify-self:start}.cover-cta{grid-area:cta}.stk-hint{grid-area:hint}
  .portrait{grid-area:art;margin:10px 0 0;width:100%;max-width:520px;justify-self:center}
  .note{grid-area:note;margin:-10px 10px 0 auto;transform:rotate(3deg)}
  .stkr{width:78px;height:78px}
  .s-shield{left:47%;top:3%;bottom:auto}
  .s-star{left:2%;top:1%;bottom:auto}
  .s-five{left:auto;right:4%;top:4%;bottom:auto;width:88px}
  .s-heart{left:42%;top:auto;bottom:7%;width:62px}
  .s-gg{left:auto;right:30%;top:auto;bottom:5%;width:90px}
  .s-smile{right:3%;top:auto;bottom:6%;width:62px}
  .do,.nums,.hire{padding:0 30px}
  .comm,.work,.clients,.avail{padding:0 40px}
  .sheet-do,.sheet-num{padding:60px 54px 56px}
  .flaps{grid-template-columns:repeat(3,1fr);align-items:start;gap:30px 24px}
  .road-w{padding-left:0}
  .road{left:calc(50% - 18px)}
  .stops{gap:0}
  .stop{width:calc(50% - 44px)}
  .stop.st-r{margin-left:auto;margin-top:-60px}
  .stop.st-l+.stop.st-r{margin-top:-90px}
  .stop.st-l{margin-top:-40px}.stop:first-child{margin-top:0}
  .stop.st-l .stop-dot{left:auto;right:-62px}
  .stop.st-r .stop-dot{left:-62px}
  .pfs{grid-template-columns:repeat(4,1fr);gap:30px 24px;align-items:start}
  .pf:nth-child(2){margin-top:40px}.pf:nth-child(4){margin-top:24px}
  .numgrid{grid-template-columns:1.4fr 1fr 1fr;grid-template-areas:"j h e" "j s s";gap:36px 34px;align-items:start}
  .n-jobs{grid-column:auto;grid-area:j}
  .num{grid-template-columns:1fr;grid-template-areas:"a" "v" "c"}
  .num-art.sq{max-width:150px}
  .num:nth-child(4){grid-area:s;grid-template-columns:150px 1fr;grid-template-areas:"a v" "a c";column-gap:20px}
  .sheetl{padding:2.1rem 50px 2.6rem 80px;max-width:980px;margin:0 auto}
  .sheetl::before{left:60px}.sheetl::after{left:18px}
  .hire .paper{grid-template-columns:1fr 1.1fr;grid-template-areas:"env say" "crew say";padding:70px 56px;align-items:center}
  .env{grid-area:env}.say{grid-area:say}.crew{grid-area:crew}
  .foot{display:flex;justify-content:space-between;gap:20px;padding:40px 34px 50px}
}
@media (min-width:1100px){
  .big{font-size:9.4rem}
  .lede{font-size:1.5rem}
  .tab a{padding:12px 15px 16px;font-size:1.08rem}
}
@media (hover:none){.stkr:hover,.cr:hover{animation:none;transform:rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .dr path,.js .dr:not(.on) path{stroke-dashoffset:0!important}
  .js .dr text{opacity:1!important}
  .wax,.crayon{animation:none!important}
  [data-depth]{translate:none!important}
}
@media print{body{background:#fff}.cover,.do .paper,.stop-p,.pf .face,.sheet-num,.sum,.hire .paper{filter:none}.stickers,.tabs,.chap{display:none}}