:root{--bg:#d8d0c3;--paper:#e8ddc8;--ink:#171310;--brown:#503a2c;--accent:#76553c;--red:#79392d;--mono:'Courier Prime',monospace;--marker:'Permanent Marker',cursive;--serif:'IM Fell English',Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:var(--ink);background:var(--bg);font:18px/1.5 var(--mono);background-image:radial-gradient(ellipse at 10% 30%,#76553c12,transparent 45%),repeating-linear-gradient(93deg,#503a2c04 0 1px,transparent 1px 4px)}body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:5px}.skip{position:fixed;top:-70px;z-index:100;background:var(--paper);padding:12px}.skip:focus{top:5px}.nav{position:fixed;z-index:20;top:22px;left:3%;width:94%;display:flex;align-items:center;gap:35px;padding:15px 24px;border:1px solid #514637;background:#e8ddc8f5;box-shadow:3px 5px 0 #352c1922;transform:rotate(-.3deg)}.brand{font-family:var(--marker);font-size:24px;line-height:1.1}.brand small{font:12px var(--mono);display:block;letter-spacing:3px;margin-top:5px}.nav nav{display:flex;gap:32px;margin-left:auto;font-size:14px;font-weight:bold}.nav nav a:hover{text-decoration:underline;text-underline-offset:5px}.nav-ca{background:transparent;border:0;border-left:1px solid #8a7b67;padding-left:24px;font-size:12px}.nav-ca span{background:var(--ink);color:var(--paper);padding:7px;margin-left:12px}.menu-toggle{display:none}.scene{min-height:100vh;width:100%;position:relative}.hero{overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:125px 3% 45px}.hero-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,#d8d0c377,#d8d0c3 66%),url('assets/pipejak-banner.png') left bottom/auto 76% no-repeat;opacity:.22;filter:grayscale(1)}.hero-inner{width:100%;max-width:1700px;margin:auto;display:grid;grid-template-columns:46% 54%;align-items:center;position:relative}.portrait{position:relative;align-self:end}.portrait img{width:122%;max-width:none;display:block;margin-left:-14%;mix-blend-mode:multiply;height:min(82vh,1050px);object-fit:contain;object-position:bottom}.portrait-label{position:absolute;left:9%;top:1%;font-size:12px;letter-spacing:2px;transform:rotate(-7deg)}.scribble{position:absolute;left:1%;top:37%;font:clamp(17px,1.7vw,27px)/1.3 var(--marker);transform:rotate(-10deg)}.hero-copy{padding:20px 0 60px;position:relative;z-index:2}.eyebrow{font-size:13px;letter-spacing:1px;border-bottom:1px solid #827463;padding-bottom:18px;display:flex;justify-content:space-between;gap:10px}.eyebrow span{font-size:11px}h1{font:clamp(65px,7.6vw,132px)/1.12 var(--marker);letter-spacing:-.055em;margin:25px 0 8px;transform:rotate(-3deg);white-space:nowrap}.ticker{font:bold clamp(25px,3vw,45px) var(--mono);display:flex;align-items:center;gap:35px}.stamp{font:bold 12px/1.2 var(--mono);border:3px double var(--red);padding:9px 12px;color:var(--red);transform:rotate(-10deg);max-width:165px;text-align:center;letter-spacing:2px}blockquote{font:clamp(25px,2.35vw,40px)/1.3 var(--serif);margin:32px 0}.actions{display:flex;gap:12px;flex-wrap:wrap}.button{border:1px solid var(--ink);background:var(--paper);padding:15px 23px;box-shadow:3px 3px 0 #4c3d2833;font-size:15px;font-weight:bold;transition:transform .2s,box-shadow .2s}.button:hover{transform:rotate(-1deg) translateY(-3px);box-shadow:4px 6px 0 #4c3d2833}.dark{background:var(--ink);color:var(--paper)}.buy-button{min-width:180px}.buy-button span+span{display:none}.buy-button:hover span:first-child{display:none}.buy-button:hover span+span{display:inline}.contract{display:flex;align-items:center;border:1px solid #6f6250;margin-top:25px;max-width:650px;min-height:55px;background:#e8ddc84d}.contract>span{padding:12px;border-right:1px solid #6f6250;font-weight:bold}.contract code{font:13px var(--mono);padding:12px;overflow-wrap:anywhere;min-width:0;flex:1}.contract button{padding:12px;border:0;background:transparent;font-size:12px;font-weight:bold}.fine{font-size:12px;color:#655444;margin:12px 0}.scene-foot{position:absolute;bottom:20px;left:4%;right:4%;display:flex;justify-content:space-between;border-top:1px solid #847767;padding-top:12px;font-size:11px;letter-spacing:1px}.smoke{position:absolute;left:5%;top:36%;width:80px;height:180px;pointer-events:none}.smoke i{position:absolute;bottom:0;width:32px;height:90px;border-radius:50%;background:#fff9;filter:blur(12px);animation:smoke 7s infinite ease-out}.smoke i:nth-child(2){animation-delay:-2.3s}.smoke i:nth-child(3){animation-delay:-4.7s}@keyframes smoke{from{opacity:0;transform:translate(0,50px) scale(.4)}30%{opacity:.45}to{opacity:0;transform:translate(35px,-170px) scale(1.8)}}.banner-section{padding:65px 4% 90px;background:#b7aea077}.banner-paper{max-width:1600px;margin:auto;padding:12px 12px 0;background:var(--paper);border:1px solid #766651;box-shadow:9px 13px 0 #3a2a1726;transform:rotate(-1deg);position:relative}.banner-paper img{width:100%;display:block}.poster-caption{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;padding:13px 4px}.tape{position:absolute;left:45%;top:-20px;width:150px;height:40px;background:#b6a07699;transform:rotate(3deg);z-index:2}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);z-index:50;background:var(--ink);color:var(--paper);padding:15px 22px;box-shadow:4px 4px 0 #76553c66;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;width:max-content;font-size:15px}.toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:2000px){body{font-size:22px}.hero-copy{padding-bottom:100px}.button{font-size:18px;padding:20px 28px}}@media(max-width:1000px){.nav{gap:15px}.nav nav{gap:18px}.nav-ca{display:none}.hero-inner{grid-template-columns:43% 57%}.hero{padding-top:135px}.portrait img{width:150%;margin-left:-32%;height:72vh}h1{font-size:8vw}.eyebrow{display:block}.eyebrow span{display:block;margin-top:6px}.ticker{gap:15px}.button{padding:13px;font-size:13px}.scribble{left:-2%;font-size:16px}.stamp{font-size:10px}}@media(max-width:650px){html{scroll-padding-top:90px}.nav{top:12px;padding:12px 16px}.brand{font-size:20px}.menu-toggle{display:block;margin-left:auto;background:none;border:0;font-size:13px}.nav nav{display:none;position:absolute;top:100%;left:-1px;right:-1px;padding:22px;background:var(--paper);border:1px solid var(--brown);flex-wrap:wrap}.nav nav.open{display:flex}.hero{padding:115px 6% 58px;min-height:100svh}.hero-inner{display:flex;flex-direction:column}.hero-copy{order:0;padding:0;width:100%}.hero .portrait{order:1;width:100%;margin-top:30px}.hero .portrait img{height:52vh;min-height:330px;width:110%;margin-left:-5%}.portrait-label{top:7%}.hero h1{font-size:12.6vw;margin:19px 0 8px}.eyebrow{display:flex;font-size:10px;padding-bottom:10px}.eyebrow span{font-size:9px;margin:0}.ticker{font-size:25px;justify-content:space-between}.stamp{font-size:9px;padding:5px 8px}.hero blockquote{font-size:25px;margin:22px 0}.actions{gap:8px}.button{font-size:12px;padding:13px 12px}.buy-button{min-width:145px}.contract{margin-top:18px}.fine{font-size:10px}.scene-foot{font-size:9px;bottom:14px}.scene-foot>span{max-width:47%}.scribble{left:0;top:30%;font-size:19px}.smoke{left:12%;top:25%}.banner-section{padding:45px 4% 55px}.banner-paper{padding:6px 6px 0}.poster-caption{font-size:8px;gap:20px}.tape{width:80px;height:26px;top:-15px}.toast{font-size:13px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
:root{color-scheme:light}.section-pad{padding:75px max(5%,calc((100vw - 1600px)/2)) 65px}.section-top{display:flex;justify-content:space-between;border-top:1px solid #8c7d68;padding-top:12px;font-size:12px;letter-spacing:1.5px}h2{font:clamp(55px,6.8vw,112px)/1.06 var(--marker);letter-spacing:-.035em;margin:35px 0 55px}h3{margin:0}.case-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:7%;align-items:center}.dossier{position:relative;background:var(--paper);padding:40px 7%;box-shadow:9px 11px 0 #a5998355;border:1px solid #9a8b73;transform:rotate(-1deg)}.file-tab{position:absolute;top:-31px;left:-1px;background:var(--paper);border:1px solid #9a8b73;border-bottom:0;padding:7px 28px;font-size:12px}.document-head{display:flex;justify-content:space-between;font-size:10px;gap:20px;border-bottom:2px solid #6c5c46;padding-bottom:14px}.document-head span:last-child{color:var(--red)}.dossier h3{font:clamp(29px,3vw,48px)/1.15 var(--serif);margin:25px 0}.no-list{border-left:2px solid var(--red);padding-left:20px}.no-list p{margin:0;font-size:clamp(18px,1.7vw,25px)}.dossier>p{font-size:clamp(15px,1.5vw,22px)}.dossier .interesting{font:clamp(42px,5vw,75px) var(--marker);margin:15px 0 25px;transform:rotate(-4deg)}.document-foot{font-size:11px;display:flex;justify-content:space-between;border-top:1px solid #9a8b73;padding-top:15px}.case-stamp{position:absolute;right:5%;bottom:95px;transform:rotate(12deg)}.case-suspect{text-align:center;position:relative}.suspect-photo{padding:15px 15px 20px;background:#e9e1d3;transform:rotate(5deg);box-shadow:5px 10px 12px #33271333}.suspect-photo img{width:100%;max-height:55vh;object-fit:contain;mix-blend-mode:multiply;display:block}.suspect-photo>span{font-size:12px}.hand-note{font:clamp(24px,2.6vw,38px)/1.3 var(--marker);transform:rotate(-7deg);margin:28px 0}.mystery{background:var(--paper);border:1px solid var(--brown);padding:6px 17px;font-family:var(--marker);transform:rotate(5deg);box-shadow:2px 3px 0 #503a2c33}#mystery-note{background:var(--paper);padding:16px;max-width:290px;margin:15px auto;font-size:16px;border:1px solid var(--brown);transform:rotate(-3deg)}.evidence{background:#b7aea0}.evidence h2{margin-bottom:30px}.board{position:relative;height:650px;border:12px solid #574332;background-color:#9d8263;background-image:radial-gradient(#503a2c55 .8px,transparent .8px),radial-gradient(#e8ddc877 .7px,transparent .7px);background-size:5px 7px,9px 8px;box-shadow:inset 0 0 50px #36210f66,6px 9px 0 #4b3b2d33}.strings{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(1px 2px 1px #2b120f55)}.strings path{fill:none;stroke:#7f3027;stroke-width:3}.evidence-note{position:absolute;width:27%;padding:33px 23px 25px;background:var(--paper);box-shadow:4px 7px 10px #281a1555;transition:transform .25s,box-shadow .25s;z-index:2;transform:rotate(var(--rotation))}.evidence-note:hover,.evidence-note:focus-visible{transform:translateY(-5px) rotate(calc(var(--rotation) + 2deg));box-shadow:7px 13px 17px #281a1555}.evidence-note small{font-size:10px;letter-spacing:1px}.evidence-note h3{font:bold clamp(18px,2vw,30px) var(--mono);margin-top:14px}.evidence-note p{font:clamp(26px,3vw,45px)/1.2 var(--marker);margin:8px 0 15px;white-space:nowrap}.pin{position:absolute;top:10px;left:50%;width:11px;height:11px;background:#7c3027;border:2px solid #aa6556;border-radius:50%;box-shadow:2px 3px 3px #0007}.note-number{position:absolute;bottom:10px;right:12px;font-size:12px;color:#8b7962}.n1{left:4%;top:7%;--rotation:-5deg}.n2{right:4%;top:9%;--rotation:4deg}.n3{left:7%;bottom:8%;--rotation:3deg}.n4{right:3%;bottom:7%;--rotation:-4deg}.board-photo{position:absolute;width:34%;left:33%;top:16%;background:#e6decc;transform:rotate(-3deg);padding:17px 12px 45px;box-shadow:4px 8px 12px #281a1577}.board-photo img{width:100%;display:block;mix-blend-mode:multiply}.board-photo>small{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:12px}.knows{position:absolute;bottom:60px;left:-10%;width:120%;text-align:center;background:var(--paper);border:3px double var(--red);color:var(--red);font:bold clamp(15px,1.8vw,25px) var(--mono);padding:8px 4px;transform:rotate(7deg);box-shadow:2px 3px 0 #2b1f1933}.board-caption{position:absolute;bottom:8px;left:35%;font-size:9px}.buy{display:flex;flex-direction:column;justify-content:center}.buy h2{max-width:1100px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0 65px}.step{position:relative;background:var(--paper);border-top:4px solid var(--brown);min-height:270px;padding:30px 20px;box-shadow:5px 7px 0 #503a2c22;transform:rotate(-2deg)}.step:nth-child(2){transform:rotate(1deg) translateY(25px)}.step:nth-child(3){transform:rotate(-1deg) translateY(-10px)}.step:nth-child(4){transform:rotate(2deg) translateY(30px)}.step-num{font:bold 125px/1 var(--serif);position:absolute;right:12px;top:0;color:#76553c20}.step small{font-size:9px;position:relative}.step h3{position:relative;font:bold clamp(21px,2vw,30px) var(--mono);margin:55px 0 13px;white-space:nowrap}.step p{position:relative;font-size:16px}.step .stamp{display:inline-block;padding:5px 12px;font-size:12px}.step-link{border:0;border-bottom:1px solid;background:none;padding:0;font-size:11px}.buy-bottom{display:flex;align-items:center;justify-content:space-between;gap:60px}.buy-bottom>div{width:55%}.buy-bottom .contract{max-width:none}.buy-bottom .eyebrow{font-size:12px;border:0;padding:0}.closing{background:#c9c0b1;text-align:center;overflow:hidden;padding-bottom:0}.closing h2{margin:35px 0 0;font-size:clamp(65px,8vw,135px)}.case-status{font:clamp(25px,3vw,44px) var(--marker);color:var(--red);margin:8px 0 -15px;min-height:1.6em;transition:opacity .25s,transform .25s}.case-status.fading{opacity:0;transform:rotate(-3deg) scale(.96)}.closing-portrait{position:relative;width:min(560px,70%);margin:auto}.closing-portrait img{display:block;width:100%;max-height:52vh;object-fit:contain;mix-blend-mode:multiply}.closing-aside{position:absolute;right:-20%;top:40%;font:28px/1.2 var(--marker);transform:rotate(9deg)}.closing-links{position:relative;margin:-25px auto 40px;max-width:650px;padding:20px 25px;background:var(--paper);box-shadow:5px 7px 0 #503a2c22;transform:rotate(-1deg)}.closing-links .actions{justify-content:center}.closing-links .contract{text-align:left}.closing footer{border-top:1px solid #8c7d68;display:flex;justify-content:space-between;text-align:left;padding:20px 0;font-size:11px;gap:25px}@media(min-width:2000px){.board{height:800px}.evidence-note{padding:45px 30px}.step{min-height:340px}.step p{font-size:20px}.step small{font-size:12px}}@media(max-width:1000px){.section-pad{padding:60px 5%}.dossier{padding:30px 6%}.document-head{font-size:8px}.case-stamp{bottom:80px;right:3%}.board{height:550px}.evidence-note{padding:25px 16px}.evidence-note small{font-size:8px}.steps{grid-template-columns:repeat(2,1fr);gap:35px}.step:nth-child(n){transform:rotate(-1deg)}.step:nth-child(even){transform:rotate(2deg) translateY(15px)}.step h3{font-size:27px}.closing{padding-bottom:0}}@media(max-width:650px){.section-pad{padding:45px 6%}.section-top{font-size:9px;letter-spacing:.5px;gap:15px}h2{font-size:13vw;margin:25px 0 45px}.case-layout{grid-template-columns:1fr;gap:40px}.dossier{padding:30px 7%}.dossier h3{font-size:31px}.dossier>p{font-size:15px}.dossier .interesting{font-size:44px}.case-stamp{font-size:9px;bottom:80px;right:15px}.document-foot{font-size:9px}.case-suspect{width:78%;margin:auto}.suspect-photo img{max-height:42vh}.suspect-photo>span{font-size:9px}.hand-note{font-size:26px}.evidence{padding-left:4%;padding-right:4%}.board{height:820px;border-width:8px}.evidence-note{width:43%;padding:24px 12px 16px}.evidence-note h3{font-size:17px}.evidence-note p{font-size:25px;white-space:normal}.evidence-note small{font-size:7px}.n1{top:4%;left:3%}.n2{top:6%;right:3%}.n3{bottom:5%;left:3%}.n4{bottom:3%;right:3%}.board-photo{width:72%;left:14%;top:31%}.knows{font-size:18px;bottom:50px}.board-caption{display:none}.steps{grid-template-columns:1fr;gap:22px;margin:0 0 40px}.step{min-height:185px;padding:23px 25px}.step:nth-child(n){transform:rotate(-1deg)}.step:nth-child(even){transform:rotate(1deg)}.step h3{margin-top:25px;font-size:28px}.step p{margin-bottom:0}.step-num{font-size:135px;right:18px;top:20px}.step small{font-size:9px}.step .stamp{position:absolute;right:15px;bottom:20px}.step-link{margin-top:14px}.buy-bottom{flex-direction:column;gap:18px;align-items:stretch}.buy-bottom .hand-note{margin:0 0 20px}.buy-bottom>div{width:100%}.closing{padding-bottom:0;min-height:100svh}.closing h2{font-size:14vw;white-space:nowrap;margin-top:30px}.case-status{font-size:29px;margin:10px 0 0}.closing-portrait{width:100%;margin-top:20px}.closing-portrait img{max-height:48vh}.closing-aside{right:0;top:35%;font-size:19px}.closing-links{padding:16px 10px;margin-top:-10px;margin-bottom:30px}.closing-links .button{padding:13px 12px}.closing footer{flex-direction:column;align-items:center;text-align:center;gap:15px;font-size:10px}}
.hero-backdrop{mask-image:linear-gradient(90deg,#000,transparent 27%)}.scribble{left:-3%;top:25%}@media(min-width:2000px){h1{font-size:160px}.section-pad{padding-top:110px}.board{height:900px}.case-layout{margin-top:75px}.dossier{padding-top:60px;padding-bottom:55px}.closing-portrait{width:700px}.closing-portrait img{max-height:57vh}.closing-links{margin-top:-30px}.closing h2{font-size:150px}}@media(max-width:650px){.scribble{left:0;top:16%}.closing h2{font-size:12.3vw}.hero-backdrop{opacity:.12}}
.suspect-photo img,.board-photo img,.closing-portrait img{mix-blend-mode:normal}
@media(max-width:650px){.closing-aside{top:10%;right:0;font-size:17px}}

/* Keep the original white face and move the hero annotation away from the hat. */
.hero .portrait img { mix-blend-mode: normal; }
.hero .scribble { left: -8%; }
@media (max-width: 650px) { .hero .scribble { left: -5%; } }

.hero .scribble { top: 32%; }
@media (max-width: 650px) { .hero .scribble { top: 23%; } }