/* A working desk: papers and possessions share the same space. */
.siteHeader .brand .brand__worm{display:block;width:310px;height:auto;max-width:100%}
@media(max-width:800px){.siteHeader .brand .brand__worm{width:240px}}
@media(max-width:480px){.siteHeader .brand .brand__worm{width:205px}}
@media(max-width:360px){.siteHeader .brand .brand__worm{width:175px}}
.siteHeader .brand{position:relative;isolation:isolate;display:inline-flex;padding:12px 19px;background:#f4efdf;border:3px solid #f4efdf;border-radius:5px;box-shadow:inset 0 0 0 1px #234773,1px 2px 2px #34271845;transform:rotate(-3deg);filter:none}
.siteHeader .brand::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:2px;background:linear-gradient(112deg,#ffffff40,transparent 43%,#ffffff18 75%,transparent),linear-gradient(135deg,transparent 96%,#dbd4bf 96.3%,#fff9ed 99%)}
.siteHeader .brand .brand__word{font-family:var(--font-sans);font-size:25px;letter-spacing:-.055em;line-height:1;text-transform:uppercase;white-space:nowrap}
.siteHeader .brand .brand__word strong{color:#234773;font-weight:900;text-shadow:none}
@media(max-width:800px){.siteHeader .brand{padding:11px 13px}.siteHeader .brand .brand__word{font-size:21px}}
@media(max-width:400px){.siteHeader .brand{padding:10px}.siteHeader .brand .brand__word{font-size:18px}}
.employeeBadge{width:310px;padding:22px 20px 16px;background:linear-gradient(#eee8d8,#e6deca) padding-box;border:7px solid #f5f6eac2;border-radius:12px;box-shadow:0 0 0 1px #ffffffa6,inset 0 0 0 1px #847e6659,2px 3px 2px #35281630,5px 9px 12px #35281640;isolation:isolate}
.employeeBadge::before{display:none}
.employeeBadge::after{content:'';position:absolute;inset:-6px;border-radius:11px;pointer-events:none;z-index:2;background:linear-gradient(118deg,transparent 12%,#fff9 12.3%,#ffffff16 13%,transparent 30%,#ffffff42 30.4%,#ffffff0a 52%,transparent 52.4%);box-shadow:inset 1px 1px 1px #ffffffe6,inset -1px -1px 1px #7b78674d}
.employeeBadge__header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid #95876a66;font:8px var(--font-mono);letter-spacing:.08em}
.employeeBadge__header strong{font-size:10px;font-weight:600}
.employeeBadge__body{display:grid;grid-template-columns:112px 1fr;gap:17px;padding:17px 0}
.employeeBadge__photo{width:112px;height:148px;object-fit:cover;object-position:center 35%;filter:saturate(.65) contrast(.96);border:4px solid #f5f0e2;box-shadow:1px 2px 3px #32251330;transform:rotate(-1.5deg)}
.employeeBadge__number{font:9px var(--font-mono);color:#756d5b;letter-spacing:.1em}
.employeeBadge__details h2{font:600 29px/.98 var(--font-mono);letter-spacing:-.06em;margin:9px 0}
.employeeBadge__details p{font:9px var(--font-mono);margin:0 0 17px;color:#5d574a}
.employeeBadge__stamp{display:inline-block;border:1.5px solid #31567c;color:#31567c;padding:4px 6px;font:600 10px var(--font-mono);letter-spacing:.08em;transform:rotate(-6deg);opacity:.85}
.employeeBadge__footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #95876a66;padding-top:8px;gap:8px}
.employeeBadge__footer>span:first-child{font:7px var(--font-mono);letter-spacing:.06em;color:#756d5b}
.employeeBadge__signature{font:25px 'Caveat',cursive;color:#304e72}
html,body{overflow-x:clip}
.siteHeader__inner{max-width:620px;width:calc(100% - 80px)}
.hero{min-height:790px;padding-top:190px;padding-bottom:100px}
.hero__copy{max-width:690px;padding:43px 42px 38px;transform:rotate(-1.35deg);background:#f2eee2}
.hero__title{font-size:clamp(44px,4.6vw,62px);text-wrap:balance}
.heroManifest{right:24px;bottom:-78px;width:310px;transform:rotate(3deg)}
.hero__copy,.manifest__inner,.coda__inner,.contact__inner{background-image:repeating-linear-gradient(0deg,transparent 0 3px,#8c795504 3px 4px);box-shadow:1px 2px 2px #39291120,3px 7px 11px #39291130}
.portfolio{padding-top:48px;padding-bottom:45px}
.sectionHead{background:#e8dfc7;padding:18px 23px;transform:rotate(-1.4deg);margin-bottom:42px}
.sectionHead h2{font-family:'Caveat',cursive;font-size:43px;font-weight:600;letter-spacing:-.02em}
.bento{gap:42px 35px;align-items:start}
.bentoCard:nth-child(6n+2){margin-top:15px;transform:rotate(1.7deg)}
.bentoCard:nth-child(6n+3){margin-top:5px;transform:rotate(-.7deg)}
.bentoCard:nth-child(6n+4){transform:rotate(.8deg)}
.bentoCard:nth-child(6n+5){margin-top:12px;transform:rotate(-1.9deg)}
.bentoCard:hover{transform:rotate(-1.6deg)}
.bentoCard:nth-child(6n+2):hover{transform:rotate(1.7deg)}
.bentoCard:nth-child(6n+3):hover{transform:rotate(-.7deg)}
.bentoCard:nth-child(6n+4):hover{transform:rotate(.8deg)}
.bentoCard:nth-child(6n+5):hover{transform:rotate(-1.9deg)}
.otherProducts{margin-top:58px}
.manifest,.approach,.family{padding:65px 0}
.manifest__inner{max-width:960px;padding:48px 42px;gap:34px;transform:rotate(-.8deg)}
.manifest__head h2{font-family:'Caveat',cursive;font-size:48px;line-height:1.05;letter-spacing:-.02em}
.manifest__body{font-size:16px;line-height:1.8}
.manifest__quote{background:#e9dfbd;transform:rotate(1.8deg);margin-top:12px}
.approach__inner{max-width:900px;background:#ebe3cf;color:#39372d;border:0;padding:38px 40px;transform:rotate(1deg);box-shadow:2px 4px 7px #37291838}
.approach h2{font-family:'Caveat',cursive;font-size:43px;color:#34372d;line-height:1.1}
.approach__body{color:#4d4a40;font-size:15px;line-height:1.8}
.familyGrid{gap:34px 38px;align-items:start}
.familyCard:nth-child(even){margin-top:15px;transform:rotate(1.6deg)}
.familyCard h3{font-family:'Caveat',cursive;font-size:32px}
.familyCard::before{left:16%;transform:rotate(-8deg)}
.familyCard:nth-child(even)::before{left:68%;transform:rotate(5deg)}
.coda{padding-top:65px;padding-bottom:48px}
.coda__inner{max-width:790px;transform:rotate(-.8deg)}
.contact__inner{max-width:560px;transform:rotate(1.3deg)}
/* Objects sit beside the next sheet, not inside a dedicated display row. */
.deskDiscovery{height:0;overflow:visible;z-index:2}
.deskDiscovery--stapler img{width:185px;left:0;top:68px;transform:rotate(58deg);filter:drop-shadow(2px 4px 2px #39291125)}
.deskDiscovery--356 img{width:137px;right:1.5%;top:95px;transform:rotate(18deg);filter:drop-shadow(2px 4px 2px #39291125)}
.deskDiscovery--911 img{width:115px;left:0;top:185px;transform:rotate(-25deg);filter:drop-shadow(2px 4px 2px #39291125)}
@media(min-width:1500px){.deskDiscovery--stapler img{left:calc(50% - 660px)}.deskDiscovery--356 img{right:calc(50% - 620px)}.deskDiscovery--911 img{left:calc(50% - 660px)}}
@media(max-width:800px){
 .siteHeader__inner{width:calc(100% - 40px)}
 .hero{min-height:0;padding:155px 0 45px}
 .hero__copy{padding:30px 27px;max-width:100%}
 .hero__title{font-size:clamp(36px,6.5vw,52px)}
 .heroManifest{position:relative;right:auto;bottom:auto;margin-top:30px;width:310px;max-width:100%}
 .bento{gap:30px 24px}
 .manifest__inner{padding:35px 28px;gap:24px}
 .approach__inner{padding:30px 28px}
 .manifest,.approach,.family{padding:48px 0}
 .deskDiscovery--stapler img{width:120px;left:-20px;top:10px}
 .deskDiscovery--356 img{width:95px;right:-8px;top:0}
 .deskDiscovery--911 img{width:85px;left:-12px;top:10px}
 .familyGrid{gap:30px}
}
@media(max-width:480px){
 .sectionHead h2{font-size:36px}
 .bentoCard:nth-child(n){margin-top:0}
 .manifest__head h2{font-size:42px}
 .familyCard:nth-child(even){margin-top:0}
 .deskDiscovery--stapler img{top:-12px}
 .deskDiscovery--356 img{top:-25px}
 .deskDiscovery--911 img{top:-20px}
}

/* Landscape personnel card, with a sealed polycarbonate finish. */
.heroManifest.employeeBadge{width:340px;aspect-ratio:1.586;height:auto;padding:15px 17px 10px;border:2px solid #f6fbffc9;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;color:#162e44;background:radial-gradient(ellipse at 90% 70%,#bde3da80,transparent 55%),repeating-radial-gradient(ellipse at 110% 110%,transparent 0 5px,#427c9310 5.5px 6px),linear-gradient(125deg,#eef3f1,#dce8ec 65%,#eff1e7);box-shadow:inset 0 0 0 1px #18364d30,1px 2px 2px #16252e25,4px 8px 10px #35281640}
.employeeBadge::after{inset:0;border-radius:10px;background:linear-gradient(120deg,transparent 22%,#ffffff42 22.5%,#ffffff08 45%,transparent 45.5%);box-shadow:inset 0 1px 1px #fff}
.employeeBadge__header{padding-bottom:8px;border-bottom:1px solid #214b6550;font-size:7px;letter-spacing:.07em;flex:none}
.employeeBadge__header strong{font-size:10px;color:#193a53;letter-spacing:.04em}
.employeeBadge__body{grid-template-columns:83px 1fr;gap:13px;padding:11px 0 8px;flex:1;min-height:0}
.employeeBadge__photo{width:83px;height:105px;border:1px solid #37607544;border-radius:3px;box-shadow:none;transform:none;object-position:50% 30%;filter:saturate(.65) contrast(1.02)}
.employeeBadge__details{position:relative;min-width:0}
.employeeBadge__number{font-size:7px;color:#52697b;letter-spacing:.06em}
.employeeBadge__details h2{font:750 23px/1.05 var(--font-sans);letter-spacing:-.04em;margin:8px 0 4px;text-transform:none;color:#112f49}
.employeeBadge__details p{font-size:8px;color:#52697b;letter-spacing:.04em;margin:0 0 12px}
.employeeBadge__stamp{font-size:7px;color:#165b56;background:#d0e4df;border:1px solid #32766d55;padding:4px 5px;transform:none;opacity:1;border-radius:2px;letter-spacing:.06em}
.employeeBadge__hologram{position:absolute;right:0;bottom:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffffa6;background:repeating-conic-gradient(from 20deg,#a6d8de80 0deg,#eed3e390 40deg,#e7e5a899 90deg,#a7d2cc90 130deg);color:#44657888;font:800 15px var(--font-sans);box-shadow:inset 0 0 0 3px #ffffff40;text-shadow:1px 1px #ffffffa6}
.employeeBadge__footer{padding-top:4px;border-color:#214b6533;flex:none}
.employeeBadge__footer>span:first-child{font-size:6px;color:#52697b;letter-spacing:.025em}
.employeeBadge__signature{font-size:20px;text-transform:none;letter-spacing:0;color:#314c67}
@media(max-width:800px){.heroManifest.employeeBadge{width:320px;max-width:100%}}
@media(max-width:360px){.heroManifest.employeeBadge{padding:12px}.employeeBadge__body{grid-template-columns:72px 1fr;gap:10px;padding:8px 0}.employeeBadge__photo{width:72px;height:94px}.employeeBadge__details h2{font-size:21px}.employeeBadge__header strong{font-size:9px}}

/* Light pocket wear on the laminate, without obscuring the printed ID. */
.heroManifest.employeeBadge{border-color:#e5e8df;border-radius:11px 13px 10px 12px;box-shadow:inset 0 0 0 1px #6d776a50,inset 2px 1px 3px #fff9,inset -2px -2px 3px #817d6440,1px 2px 2px #16252e30,4px 8px 10px #35281640}
.employeeBadge::before{content:'';display:block;position:absolute;inset:0;width:auto;height:auto;left:0;top:0;transform:none;border-radius:inherit;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff70;background:linear-gradient(163deg,transparent 0 63%,#fff8 63.15%,transparent 63.5%) 12% 12% / 42px 19px no-repeat,linear-gradient(19deg,transparent 47%,#71827b45 48%,#fff9 49%,transparent 51%) 95% 78% / 39px 15px no-repeat,linear-gradient(151deg,transparent 45%,#fff9 46%,transparent 48%) 82% 14% / 56px 24px no-repeat,linear-gradient(22deg,transparent 46%,#fff8 47%,transparent 49%) 9% 91% / 68px 18px no-repeat,radial-gradient(ellipse at bottom left,#827e6250,transparent 68%) bottom left / 26px 13px no-repeat,radial-gradient(ellipse at top right,#8c8c7150,transparent 70%) top right / 23px 14px no-repeat}
.employeeBadge::after{background:linear-gradient(120deg,transparent 22%,#ffffff29 22.5%,#ffffff06 45%,transparent 45.5%),linear-gradient(174deg,transparent 49%,#ffffff50 49.3%,transparent 50%) 70% 96% / 85px 12px no-repeat;box-shadow:inset 1px 1px 1px #ffffffa0,inset -1px -1px 1px #757e6455}

/* Years of wallet wear: abraded edges, cloudy plastic and a bent laminate. */
.heroManifest.employeeBadge{border-color:#c8c7b3 #eeecda #b4b59e #d6d4be;border-radius:10px 15px 12px 8px;box-shadow:inset 0 0 0 1px #6b715a70,inset 3px 2px 6px #9e987c45,inset -3px -3px 7px #7c81614d,1px 2px 2px #16252e40,4px 8px 10px #35281645}
.employeeBadge::before{background:url('/assets/id-laminate-wear.svg') center / 100% 100% no-repeat;box-shadow:inset 0 0 4px 2px #f8f2d982}
.employeeBadge::after{background:radial-gradient(ellipse at 0 100%,#b6ad7866,transparent 36%),radial-gradient(ellipse at 100% 0,#eee6b866,transparent 31%),radial-gradient(ellipse at 90% 86%,#fffde666,transparent 20%),linear-gradient(120deg,transparent 22%,#fff7 22.5%,#ffffff10 45%,transparent 45.5%);box-shadow:inset 2px 2px 3px #fff8,inset -2px -2px 3px #6f735955}
.employeeBadge__photo{filter:saturate(.4) contrast(.94)}
.employeeBadge__hologram{opacity:.65}

/* Blue vinyl bumper sticker with white worm lettering. */
.siteHeader .brand{background:#234f91;border-color:#234f91;box-shadow:inset 0 0 0 1px #ffffff85,1px 2px 2px #34271845}
.siteHeader .brand::after{background:linear-gradient(112deg,#ffffff30,transparent 43%,#ffffff12 75%,transparent),linear-gradient(135deg,transparent 96%,#183a6a 96.3%,#fff9ed 99%)}

/* Consistent desktop-object scale; discoveries arrive earlier in the scroll. */
body::before{background-size:clamp(1050px,88vw,1536px) auto;height:calc(clamp(1050px,88vw,1536px) * 2 / 3)}
.heroManifest.employeeBadge{width:305px;padding:12px 14px 9px}
.deskDiscovery--stapler{height:110px;margin-top:22px}
.deskDiscovery--stapler img{width:310px;left:auto;right:0;top:-12px;transform:rotate(-12deg)}
.deskDiscovery--356 img{width:165px;left:4px;right:auto;top:-10px;transform:rotate(-22deg)}
.deskDiscovery--911 img{width:125px;left:auto;right:16px;top:26px;transform:rotate(19deg)}
@media(max-width:800px){
 .heroManifest.employeeBadge{width:305px}
 .deskDiscovery--stapler{height:120px;margin-top:10px}
 .deskDiscovery--stapler img{width:250px;right:0;left:auto;top:0}
 .deskDiscovery--356{height:110px}
 .deskDiscovery--356 img{width:120px;left:10px;right:auto;top:0}
 .deskDiscovery--911{height:135px}
 .deskDiscovery--911 img{width:98px;right:18px;left:auto;top:0}
}

/* Oversized, sun-worn navy bumper sticker. */
.siteHeader .brand{padding:17px 23px;background:#122c50;border:3px solid #d9dccf;border-radius:4px 6px 5px 3px;box-shadow:inset 0 0 0 1px #ffffff65,inset 0 -2px 3px #06152d66,2px 3px 3px #34271850;clip-path:polygon(0 3%,3% 0,20% 1%,20.5% 4%,21% 0,67% 0,68% 2%,69% 0,99% 0,100% 4%,99.7% 39%,98.7% 44%,100% 48%,100% 93%,98% 100%,82% 99%,81% 96%,80% 100%,36% 100%,35% 97%,34% 100%,1% 99%,0 94%)}
.siteHeader .brand .brand__worm{width:365px}
.siteHeader .brand::after{background:linear-gradient(158deg,transparent 44%,#f1eedc99 45%,transparent 47%) 4% 83% / 47px 9px no-repeat,linear-gradient(12deg,transparent 43%,#f8f1d580 44%,transparent 47%) 87% 12% / 65px 9px no-repeat,linear-gradient(120deg,transparent 44%,#f5efdfcc 45%,#bcbca7 48%,transparent 50%) 100% 76% / 15px 26px no-repeat,linear-gradient(135deg,transparent 95%,#d8d8c4 95.4%,#fffae9 99%),linear-gradient(112deg,#ffffff18,transparent 43%,#ffffff08 75%,transparent);box-shadow:inset 0 1px 1px #ffffffa6,inset 0 -1px 1px #e3e0cd99}
@media(max-width:800px){.siteHeader .brand{padding:14px 16px}.siteHeader .brand .brand__worm{width:270px}.siteHeader__inner{flex-wrap:wrap;gap:7px 16px}}
@media(max-width:480px){.siteHeader .brand{padding:13px 15px}.siteHeader .brand .brand__worm{width:250px}.headerContact{margin-left:auto}.hero{padding-top:180px}}
@media(max-width:360px){.siteHeader .brand .brand__worm{width:225px}}

/* Full object outlines, with safe margins at every viewport width. */
body::before{top:18px;height:calc(min(100vw,1536px) * 2 / 3);background-image:url('/assets/workbench-smaller-watch.webp');background-size:min(100vw,1536px) auto}
@media(max-width:800px){body::before{top:120px}.hero{padding-top:calc(145px + 100vw * 2 / 3)}}
.deskDiscovery--356 img{left:22px}
.deskDiscovery--911 img{right:24px}
/* Larger mission-inspired bumper sticker, specific to the workbench. */
.siteHeader__inner{max-width:820px}
.siteHeader .brand{gap:15px;padding:18px 25px;align-items:center;max-width:100%}
.siteHeader .brand .brand__orbit{display:block;width:78px;height:70px;flex-shrink:0}
.siteHeader .brand .brand__worm{width:430px;min-width:0}
@media(max-width:800px){.siteHeader__inner{flex-wrap:wrap}.siteHeader .brand{gap:12px;padding:16px 18px}.siteHeader .brand .brand__worm{width:350px}.siteHeader .brand .brand__orbit{width:62px;height:57px}}
@media(max-width:480px){.siteHeader .brand{width:100%;gap:9px;padding:14px 12px}.siteHeader .brand .brand__orbit{width:49px;height:46px}.siteHeader .brand .brand__worm{width:calc(100% - 58px);max-width:none}.siteHeader__inner{padding:8px 0}.headerContact{margin-top:5px}}
/* Space-program insignia: red flight vector, star field, and SI monogram. */
.siteHeader .brand{gap:18px;padding:15px 24px}
.siteHeader .brand .brand__orbit{width:102px;height:91px;filter:drop-shadow(0 1px 1px #07172b55)}
.siteHeader .brand .brand__worm{width:440px}
@media(max-width:800px){.siteHeader .brand{gap:14px;padding:14px 18px}.siteHeader .brand .brand__orbit{width:80px;height:72px}.siteHeader .brand .brand__worm{width:340px}}
@media(max-width:480px){.siteHeader .brand{gap:10px;padding:12px 10px}.siteHeader .brand .brand__orbit{width:67px;height:60px}.siteHeader .brand .brand__worm{width:calc(100% - 77px)}}
/* Adhered vinyl on clear wood, away from the tin and calculator. */
@media(min-width:1100px){.siteHeader__inner{max-width:650px;position:relative;left:35px}.siteHeader .brand{gap:13px;padding:12px 17px}.siteHeader .brand .brand__orbit{width:82px;height:74px}.siteHeader .brand .brand__worm{width:420px}.headerContact{position:absolute;right:10px;top:135px}}
.siteHeader .brand{transform:rotate(-1.5deg);box-shadow:inset 0 0 0 1px #ffffff55,0 1px 1px #30221230;border-width:2px}
.siteHeader .brand .brand__orbit{filter:none}
@media(min-width:801px) and (max-width:1099px){body::before{top:190px}.hero{padding-top:250px}}
@media(max-width:800px){body::before{top:160px}.hero{padding-top:calc(185px + 100vw * 2 / 3)}}
/* Give the objects their own clear surface before the paper content begins. */
@media(min-width:801px){
 .hero{padding-top:calc(min(100vw,1536px) * 2 / 3 + 35px)}
 .siteHeader .headerContact{position:static;margin-left:auto;background:#efe8d7;padding:7px 10px;border-radius:2px}
 .siteHeader__inner{flex-wrap:wrap}
}
@media(max-width:800px){.hero{padding-top:calc(205px + 100vw * 2 / 3)}}
/* Keep the introduction in view, within the clear center of the workbench. */
@media(min-width:801px){
 body::before{top:18px}
 .hero{padding-top:215px;padding-bottom:65px;min-height:calc(min(100vw,1536px) * 2 / 3 + 65px)}
 .hero__inner{display:flex;flex-direction:column;align-items:center;gap:38px;width:100%;max-width:none}
 .hero__copy{width:48vw;max-width:700px;padding:35px 38px;transform:rotate(-1deg);margin:0}
 .hero__title{font-size:clamp(35px,4vw,58px);line-height:1.05}
 .hero__lede{font-size:14px;line-height:1.7}
 .heroManifest.employeeBadge{position:relative;inset:auto;align-self:center;margin:0;transform:rotate(3deg)}
 .hero__actions{gap:18px;flex-wrap:wrap}
}
@media(max-width:800px){.hero{padding-top:calc(175px + 100vw * 2 / 3)}}
/* ID casually laid over the upper-right corner of the introduction. */
@media(min-width:801px){
 .hero__inner{position:relative}
 .heroManifest.employeeBadge{position:absolute;z-index:5;top:-100px;left:calc(50% + min(24vw,350px) - 175px);right:auto;bottom:auto;width:260px;transform:rotate(9deg);margin:0}
}
@media(max-width:800px){
 .hero__inner{position:relative}
 .heroManifest.employeeBadge{position:absolute;z-index:5;top:-85px;right:12px;left:auto;bottom:auto;width:205px;transform:rotate(8deg);margin:0;padding:8px}
 .employeeBadge__body{grid-template-columns:55px 1fr;gap:8px;padding:6px 0}
 .employeeBadge__photo{width:55px;height:70px}
 .employeeBadge__details h2{font-size:17px;margin:5px 0 3px}
 .employeeBadge__header strong{font-size:7px}
 .employeeBadge__header{font-size:5px;padding-bottom:5px}
 .employeeBadge__number{font-size:5px}
 .employeeBadge__details p{font-size:6px;margin-bottom:7px}
 .employeeBadge__stamp{font-size:5px;padding:3px}
 .employeeBadge__hologram{width:22px;height:22px;font-size:10px}
 .employeeBadge__footer>span:first-child{font-size:4px}
 .employeeBadge__signature{font-size:14px}
}
/* Lift the intro sheet independently of the ID. */
.hero__copy{position:relative;top:-85px}
@media(max-width:800px){.hero__copy{top:-35px}}
/* Fibrous painter's tape with hand-torn ends and a pressed paper seam. */
.hero__copy::before,.coda__inner::before,.siteFooter__inner::before{
 width:118px;height:34px;top:-16px;opacity:.92;
 background:url('/assets/painter-tape-grain.svg') center/118px 34px,
 linear-gradient(178deg,transparent 43%,#163f7920 47%,#b1d1fa40 50%,transparent 55%),
 linear-gradient(94deg,#315aa099 0%,#507cbbd9 9%,#4773b9dd 48%,#3965a9dc 86%,#7c9bc6b8 100%);
 box-shadow:inset 0 1px 0 #c7dcff55,inset 0 -1px 0 #173d7040;
 filter:drop-shadow(0 1px .6px #1b2b3438);
 clip-path:polygon(2% 0,26% 1%,54% 0,79% 1%,98% 0,97% 9%,100% 17%,97.5% 25%,99% 35%,97% 44%,100% 53%,98% 62%,99% 71%,97% 81%,99% 91%,97% 100%,73% 99%,46% 100%,20% 99%,1% 100%,2.5% 89%,0 79%,2% 68%,.5% 59%,3% 48%,1% 38%,2.5% 28%,0 18%,3% 9%);
 transform:rotate(3deg)
}
/* Raise the introduction without moving the ID. */
.hero__copy{top:-145px}
@media(max-width:800px){.hero__copy{top:-65px}}
/* Let the intro's actual height set the flow instead of reserving a full desk. */
@media(min-width:801px){
 .hero{min-height:0;align-items:flex-start;padding-top:245px;padding-bottom:40px}
 .hero__copy{top:0}
 .heroManifest.employeeBadge{top:25px}
 .portfolio{padding-top:25px}
}
@media(max-width:800px){
 .hero{padding-bottom:0}
 .hero__copy{margin-bottom:-65px}
 .portfolio{padding-top:30px}
}
/* Project ideas on small adhesive notes. */
.portfolio .bento{grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;max-width:980px;margin-inline:auto}
.portfolio .bentoCard{--note:#f4e894;background:linear-gradient(180deg,#534b1612 0,transparent 18%,#ffffff15 80%,#ffffff40),var(--note);padding:22px 20px 18px;min-height:290px;aspect-ratio:1;box-shadow:0 1px 1px #392d1930,2px 7px 8px -4px #392d1955;border-radius:0 0 3px 1px;justify-content:space-between}
.portfolio .bentoCard:nth-child(4n+2){--note:#d6e5b3}
.portfolio .bentoCard:nth-child(4n+3){--note:#efc8ba}
.portfolio .bentoCard:nth-child(4n){--note:#c9dfe7}
.portfolio .bentoCard::before{display:none}
.portfolio .bentoCard::after{content:'';display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(174deg,transparent 94%,#ffffff35 96%,#66532915 100%);border-top:1px solid #ffffff35}
.portfolio .bentoCard__image{height:58%;aspect-ratio:auto;object-fit:contain;background:transparent;mix-blend-mode:multiply;flex-shrink:1;min-height:0}
.portfolio .bentoCard__body{padding:12px 0 4px;background:none}
.portfolio .bentoCard__body h3{font-family:'Caveat',cursive;font-size:36px;line-height:1}
.portfolio .bentoCard__body p{font-size:11px;line-height:1.4;max-width:95%;margin-top:8px}
.portfolio .bentoCard__plate{display:none}
.portfolio .bentoCard:hover{box-shadow:0 1px 1px #392d1930,3px 9px 10px -4px #392d1955}
@media(max-width:800px){.portfolio .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.portfolio .bentoCard{min-height:230px;padding:18px 15px}.portfolio .bentoCard__body h3{font-size:30px}}
@media(max-width:480px){.portfolio .bento{grid-template-columns:1fr;max-width:290px;gap:32px}.portfolio .bentoCard{min-height:290px}.portfolio .bentoCard__body h3{font-size:36px}.portfolio .bentoCard__body p{font-size:12px}}
.portfolio .bentoCard__image{filter:brightness(1.12) contrast(1.15)}
/* Reserve the two object edges at the transition into the project notes. */
@media(min-width:801px){
 .portfolio>.shell>.sectionHead{margin-left:auto;margin-right:auto;width:46vw;max-width:600px}
 .portfolio>.shell>.bento{margin-top:max(35px,calc(min(100vw,1536px) * .667 - 790px))}
}
@media(min-width:801px){.portfolio>.shell>.sectionHead{display:block}}
/* Start the notes beside the watch, leaving its right-hand footprint clear. */
@media(min-width:801px){
 .portfolio>.shell>.bento{margin-top:30px}
 .portfolio>.shell>.bento>.bentoCard:nth-child(3){margin-top:max(25px,calc(min(100vw,1536px) * .667 - 825px))}
}
/* Close the first two columns independently of the watch-side stagger. */
@media(min-width:801px){
 .portfolio>.shell>.bento>.bentoCard:nth-child(n+4):not(:nth-child(3n)){
  position:relative;top:calc(-1 * max(25px,calc(min(100vw,1536px) * .667 - 825px)));
 }
}
.robot-clearing{position:relative;max-width:1040px;width:calc(100% - 48px);height:265px;margin:20px auto}.windup-robot{position:absolute;right:15%;top:55px;width:135px;background:none;border:0;padding:0;cursor:pointer;transform:rotate(12deg);filter:drop-shadow(2px 5px 3px #34241940)}.windup-robot img{display:block;width:100%;height:auto}.windup-robot:focus-visible{outline:2px dashed #2856a1;outline-offset:6px}.windup-robot.desk-playing{animation:robot-waddle 4.4s ease-in-out both}@keyframes robot-waddle{0%,12%{translate:0 0;rotate:0deg}17%{rotate:-6deg}22%{rotate:6deg}32%{translate:-8px -10px;rotate:-7deg}42%{translate:-14px -20px;rotate:7deg}52%{translate:-22px -30px;rotate:-7deg}62%{translate:-28px -40px;rotate:7deg}72%{translate:-32px -44px;rotate:0deg}85%{translate:-16px -20px;rotate:-3deg}100%{translate:0 0;rotate:0deg}}@media(max-width:800px){.robot-clearing{height:215px}.windup-robot{width:110px;right:20%;top:35px}}@media(prefers-reduced-motion:reduce){.windup-robot.desk-playing{animation:none;filter:brightness(1.08)}}
/* Keep the lower desk toys at the perimeter, clear of the reading column. */
.deskDiscovery,.robot-clearing{width:100vw;max-width:none;left:50%;margin-left:0;margin-right:0;transform:translateX(-50%);overflow:visible}
.deskDiscovery--stapler{height:155px}
.deskDiscovery--stapler img{width:160px;right:30px;left:auto;top:8px}
.deskDiscovery--356{height:180px}
.deskDiscovery--356 img{width:140px;left:35px;right:auto;top:10px}
.deskDiscovery--911{height:195px}
.deskDiscovery--911 img{width:115px;right:35px;left:auto;top:8px}
.robot-clearing{height:230px}
.windup-robot{width:130px;left:30px;right:auto;top:20px}
@media(max-width:800px){
 .deskDiscovery--stapler{height:135px}.deskDiscovery--stapler img{width:175px;right:22px;top:8px}
 .deskDiscovery--356{height:155px}.deskDiscovery--356 img{width:110px;left:25px;top:10px}
 .deskDiscovery--911{height:175px}.deskDiscovery--911 img{width:95px;right:25px;top:10px}
 .robot-clearing{height:200px}.windup-robot{width:110px;left:22px;right:auto;top:18px}
}
/* The edge stapler should not reserve a full blank row between projects. */
.deskDiscovery--stapler{height:0;margin-top:0}
.otherProducts{margin-top:42px}
@media(max-width:800px){.deskDiscovery--stapler{height:0;margin-top:0}.otherProducts{margin-top:42px}.deskDiscovery--stapler img{width:105px;top:0;right:18px}.otherProducts>.sectionHead{max-width:calc(100% - 125px)}}
/* Edge objects sit alongside sections rather than creating empty rows. */
.deskDiscovery--356,.deskDiscovery--911,.robot-clearing{height:0;margin-top:0;margin-bottom:0}
.deskDiscovery--356 img,.deskDiscovery--911 img{top:45px}
.windup-robot{top:35px}
.manifest,.approach,.family{padding-top:30px;padding-bottom:30px}
@media(max-width:800px){
 /* Narrow screens need a small landing spot, without narrowing the reading area. */
 .deskDiscovery--356,.deskDiscovery--911,.robot-clearing{height:110px;margin-top:0;margin-bottom:0}
 .deskDiscovery--356 img,.deskDiscovery--911 img{top:8px;opacity:1;width:75px}
 .deskDiscovery--356 img{left:18px}
 .deskDiscovery--911 img{right:18px}
 .windup-robot{top:8px;width:65px;left:18px}
}

/* A small personal keepsake alongside the first column of notes. */
.portfolio>.shell>.bento{position:relative}
.porsche-key{position:absolute;left:-155px;top:260px;width:105px;padding:0;border:0;background:none;cursor:pointer;transform:rotate(-17deg);filter:drop-shadow(2px 3px 2px #34241940);z-index:2}
.porsche-key img{display:block;width:100%;height:auto}
.porsche-key:focus-visible{outline:2px dashed #2856a1;outline-offset:5px}
.porsche-key.desk-playing{animation:key-turn 1.5s ease-in-out}
@keyframes key-turn{0%,100%{rotate:0deg}30%{rotate:65deg}48%{rotate:55deg}65%{rotate:65deg}}
@media(max-width:1200px){.porsche-key{left:-65px;width:65px}}
@media(max-width:800px){.porsche-key{left:-25px;top:235px;width:48px}}
@media(prefers-reduced-motion:reduce){.porsche-key.desk-playing{animation:none}}

.portfolio>.shell{position:relative}
.porsche-key{left:calc(50% - 645px);top:405px}
@media(max-width:1200px){.porsche-key{left:-30px}}
@media(max-width:800px){.porsche-key{left:0;top:360px}}
@media(min-width:801px) and (max-width:1400px){.porsche-key{left:0;width:65px}}
/* Use one responsive scale for the loose desk objects. Cars are Matchbox-sized. */
:root{--desk-object-unit:clamp(.8px,.069444vw,1.0667px)}
.porsche-key{width:calc(120 * var(--desk-object-unit));left:calc(18px - (100vw - 100%)/2);transform:rotate(-8deg)}
.deskDiscovery--stapler img{width:calc(160 * var(--desk-object-unit))}
.deskDiscovery--356 img{width:calc(100 * var(--desk-object-unit))}
.deskDiscovery--911 img{width:calc(95 * var(--desk-object-unit))}
.windup-robot{width:calc(115 * var(--desk-object-unit))}
@media(max-width:800px){
 :root{--desk-object-unit:.6px}
 .porsche-key{left:0;top:360px;width:calc(120 * var(--desk-object-unit))}
}

/* Lower sections no longer share their space with desk toys. */
@media(max-width:800px){.otherProducts>.sectionHead{max-width:100%}}