
*{box-sizing:border-box}html{scrollbar-width:none}body{margin:0;background:#edece3;color:#142a34;height:1100vh;font-family:Georgia,serif}button,a{color:inherit}button{font:inherit;cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #a73900;outline-offset:6px}#stage{position:fixed;inset:0;overflow:hidden;background:#edece3;transition:background .1s}canvas{position:absolute;inset:0;width:100%;height:100%}#ink{z-index:4;pointer-events:none}header{position:fixed;left:3.5%;right:3.5%;top:30px;z-index:20;display:flex;justify-content:space-between;align-items:center;font:12px monospace;letter-spacing:1px}header .brand{font:21px Georgia;letter-spacing:-.7px}header nav{display:flex;gap:30px}header button{border:0;background:none;padding:0;font:11px monospace;letter-spacing:1px}.plus{font:28px Georgia;vertical-align:middle;margin-right:12px}.scene{position:absolute;inset:0;pointer-events:none;will-change:opacity,transform}.hero{z-index:2}.hero h1{font-size:clamp(100px,16.4vw,290px);font-weight:400;line-height:.77;letter-spacing:-.083em;margin:0;position:absolute;left:4%;right:4%;top:17%}.hero h1 span{display:block;text-align:right;margin-top:19.5vh;padding-right:2%}.intro{position:absolute;left:5%;bottom:13%;font:16px/1.45 Georgia;max-width:255px}.serial{position:absolute;right:5%;bottom:13%;font:10px/1.6 monospace;letter-spacing:1px;text-align:right}.volume{z-index:6;color:#eeeade;opacity:0}.volume h2{position:absolute;left:5%;top:16%;font-size:clamp(72px,10.7vw,180px);font-weight:400;line-height:.91;letter-spacing:-.07em;margin:0}.volume h2 em{font-weight:400;color:#a6c6bd}.volume p{position:absolute;right:6%;bottom:16%;width:300px;font-size:18px;line-height:1.5}.volume .note{position:absolute;left:5%;bottom:16%;font:10px/1.7 monospace;letter-spacing:1px}.work{z-index:8;opacity:0}.work h2{position:absolute;left:5%;top:14%;font-weight:400;font-size:clamp(75px,10vw,160px);line-height:.92;letter-spacing:-.07em;margin:0}.work p{position:absolute;left:5.5%;bottom:17%;max-width:290px;font-size:17px;line-height:1.5}.instrument{position:absolute;width:42%;height:62%;left:52%;top:18%;transform:rotate(-8deg);background:#e8e9df;border:1px solid #576d6960;box-shadow:0 25px 40px #08162d18;overflow:hidden}.instrument:before{content:'';position:absolute;inset:12px;border:1px solid #66756c55;pointer-events:none;z-index:2}.instrument img{position:absolute;object-fit:contain;height:82%;width:55%;left:21%;top:9%;filter:saturate(.55)}.instrument .map{left:50%;width:35%;height:64%;top:20%;box-shadow:-12px 8px 30px #08162d19}.instrument .tag{position:absolute;bottom:25px;left:25px;font:9px monospace;letter-spacing:1px}.contact{z-index:9;opacity:0}.contact h2{position:absolute;left:5%;top:20%;font-weight:400;font-size:clamp(85px,13.5vw,220px);line-height:.9;letter-spacing:-.065em;margin:0}.contact a{position:absolute;left:6%;bottom:20%;font:20px Georgia;pointer-events:auto;border-bottom:1px solid;padding-bottom:10px}.contact p{position:absolute;right:6%;bottom:20%;font-size:17px;line-height:1.5;max-width:270px}.bottom{position:fixed;z-index:20;bottom:25px;left:3.5%;right:3.5%;display:flex;justify-content:space-between;align-items:center;font:10px monospace;letter-spacing:1px}.bottom button{background:none;border:0;font:10px monospace;letter-spacing:1px;padding:7px}.controls{display:flex;gap:18px;align-items:center}.controls input{width:110px;height:2px;accent-color:#527f77}.progress{display:flex;align-items:center;gap:15px}.progress i{display:block;width:80px;height:1px;background:currentColor;transform-origin:left}.grain{position:absolute;inset:0;pointer-events:none;opacity:.045;z-index:15;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='.89' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.reduced{height:100vh}
@media(max-width:650px){header{top:23px;left:6%;right:6%}header .brand{font-size:18px}header nav{gap:16px}header nav button{font-size:9px}.plus{margin-right:5px}.hero h1{font-size:26vw;top:20%;left:6%;right:6%;line-height:.87}.hero h1 span{margin-top:25vh;text-align:left}.intro{left:7%;bottom:13%;font-size:14px;width:215px}.serial{display:none}.volume h2{font-size:20vw;top:17%;left:7%}.volume p{right:7%;bottom:15%;width:75%;font-size:16px}.volume .note{bottom:35%;left:7%;font-size:8px}.work h2{top:15%;left:7%;font-size:19vw}.work p{left:7%;bottom:12%;max-width:85%;font-size:14px}.instrument{left:18%;top:36%;height:35%;width:68%}.instrument .tag{font-size:7px;bottom:15px;left:20px}.contact h2{font-size:22vw;left:7%;top:22%}.contact a{left:7%;bottom:28%;font-size:18px}.contact p{left:7%;bottom:13%;max-width:75%;font-size:14px}.bottom{bottom:20px;left:6%;right:6%;font-size:8px}.controls{gap:10px}.controls input{width:55px}.controls button{font-size:9px}.progress i{width:25px}}

.work{background:#edece3;color:#142a34}.hero{mix-blend-mode:difference;color:#f6f4df}header,.bottom{mix-blend-mode:difference;color:#f6f4df}.work h2{font-size:8.1vw}.work h2 br{display:none}.work h2{width:46%}@media(max-width:650px){.work h2{font-size:16vw;width:90%;top:14%}.work h2 br{display:block}.instrument{top:37%;height:34%}.hero h1{font-size:25vw}}

.project{z-index:8;opacity:0;visibility:hidden;background:#edece3;color:#142a34;pointer-events:none}.project-title{position:absolute;left:5%;top:14%;z-index:5}.project-title>span{font:10px monospace;letter-spacing:2px}.project-title h2{font:400 7.4vw/.94 Georgia;letter-spacing:-.065em;margin:22px 0 0}.project-bottom{position:absolute;bottom:13%;left:5%;right:5%;display:flex;justify-content:space-between;align-items:end;z-index:6}.project-bottom p{font:17px/1.5 Georgia;margin:0;max-width:380px}.project-bottom small{display:block;font:9px/1.8 monospace;letter-spacing:1px}.project-bottom button{display:block;background:none;border:0;border-bottom:1px solid;padding:0 0 8px;margin-bottom:14px;font:12px monospace;pointer-events:auto}.map-plate{position:absolute;left:39%;top:28%;width:66%;height:61%;transform:perspective(1700px) rotateY(-17deg) rotateZ(-9deg);transform-origin:50% 50%;border:1px solid #a0a69c;background:#152c2b;box-shadow:0 32px 55px #10292d30;overflow:hidden}.map-plate img{display:block;width:100%;height:100%;object-fit:cover}.phone-slices{position:absolute;width:233px;height:505px;left:65%;top:15%;transform:perspective(1300px) rotateY(-23deg) rotateX(17deg) rotateZ(11deg);transform-style:preserve-3d;z-index:4}.slice{position:absolute;left:0;right:0;height:33.3334%;background-image:url('/assets/plate/lil-phone.png');background-size:100% 300%;border:1px solid #dcdfd0;box-shadow:0 17px 24px #08162d30;transition:transform .65s cubic-bezier(.2,.75,.25,1)}.s0{top:0;background-position:center top}.s1{top:33.3333%;background-position:center center}.s2{top:66.6667%;background-position:center bottom}.spolvero{background:#091c2b;color:#eeecdc}.spolvero .project-title{top:16%}.spolvero .project-title h2{font-size:7vw}.form-controls{position:absolute;left:5%;top:55%;width:38%;display:flex;align-items:center;pointer-events:auto;z-index:6}.node{border:1px solid #a3b5ad55;background:#0b202c;padding:18px 15px;font:11px monospace;white-space:nowrap}.node:first-child{min-width:160px}.node label{display:flex;align-items:center;gap:12px;margin-top:15px}.node input{width:95px;height:2px;accent-color:#b9cbbb}.node output{font:10px monospace}.form-controls i{height:1px;flex:1;min-width:18px;background:#b6c5b277;position:relative}.form-controls i:after{content:'';width:4px;height:4px;position:absolute;right:0;top:-2px;border:1px solid #d8e0ca;border-radius:50%;background:#d8e0ca}#form{z-index:2}.blackbelt{background:#101e29;color:#e5e8d7}.blackbelt .project-title h2{font-size:8.5vw}#skillfield{position:absolute;inset:0;width:100%;height:100%;z-index:2}.skill-detail{position:absolute;right:7%;top:16%;width:240px;z-index:5;pointer-events:auto}.skill-detail>span{font:italic 31px Georgia}.skill-detail p{font:16px/1.55 Georgia;color:#a7bdb7}.skill-options{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.skill-options button{border:0;border-bottom:1px solid transparent;background:none;padding:8px 0;font:10px monospace;color:#97aaa8}.skill-options button[aria-pressed=true]{color:#fefbc8;border-bottom-color:#fefbc8}.project-jumps{position:absolute;z-index:22;right:5%;top:9%;display:flex;gap:25px;pointer-events:auto;opacity:0;visibility:hidden}.project-jumps button{background:none;border:0;font:10px monospace;padding:5px;letter-spacing:.4px;color:#d9dfce;mix-blend-mode:difference}.bottom .controls{gap:15px}.bottom .controls>span{display:none}.project small{opacity:.72}.grain{opacity:.035}.motion-off .slice{transition:none}body.reduced .slice{transition:none}
@media(min-width:1700px){.phone-slices{width:290px;height:630px}}
@media(max-width:650px){.project-title{left:7%;top:14%}.project-title>span{font-size:9px}.project-title h2,.spolvero .project-title h2{font-size:14vw;margin-top:17px}.map-plate{left:5%;top:40%;width:105%;height:35%;transform:perspective(1000px) rotateY(-15deg) rotateZ(-8deg)}.phone-slices{width:133px;height:289px;left:50%;top:34%;transform:perspective(1000px) rotateY(-23deg) rotateX(15deg) rotateZ(9deg)}.project-bottom{left:7%;right:7%;bottom:12%;display:block}.project-bottom p{font-size:14px;max-width:95%}.project-bottom small{font-size:7px;line-height:1.7;margin-top:15px;letter-spacing:.3px}.project-bottom button{position:absolute;right:0;bottom:80px;font-size:9px;max-width:115px;text-align:left;line-height:1.5}.spolvero .project-title{top:15%}.form-controls{left:7%;top:68%;width:86%}.node{padding:12px 10px;font-size:9px}.node:first-child{min-width:138px}.node label{margin-top:10px}.node input{width:77px}.spolvero .project-bottom{bottom:10%}.spolvero .project-bottom p{font-size:12px}.spolvero .project-bottom small{margin-top:10px}.blackbelt .project-title h2{font-size:17vw}.skill-detail{left:7%;top:68%;width:86%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.skill-detail>span{font-size:24px}.skill-detail p{font-size:12px;margin:0}.skill-options{grid-column:1/-1;margin:0;gap:25px}.skill-options button{font-size:9px}.blackbelt .project-bottom{bottom:10%}.blackbelt .project-bottom p{display:none}.blackbelt .project-bottom small{margin:0}.project-jumps{top:9%;right:6%;left:6%;justify-content:space-between;gap:6px}.project-jumps button{font-size:8px}.bottom{bottom:17px}.bottom .controls{gap:10px}.bottom button{font-size:8px}.bottom .controls input{width:42px}.progress{gap:5px}.progress i{display:none}}

.lil .project-title h2{font-size:6.6vw}.lil .project-bottom>div{background:#edece3;padding:16px 20px;max-width:300px}.project-jumps{mix-blend-mode:difference;color:#f6f4df}.project-jumps button{color:inherit;mix-blend-mode:normal}.spolvero .project-title h2{font-size:6.5vw}.spolvero .project-title{max-width:44%}
@media(max-width:650px){.lil .project-title h2{font-size:12vw}.lil .project-title h2 br:last-child{display:none}.lil .project-bottom>div{padding:0;background:none}.lil .project-bottom button{background:#edece3;padding:8px}.spolvero .project-title{max-width:90%}.spolvero .project-title h2{font-size:13vw}.spolvero .project-title{top:14%}}

header nav a{font:11px monospace;letter-spacing:1px}header a:focus-visible{outline:2px solid #a73900;outline-offset:5px}@media(max-width:650px){header nav{gap:12px}header nav a{font-size:9px}.plus{display:none}}

/* Connected copy: leave room for complete sentences. */
.hero h1{font-size:8.7vw;line-height:1.02;letter-spacing:-.065em;top:19%}.hero h1 span{margin-top:13vh}.intro{max-width:355px;font-size:18px}.volume h2{font-size:7.2vw;line-height:1.02}.volume p{width:440px}.lil .project-title h2{font-size:5.3vw}.project-bottom p{max-width:430px}.contact h2{font-size:10.5vw}.contact p{max-width:440px}.blackbelt .project-title h2{font-size:7vw}
@media(max-width:650px){.hero h1{font-size:13vw;top:22%;line-height:1.08}.hero h1 span{margin-top:15vh}.intro{font-size:16px;width:82%;max-width:310px;bottom:13%}.volume h2{font-size:12.5vw;top:20%;max-width:88%}.volume p{width:86%;bottom:16%;font-size:16px}.volume .note{bottom:43%}.lil .project-title h2{font-size:11vw}.lil .project-title h2 br:last-child{display:block}.project-bottom p{max-width:100%;font-size:14px}.lil .project-bottom{bottom:10%}.lil .project-bottom button{bottom:115px}.spolvero .project-title h2{font-size:13vw}.spolvero .project-bottom p{font-size:12px;max-width:95%}.blackbelt .project-title h2{font-size:14vw}.contact h2{font-size:16vw;top:21%;line-height:1.05}.contact p{max-width:86%;font-size:15px;bottom:13%}.contact a{bottom:37%}}

@media(max-width:650px){.contact h2{right:7%;font-size:15vw}}
