/* AIIS. AI is life. A drawing book. */
@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)}
.cover,.page,.mini,.prod .face,.s-hero,.s-list,.wp .paper,.contact,.cta,.how .paper,.bk,.bk-done,.split{filter:drop-shadow(0 8px 10px rgba(70,40,10,.25)) drop-shadow(0 1px 1px rgba(70,40,10,.3))}

/* chapter header */
.chead{position:relative;padding:34px 16px 8px}
.chlab{font:400 1.1rem/1 var(--hand);color:#4a3722;margin:0 0 6px 4px;transform:rotate(-2deg);display:inline-block;background:var(--paper);padding:6px 10px 4px;box-shadow:1px 2px 0 rgba(60,35,10,.2)}
.big2{font:400 clamp(3rem,14vw,6.6rem)/.95 var(--kid);margin:6px 0 0;letter-spacing:-.01em;max-width:14ch}
.chead .intro{max-width:40ch;font-size:1.3rem;margin:14px 0 0;color:#241b12}
.chead .intro a{color:var(--blue);text-decoration-thickness:2px}
.ch-doodle{position:absolute;right:14px;top:14px;width:54px;transform:rotate(14deg)}
.chead .big2{padding-right:20px}
.ch-doodle .dr{overflow:visible}

/* cover (home) */
.cover{position:relative;margin:-30px 0 0;padding:0 10px}
.cover .paper{padding:66px 20px 150px;transform:rotate(.4deg)}
.byline{font:400 1.05rem/1 var(--hand);margin:0 0 22px 4px;color:var(--brown);transform:rotate(-2deg);display:inline-block}
.big{font:400 clamp(4.2rem,19vw,10.5rem)/.9 var(--kid);margin:0;letter-spacing:-.02em}
.big .w:nth-child(2){margin-left:.1em}
.big .w:nth-child(3){display:block;margin-left:18%}
.cover-art{position:relative;margin:6px -6px 0 auto;width:min(100%,560px);aspect-ratio:560/460}
.cover-art .layer{position:absolute;inset:0}
.cover-art .dr{width:100%;height:100%;overflow:visible}
.lede{max-width:30ch;font-size:1.38rem;margin:18px 0 0}
.lede.two{margin-left:8%;max-width:32ch;transform:rotate(-1deg)}
.nope{position:relative;text-decoration:none;color:var(--ink);white-space:nowrap}
.nope .xout{position:absolute;left:-6%;top:-10%;width:112%;height:120%;overflow:visible}
.doodle-a{position:absolute;right:16px;top:20px;width:70px;transform:rotate(20deg);opacity:.9}
.card{position:relative;margin:-20px 10px 0 auto;width:min(92%,360px);background:#fff repeating-linear-gradient(transparent 0 33px,#9fc3e7 33px 35px);background-position:0 18px;padding:14px 22px 18px;transform:rotate(-3deg);box-shadow:0 8px 14px -6px rgba(60,35,10,.4);border-top:3px solid #e9877f;z-index:2}
.card-t{font:400 1.3rem/1 var(--kid);margin:6px 0 10px;color:var(--red)}
.card ol{list-style:none;margin:0;padding:0;font:400 1.08rem/35px var(--hand)}
.card a{display:flex;gap:6px;text-decoration:none}
.card a:hover span:first-child{text-decoration:underline wavy var(--blue) 1.5px}
.card .dots{flex:1;border-bottom:3px dotted rgba(38,35,34,.5);margin-bottom:12px}
.card .pn{color:var(--blue)}

/* 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}

/* peek: the six products as loose sheets */
.peek{position:relative;padding:0 12px;margin-top:60px}
.kraft-h{font:400 clamp(2.6rem,11vw,5rem)/1 var(--kid);margin:0 0 6px 6px;transform:rotate(-3deg);color:var(--ink)}
.kraft-p{margin:0 0 22px 8px;max-width:40ch;color:#241b12}
.minis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}
.mini{position:relative;transform:rotate(var(--rot))}
.mini a{display:flex;flex-direction:column;padding:18px 12px 16px;text-decoration:none;height:100%}
.mini-art .dr{width:100%;overflow:visible}
.mini-t{font:400 clamp(1.15rem,4.6vw,1.6rem)/1.05 var(--kid);margin-top:4px}
.mini-n{font:400 .98rem/1.2 var(--hand);color:var(--brown)}
.mini .tape{width:70px;height:24px;left:calc(50% - 35px);top:-10px}
.more{margin:30px 0 0 8px}
.crayon-link{position:relative;display:inline-block;font:400 1.5rem/1.1 var(--kid);text-decoration:none;padding-bottom:10px}
.crayon-link .uline{position:absolute;left:0;bottom:0;width:100%;height:14px;overflow:visible}

/* 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)}

/* call to action sheet */
.cta{padding:0 10px;margin-top:70px}
.cta .paper{padding:56px 22px 60px;transform:rotate(-.5deg);display:grid;gap:12px}
.h2big{font:400 clamp(2.5rem,11vw,5rem)/.98 var(--kid);margin:0;max-width:11ch}
.cta-art{width:min(100%,260px);transform:rotate(-5deg)}
.cta-say p{margin:0 0 14px;max-width:34ch}
.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}
.or{font:400 1.08rem/1.3 var(--hand)}
.or a{color:var(--blue)}

/* hover wiggle */
@keyframes wig{0%,100%{rotate:0deg}25%{rotate:-2.2deg}75%{rotate:2deg}}
.wig:hover{animation:wig .38s ease-in-out}

/* page turn corners */
.turns{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:40px 10px 0}
.turn{display:flex;align-items:flex-end;gap:8px;text-decoration:none;font:400 1rem/1.2 var(--hand);color:#2f241a}
.turn b{font:400 1.25rem/1.1 var(--kid);color:var(--ink)}
.turn .corner-dr{width:74px;height:74px;flex:none;transition:transform .25s;overflow:visible;filter:drop-shadow(-3px -3px 3px rgba(60,35,10,.25))}
.turn.next{margin-left:auto;text-align:right}
.turn.prev{flex-direction:row-reverse;text-align:left}
.turn.prev .corner-dr{transform:scaleX(-1)}
.turn.next:hover .corner-dr{transform:scale(1.18) rotate(-6deg)}
.turn.prev:hover .corner-dr{transform:scaleX(-1) scale(1.18) rotate(-6deg)}

/* showcase */
.showcase,.gallery{padding:0 10px;position:relative}
.cbox{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 14px;margin:24px 0 4px;padding:18px 16px 12px;background:var(--paper) var(--fiber);transform:rotate(-.6deg);box-shadow:0 8px 12px -6px rgba(60,35,10,.45);clip-path:polygon(0 4%,9% 0,22% 5%,37% 1%,52% 4%,68% 0,83% 5%,100% 2%,99% 96%,85% 100%,70% 95%,54% 99%,38% 95%,21% 100%,7% 96%,1% 100%)}
.cbox-t{flex-basis:100%;margin:0 0 2px;font:400 1.35rem/1 var(--kid);color:var(--brown);transform:rotate(-2deg)}
.cbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:6px 2px;cursor:pointer;color:var(--ink);font:400 1.05rem/1.1 var(--hand);text-align:left;min-height:44px}
.cstick{display:block;width:132px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cstick .dr{width:100%;overflow:visible}
.cbtn[aria-pressed="true"] .cstick{transform:translateY(-10px) rotate(-7deg)}
.cbtn[aria-pressed="true"] .clab{text-decoration:underline wavy 2px;text-underline-offset:5px}
.cbtn:hover .cstick{transform:translateY(-5px) rotate(-3deg)}
.count{font:400 1rem/1 var(--hand);color:#2f241a;margin:12px 4px 18px}
.prods{list-style:none;margin:0;padding:0;display:grid;gap:34px}
.prod{position:relative;transform:rotate(var(--rot));transition:opacity .3s,transform .3s}
.prod.out{display:none}
.prod.pop{animation:pop .4s ease-out}
@keyframes pop{from{opacity:0;transform:rotate(var(--rot)) translateY(14px) scale(.97)}}
.face{padding:28px 20px 26px}
.s-hero .pgno{position:absolute;right:22px;bottom:18px;font:400 1rem/1 var(--hand);color:#8d8a86}
.face .pgno{position:absolute;right:18px;top:14px;font:400 1rem/1 var(--hand);color:#8d8a86}
.p-art .dr{width:100%;max-width:360px;margin:0 auto;overflow:visible}
.ph{font:400 clamp(2rem,8vw,2.6rem)/1.02 var(--kid);margin:6px 0 0}
.ph a{text-decoration:none}
.side-note{font:400 1.08rem/1.2 var(--hand);margin:6px 0 0 14%;transform:rotate(-4deg);color:var(--brown)}
.copy{margin:8px 0 10px}
.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)}
.back{background-color:#fff;background-image:repeating-linear-gradient(transparent 0 31px,#cfdff0 31px 33px)}
.back h3{font:400 1.9rem/1 var(--kid);margin:0 0 10px}
.ticks{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.ticks li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start;line-height:1.3}
.ticks .tick{width:30px;height:30px;overflow:visible}
.facts{margin:0 0 12px;display:grid;gap:8px}
.facts div{display:grid;grid-template-columns:90px 1fr;gap:10px}
.facts dt{font:400 1.05rem/1.3 var(--kid);color:var(--red)}
.facts dd{margin:0;line-height:1.3}
.links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 12px}
.links a{color:var(--blue);text-decoration-thickness:2px;padding:6px 0}
.links .booklink{color:var(--red);font-weight:700}
/* flip only with JS: without it both sides just sit one under the other */
.js .flip{display:grid;perspective:1400px}
.js .flip>.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.4,.2,.2,1)}
.js .flip>.back{transform:rotateY(180deg)}
.js .prod.flipped .front{transform:rotateY(-180deg)}
.js .prod.flipped .back{transform:rotateY(0)}
html:not(.js) .back{margin-top:-4px}
.sticky-note{position:relative;background:#f6b6c9 var(--fiber);padding:20px 20px 16px;max-width:360px;margin:40px auto 0;transform:rotate(var(--rot));box-shadow:0 10px 12px -6px rgba(60,35,10,.45)}
.sticky-note p{margin:0 0 10px;line-height:1.35}
.sticky-note a{color:var(--blue);text-decoration-thickness:2px}
.sn-t{font:400 1.5rem/1 var(--kid)!important;margin:0 0 6px!important}

/* service page */
.back-to{margin:22px 16px 6px;font:400 1.08rem/1 var(--hand)}
.back-to a{color:#241b12;text-decoration:underline wavy 1.5px;text-underline-offset:5px}
.s-hero{position:relative;padding:0 10px;margin-top:14px}
.s-hero .paper{padding:52px 20px 44px;transform:rotate(.3deg)}
.s-hero h1{max-width:12ch}
.s-hero .lede{max-width:34ch}
.s-art{margin:16px auto 0;max-width:460px}
.s-art .dr{width:100%;overflow:visible}
.s-doodle{position:absolute;right:20px;top:40px;width:62px;transform:rotate(-14deg)}
.s-doodle .dr{overflow:visible}
.s-cta{margin:24px 0 0}
.s-grid{display:grid;gap:30px;padding:0 10px;margin-top:44px}
.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}
.s-list{padding:34px 20px 30px;transform:rotate(1deg)}
.s-list h2{font:400 clamp(1.7rem,7vw,2.3rem)/1.05 var(--kid);margin:0 0 14px}
.s-grid .sticky-note{margin:0 auto}
.s-steps{margin-top:50px}
.faq{padding:0 12px;margin-top:56px}
.faq .flaps{margin-top:16px}
.others{margin:56px 10px 0;padding:22px 18px 16px;background:var(--paper) var(--fiber);transform:rotate(-.8deg);box-shadow:0 8px 12px -6px rgba(60,35,10,.4)}
.others h2{font:400 1.7rem/1 var(--kid);margin:0 0 10px}
.others ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.others a{display:inline-block;text-decoration:none;font:400 1.3rem/1.2 var(--kid);padding:6px 0}

/* work */
.wps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:28px}
.wp{position:relative;transform:rotate(var(--rot))}
.wp.out{display:none}
.wp.pop{animation:pop .4s ease-out}
.wpbtn{display:block;width:100%;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit}
.js .wpbtn{cursor:zoom-in}
.wp .paper{display:block;padding:24px 18px 22px;background-color:#fbfaf6}
.wpbtn:hover .paper,.wpbtn:focus-visible .paper{animation:wig .38s ease-in-out}
.wlabel{font:400 1.45rem/1 var(--kid);display:inline-block;transform:rotate(-3deg)}
.blank{width:100%;margin:10px 0 6px;overflow:visible}
.empty{display:block;font:400 1.02rem/1.35 var(--hand);color:#6d6862}
.lb{border:0;padding:0;background:none;width:min(94vw,640px);max-height:92vh;overflow:visible}
.lb::backdrop{background:rgba(60,40,20,.6)}
.lb-paper{padding:30px 22px 22px;transform:rotate(-.8deg);box-shadow:0 20px 30px rgba(0,0,0,.35);max-height:88vh;overflow:auto}
.lb[open] .lb-paper{animation:lbin .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes lbin{from{opacity:0;transform:rotate(-6deg) scale(.9)}}
.lb-k{font:400 1.1rem/1 var(--hand);color:var(--brown);margin:0}
.lb h2{font:400 clamp(1.9rem,7vw,2.6rem)/1 var(--kid);margin:6px 0 8px}
.lb-art .blank{max-height:46vh}
.lb-p{margin:8px 0}
.lb-nav{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font:400 1.05rem/1 var(--hand)}
.lb-nav a{color:var(--red)}
.lb-x{position:absolute;right:10px;top:8px;font:400 1.1rem/1 var(--hand);background:#fff;border:2px dashed var(--red);padding:8px 12px 6px;cursor:pointer;transform:rotate(4deg);min-height:40px}

/* about */
.about{display:grid;gap:30px;padding:0 10px;margin-top:20px}
.letter{position:relative;max-width:640px}
.letter p{margin:0 0 2.1rem}
.sign{margin:0!important;transform:rotate(-3deg);transform-origin:left}
.doodle-d{position:absolute;right:26px;bottom:26px;width:64px;transform:rotate(-14deg)}
.pola-w{position:relative;width:min(80%,260px);margin:0 auto;background:#fff;padding:6px;transform:rotate(var(--rot));box-shadow:0 10px 14px -6px rgba(60,35,10,.45)}
.pola{width:100%;overflow:visible}
.split{padding:36px 20px 34px;transform:rotate(.6deg)}
.cols{display:grid;gap:18px;margin-top:14px}
.cols h3{font:400 1.7rem/1 var(--kid);margin:0 0 10px}

/* booking */
.bookf{padding:0 10px;display:grid;gap:26px;margin-top:20px}
.bk{border:0;margin:0;padding:34px 18px 26px;min-width:0}
.bk legend{float:left;width:100%;padding:0;margin:0 0 6px;font:400 clamp(1.6rem,7vw,2.3rem)/1.1 var(--kid);display:flex;align-items:center;gap:12px}
.bk legend+*{clear:both}
.bnum{display:inline-grid;place-items:center;width:46px;height:46px;flex:none;color:#fff;background:var(--green);border-radius:52% 48% 55% 45%/48% 55% 45% 52%;font-size:1.6rem}
.s1{transform:rotate(-.5deg)}.s2{transform:rotate(.5deg)}.s3{transform:rotate(-.4deg)}.s4{transform:rotate(.3deg)}
.s1 .bnum{background:var(--red)}.s2 .bnum{background:var(--blue)}.s3 .bnum{background:var(--purple)}.s4 .bnum{background:var(--orange)}
.bk-row{display:grid;gap:26px}
.chks{display:grid;grid-template-columns:1fr;gap:6px}
.chk{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;padding:6px 4px;min-height:48px;font-size:1.25rem}
.chk input,.slot input,.rad input{position:absolute;opacity:0;width:1px;height:1px}
.chk .box{position:relative;width:36px;height:36px;flex:none}
.chk .tick{width:36px;height:36px;overflow:visible}
.chk .tick path:not(:first-child){opacity:0;transition:opacity .15s}
.chk input:checked+.box .tick path{opacity:1}
.chk input:focus-visible+.box{outline:3px dashed var(--blue);outline-offset:4px}
.chk .crayon{font:400 1.3rem/1.1 var(--kid)}
.slots{display:flex;flex-wrap:wrap;gap:10px}
.slot{position:relative;cursor:pointer}
.slot span{display:block;min-width:84px;text-align:center;padding:12px 10px 10px;font:400 1.25rem/1 var(--kid);background:#fff;border:3px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;transition:transform .15s}
.slot:nth-child(even) span{transform:rotate(2deg)}.slot:nth-child(odd) span{transform:rotate(-2deg)}
.slot input:checked+span{background:var(--purple);color:#fff;border-color:var(--purple);transform:rotate(-4deg) scale(1.06)}
.slot input:focus-visible+span,.rad input:focus-visible+span{outline:3px dashed var(--blue);outline-offset:4px}
.sub{font:400 1.4rem/1 var(--kid);margin:22px 0 10px}
.rads{display:flex;flex-wrap:wrap;gap:8px 12px}
.rad{position:relative;cursor:pointer}
.rad span{display:block;padding:10px 14px 8px;background:#fff;border:2px dashed #8d8a86;border-radius:4px 10px 6px 12px;font:400 1.1rem/1.1 var(--hand)}
.rad input:checked+span{border:3px solid var(--orange);color:var(--ink);box-shadow:3px 3px 0 var(--orange)}
.fields{display:grid;gap:14px}
.fld{display:grid;gap:4px}
.fld>span{font:400 1.1rem/1.1 var(--hand)}
.fld input,.fld textarea{font:400 1.2rem/1.3 var(--body);padding:12px 12px 10px;border:0;border-bottom:3px solid var(--ink);background:#fff repeating-linear-gradient(transparent 0 31px,#cfdff0 31px 33px);border-radius:0;width:100%;color:var(--ink);min-height:48px}
.fld textarea{resize:vertical;line-height:33px;padding-top:6px}
.fld input:focus,.fld textarea:focus{outline:3px dashed var(--blue);outline-offset:3px}
.fld.bad input,.fld.bad textarea{border-bottom-color:var(--red);background-color:#fdeeee}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.nojs-date{display:flex;gap:10px;align-items:center;font-size:1.2rem}
.nojs-date input{font:inherit;padding:8px;border:2px solid var(--ink);background:#fff}
.js .cal:not([hidden])+.nojs-date{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.cal{position:relative;margin:4px 0 6px;max-width:420px}
.cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-m{font:400 1.5rem/1 var(--kid);color:var(--red)}
.cal-b{font:400 1rem/1 var(--hand);background:#fff;border:2px dashed var(--ink);padding:10px 12px 8px;cursor:pointer;min-height:44px;border-radius:3px}
.cal-b[disabled]{opacity:.35;cursor:default}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-w{font:400 .95rem/1 var(--hand);text-align:center;color:#6d6862;padding:4px 0}
.cal-d{position:relative;aspect-ratio:1;min-height:40px;font:400 1.2rem/1 var(--kid);background:none;border:0;cursor:pointer;color:var(--ink);border-radius:50%}
.cal-d:hover:not([disabled]){background:rgba(42,92,184,.1)}
.cal-d[disabled]{color:#b9b3ab;cursor:default;text-decoration:line-through 2px}
.cal-d[aria-pressed="true"]{color:var(--red)}
.cal-d .circ{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;pointer-events:none}
.cal-d.today::after{content:"";position:absolute;left:30%;right:30%;bottom:4px;height:3px;background:var(--blue);border-radius:2px}
.send{padding:6px 6px 0}
.pending{max-width:46ch;font:400 1.15rem/1.4 var(--hand);margin:18px 0 0;padding:12px 14px;background:#fff;transform:rotate(-.6deg);border-left:6px solid var(--orange)}
.status{font:400 1.15rem/1.4 var(--hand);min-height:1.4em}
.status a{color:var(--blue)}
.bk-err{background:#fff;border:3px solid var(--red);padding:14px 16px;font:400 1.15rem/1.4 var(--hand);transform:rotate(-.5deg)}
.bk-err ul{margin:6px 0 0;padding-left:20px}
.bk-done{margin:24px 10px 0;padding:40px 22px 34px}
.done-p{font-size:1.3rem;max-width:40ch}
.done-art{width:180px;margin:0 0 10px auto;transform:rotate(6deg)}
.done-art .dr{overflow:visible}
.bk-done .facts div{grid-template-columns:110px 1fr}
.bk-done a{color:var(--blue)}

/* contact */
.contact{padding:0 10px;margin-top:10px}
.contact .paper{padding:50px 22px 54px;transform:rotate(-.5deg);display:grid;gap:14px}
.env{max-width:460px;width:100%;transform:rotate(-4deg)}
.env .dr{overflow:visible}
.say p{margin:0 0 14px;max-width:34ch}
.mail{display:inline-block;font:400 clamp(1.15rem,5.3vw,2.3rem)/1.1 var(--kid);color:var(--blue);white-space:nowrap;text-decoration:none;border-bottom:4px solid var(--blue);padding-bottom:4px;transform:rotate(-2deg)}
.mail:hover{color:var(--red);border-color:var(--red)}
.say .or{margin-top:22px}
.doodle-e{width:180px;margin-left:auto;transform:rotate(-8deg)}

.foot{max-width:1240px;margin:0 auto;padding:30px 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}
.tape{position:absolute;width:118px;height:34px;background:rgba(238,228,198,.78);z-index:3;box-shadow:0 1px 2px rgba(0,0,0,.08);pointer-events:none}
.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)}

/* 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}

/* page turn: each chapter is a page in the book */
@view-transition{navigation:auto}
::view-transition-old(root){animation:turnout .5s cubic-bezier(.45,0,.2,1) both;transform-origin:0 50%}
::view-transition-new(root){animation:turnin .5s cubic-bezier(.3,.6,.2,1) both}
@keyframes turnout{to{transform:perspective(1600px) rotateY(-75deg);opacity:.2}}
@keyframes turnin{from{transform:translateX(3%) scale(.985);opacity:.4}}
.turning main.sheetmain{animation:turnout .32s cubic-bezier(.45,0,.2,1) both;transform-origin:0 50%}
.no-vt main.sheetmain{animation:turnin .45s cubic-bezier(.3,.6,.2,1) both}

/* bigger screens: a spread, nothing lines up on purpose */
@media (min-width:600px){
  .minis{grid-template-columns:repeat(3,1fr);gap:30px 22px}
  .chks{grid-template-columns:1fr 1fr}
  .wps{grid-template-columns:1fr 1fr}
  .fields{grid-template-columns:1fr 1fr}
  .fld.wide{grid-column:1/-1}
}
@media (min-width:900px){
  .top{padding:20px 26px 0;align-items:flex-end}
  .tabs{display:block;margin-left:auto}
  .tabs ol{display:flex;gap:4px;align-items:flex-end}
  .chap{display:none}
  .logo{font-size:2.3rem;align-self:flex-start}
  .cover{padding:0 24px;margin-top:-4px}
  .cover .paper{padding:70px 48px 110px;display:grid;grid-template-columns:1fr 1.05fr;grid-template-areas:"by art" "h art" "l art" "l2 ." "hint .";column-gap:10px}
  .byline{grid-area:by;align-self:end}.big{grid-area:h}.cover-art{grid-area:art;align-self:start;margin:30px -20px 0 -40px;width:auto}
  .lede{grid-area:l}.lede.two{grid-area:l2}.stk-hint{grid-area:hint}
  .card{position:absolute;right:7%;bottom:-150px;margin:0;width:340px;transform:rotate(3.5deg)}
  .cover .paper{padding:70px 48px 110px}
  .stkr{width:80px;height:80px}
  .s-star{left:2%;top:1%;bottom:auto}
  .s-aplus{left:auto;right:5%;top:5%;bottom:auto;width:88px}
  .s-robot{left:41%;top:auto;bottom:6%}
  .s-heart{left:auto;right:6%;top:auto;bottom:24%;width:70px}
  .s-wow{left:55%;top:2%;bottom:auto;width:92px}
  .s-smile{right:auto;left:30%;top:auto;bottom:8%;width:66px}
  .t-tr{right:-18px;top:6px}
  .doodle-a{right:auto;left:46%;top:36px}
  .peek{margin-top:190px;padding:0 30px}
  .minis{gap:44px 34px}
  .mini:nth-child(2){margin-top:40px}.mini:nth-child(5){margin-top:-20px}.mini:nth-child(6){margin-top:30px}
  .how,.cta,.showcase,.gallery,.s-hero,.contact{padding:0 30px}
  .sheet-how{padding:54px 50px 56px}
  .flaps{grid-template-columns:repeat(3,1fr);align-items:start;gap:24px}
  .flaps.four{grid-template-columns:repeat(4,1fr)}
  .faq .flaps{grid-template-columns:repeat(3,1fr)}
  .cta .paper{grid-template-columns:1.2fr 1fr;grid-template-areas:"h art" "say art";padding:70px 56px;align-items:center}
  .cta h2{grid-area:h}.cta-art{grid-area:art;justify-self:center;width:300px}.cta-say{grid-area:say}
  .chead{padding:50px 34px 10px}
  .ch-doodle{right:12%;top:50px;width:96px}
  .chead .big2{padding-right:0}
  .prods{grid-template-columns:repeat(3,1fr);gap:40px 30px;align-items:start}
  .prod:nth-child(3n+2){margin-top:40px}
  .cbox{padding:20px 22px 12px;gap:8px 18px}
  .s-hero .paper{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"h art" "n art" "l art" "c art";padding:70px 50px 60px;column-gap:30px;align-items:start}
  .s-hero h1{grid-area:h}.s-hero .side-note{grid-area:n}.s-hero .lede{grid-area:l}.s-cta{grid-area:c}.s-art{grid-area:art;margin:0;max-width:none;align-self:center}
  .s-doodle{right:auto;left:44%;top:30px}
  .s-grid{grid-template-columns:1.2fr 1fr;padding:0 30px;align-items:start}
  .s-grid .sticky-note{grid-column:1;grid-row:2;margin:-6px 0 0 auto;width:330px}
  .s-grid .s-what{grid-column:1;grid-row:1}
  .s-grid .s-list{grid-column:2;grid-row:1/span 2;margin-top:30px}
  .faq{padding:0 34px}
  .others{margin:60px 30px 0;max-width:820px}
  .wps{grid-template-columns:repeat(3,1fr);gap:40px 30px;align-items:start}
  .wp:nth-child(3n+2){margin-top:44px}.wp:nth-child(3n){margin-top:14px}
  .about{grid-template-columns:1.3fr 1fr;padding:0 30px;align-items:start}
  .pola-w{margin-top:60px}
  .split{grid-column:1/-1;padding:46px 46px 40px}
  .cols{grid-template-columns:1fr 1fr;gap:40px}
  .sheetl{padding:2.1rem 50px 2.6rem 80px}
  .sheetl::before{left:60px}.sheetl::after{left:18px}
  .bookf{padding:0 30px}
  .bk{padding:42px 34px 32px}
  .bk-row{grid-template-columns:1.1fr 1fr;align-items:start}
  .chks{grid-template-columns:repeat(4,1fr)}
  .contact .paper{grid-template-columns:1fr 1fr;grid-template-areas:"env say" "env pen";padding:70px 56px;align-items:center}
  .env{grid-area:env}.say{grid-area:say}.doodle-e{grid-area:pen}
  .turns{padding:50px 30px 0}
  .bk-done{margin:24px 30px 0;padding:50px 46px 40px}
  .done-art{float:right;width:280px;margin:0 20px 10px 30px}
  .foot{display:flex;justify-content:space-between;gap:20px;padding:34px 34px 50px}
}
@media (min-width:1100px){
  .big{font-size:11.5rem}
  .lede{font-size:1.5rem}
  .tab a{padding:12px 18px 16px;font-size:1.12rem}
}
@media (hover:none){.wig:hover,.stkr:hover,.wpbtn:hover .paper{animation:none}}
@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}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
@media print{body{background:#fff}.cover,.page,.mini,.prod .face,.wp .paper{filter:none}.stickers,.tabs,.chap,.turns{display:none}}

.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}}

/* ---------- hire the crew ---------- */
.hire-t{padding:0 10px;margin-top:40px}
.tcs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:34px}
.tc{position:relative;transform:rotate(var(--rot))}
.tc-p{display:grid;grid-template-columns:88px 1fr;grid-template-areas:"f n" "f r" "f s" "l l";gap:2px 16px;align-items:center;padding:28px 20px 22px;filter:drop-shadow(0 8px 10px rgba(70,40,10,.25))}
.tc-face{grid-area:f;width:88px}.tc-face .dr{width:100%;height:auto;overflow:visible}
.tc-n{grid-area:n;margin:0;font:400 clamp(1.5rem,6vw,2rem)/1.05 var(--kid)}
.tc-r{grid-area:r;margin:0;font:400 1.2rem/1.25 var(--hand)}
.tc-s{grid-area:s;margin:0;font:400 1.02rem/1.25 var(--hand);color:#6a5640}
.tc-links{grid-area:l;margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.tc-pick{display:inline-block;font:400 1.2rem/1 var(--kid);color:#fff;text-decoration:none;padding:12px 18px 10px;background:var(--ink) var(--fiber);transform:rotate(-1.5deg);box-shadow:3px 4px 0 rgba(38,35,34,.3)}
.tc-pick:hover{transform:rotate(1deg) translateY(-2px)}
.tc-go{font:400 1.1rem/1 var(--hand);color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px}
.tc .tape{width:70px;height:24px;left:calc(50% - 35px);top:-10px}
.hsteps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:18px}
.hs{display:flex;gap:14px;align-items:flex-start;background:#fff repeating-linear-gradient(transparent 0 31px,#cfdff0 31px 33px);background-position:0 8px;padding:16px 16px 6px;transform:rotate(var(--rot));box-shadow:0 6px 10px -6px rgba(60,35,10,.4)}
.hs-t{margin:4px 0 4px;font:400 1.3rem/1.15 var(--kid)}
.hs p{margin:0 0 10px;line-height:33px}
.hiref{margin-top:60px}
.hiref>.kraft-h{margin-bottom:0}
.tr .crayon{font-size:1.25rem}
.fields.two{margin-top:18px}
.hire-rules{padding:0 10px;margin-top:60px}
.hire-rules .std{display:inline-block;margin:0 0 1.05rem;padding:4px 12px 2px;border:3px solid var(--red);color:var(--red);font:400 1.1rem/1.5rem var(--kid);transform:rotate(-3deg)}
.rules{margin:0 0 2.1rem;padding-left:1.4rem;line-height:2.1rem}
.rules li{margin:0}
.rules strong{color:var(--blue)}
.foot-n{font-family:var(--hand);color:#5d5650}
@media (min-width:700px){.tcs{grid-template-columns:repeat(3,1fr);gap:24px}.tc-p{grid-template-columns:1fr;grid-template-areas:"f" "n" "r" "s" "l";text-align:left}.tc-face{width:96px}
  .hsteps{grid-template-columns:repeat(5,1fr);gap:14px}.hs{flex-direction:column}.fields.two{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.hire-t,.hire-rules{padding:0 30px}.hire-rules .sheetl{max-width:980px;margin:0 auto}.tcs .tc:nth-child(2){margin-top:30px}}
/* capital I in the crayon fonts reads like a small l, so it borrows Gloria */
.lt [data-capg]{font-family:var(--hand);font-weight:700;font-size:calc(.96em * var(--s))}
.cI{font-family:var(--hand);font-weight:400}
.hire-t .kraft-h{margin-bottom:26px}
/* ===== SEO pass: CTA strip, who-it-is-for, crew, notes ===== */
.cta-strip{position:relative;max-width:1100px;margin:40px auto 10px;padding:22px 22px 24px;background:#fff var(--fiber);transform:rotate(-.6deg);box-shadow:0 10px 16px -8px rgba(60,35,10,.5);font:400 1.2rem/1.45 var(--hand);color:#241b12}
.cta-strip p{margin:0 0 12px}
.cta-strip .crayon{font-size:1.6rem;color:var(--red);display:block;margin-bottom:4px}
.cta-strip .bigbtn .crayon{color:#fff;font-size:inherit;display:inline;margin:0}
.cta-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0!important}
.cta-btns .crayon-link{font-size:1.25rem;color:var(--blue)}
.s-who{margin:34px auto 0;max-width:980px}
.s-who a,.crew-more a,.note-sheet a{color:var(--blue);text-decoration-thickness:2px}
.crew-more{padding:30px 16px 0;max-width:980px;margin:0 auto}
.p-crew .tc-n{font-size:1.9rem}
.foot{flex-wrap:wrap}
.foot .foot-crew{flex-basis:100%}
.note{position:relative;max-width:900px;margin:0 auto;padding:10px 16px 0}
.note-art{width:min(70%,300px);margin:0 auto 10px;transform:rotate(-2deg)}
.note-art svg{width:100%;height:auto}
.note-h1{font:400 clamp(2rem,7vw,3rem)/1.1 var(--kid);margin:0 0 1.05rem;color:var(--ink,#262322)}
.note-by{font-size:1rem;color:#5d5650;margin:0 0 1.05rem!important}
.note-lede{font-size:1.3rem}
.note-sheet h3{font:400 1.45rem/2.1rem var(--kid);margin:0;color:var(--purple)}
.note-sheet ul,.note-sheet ol{margin:0 0 2.1rem;padding-left:1.4em}
.note-sheet li{margin:0}
.ncards{list-style:none;margin:20px 0 0;padding:0 16px;display:grid;gap:34px;max-width:1200px;margin-inline:auto}
.ncard{position:relative;transform:rotate(var(--rot))}
.ncard a{display:grid;gap:8px;padding:24px 22px 26px;color:#241b12;text-decoration:none;background:#fff var(--fiber)}
.ncard-art svg{width:100%;max-width:260px;height:auto}
.ncard-t{font-size:1.65rem;line-height:1.1}
.ncard-d{font:400 1.1rem/1.4 var(--hand)}
.ncard .tape{width:70px;height:24px;left:calc(50% - 35px);top:-10px}
@media (min-width:700px){.ncards{grid-template-columns:repeat(3,1fr);gap:26px}.cta-strip{padding:26px 34px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.cta-strip p{margin:0}.note-art{float:right;width:240px;margin:0 0 10px 20px}}
.note-art{position:relative;z-index:2}
@media (min-width:700px){.note-art{position:absolute;float:none;right:-30px;top:-34px;width:230px;margin:0;transform:rotate(4deg)}.note-h1{padding-right:200px}}