:root{--bg:#eeede9;--ink:#161616;--soft:#77746d;--rule:#cfccc4;--paper:#f7f4ec;--red:#b3321f;--tape:rgba(231,222,190,.82);--sans:'Inter Tight',system-ui,sans-serif;--type:var(--mono);--script:'Monsieur La Doulaise',cursive}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.pad{padding-left:clamp(20px,3.2vw,48px);padding-right:clamp(20px,3.2vw,48px)}
.bar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px;font-size:15px;font-weight:600;mix-blend-mode:difference;color:#eeede9}
.bar nav{display:flex;gap:26px}.bar a:hover{opacity:.6}
.lab{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--soft)}
/* hero */
.hero{min-height:100svh;padding-top:110px;padding-bottom:40px;display:flex;flex-direction:column;justify-content:center;position:relative}
.big{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.82;font-size:clamp(70px,19vw,300px);position:relative;display:inline-block}
.big .sc{position:absolute;right:-2%;bottom:-16%;font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;font-size:.82em;line-height:1;color:var(--red);transform:rotate(-6deg);mix-blend-mode:multiply;white-space:nowrap}
.intro{margin-top:clamp(40px,6vw,90px);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.intro p{font-size:clamp(18px,1.9vw,26px);line-height:1.35;font-weight:500;letter-spacing:-.01em;max-width:24em}
/* receipt */
.receipt{background:#f1efe8;font-family:var(--mono);font-size:14px;line-height:1.7;padding:22px 20px 26px;position:relative;box-shadow:0 .6rem 1.2rem rgba(0,0,0,.18);transform:rotate(1.4deg);max-width:420px;justify-self:end;width:100%;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),95% 100%,90% calc(100% - 10px),85% 100%,80% calc(100% - 10px),75% 100%,70% calc(100% - 10px),65% 100%,60% calc(100% - 10px),55% 100%,50% calc(100% - 10px),45% 100%,40% calc(100% - 10px),35% 100%,30% calc(100% - 10px),25% 100%,20% calc(100% - 10px),15% 100%,10% calc(100% - 10px),5% 100%,0 calc(100% - 10px))}
.receipt h5{text-align:center;font-weight:400;font-size:15px;margin-bottom:6px}
.receipt .r{display:flex;gap:8px}.receipt .r i{flex:1;border-bottom:1px dotted #888;transform:translateY(-6px);font-style:normal}
.receipt hr{border:0;border-top:1px dashed #555;margin:8px 0}
.receipt .tot{text-align:center;margin-top:8px}
/* boards */
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-top:clamp(50px,6vw,90px);padding-bottom:clamp(20px,3vw,40px)}
.sh h2{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.85;font-size:clamp(48px,9vw,140px);position:relative}
.sh h2 .sc{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;color:var(--red);font-size:.8em;margin-left:.12em;display:inline-block;transform:rotate(-5deg);mix-blend-mode:multiply}
.sh .lab{color:#10201c;text-align:right}
/* scraps */
.tape{position:absolute;width:86px;height:26px;background:var(--tape);box-shadow:0 1px 3px rgba(0,0,0,.2);transform:rotate(var(--tr,-6deg));z-index:3}
.pol{position:relative;background:#fbfaf6;padding:10px 10px 42px;box-shadow:0 .8rem 1.4rem rgba(0,0,0,.28);transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.9,.25,1.3),box-shadow .3s;width:var(--w,200px);cursor:grab;touch-action:none;user-select:none}
.pol:hover{transform:rotate(0) scale(1.03);z-index:5}
.pol img{display:block;width:100%;aspect-ratio:var(--ar,1/1.15);object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s;pointer-events:none}
.pol:hover img{filter:none}
.pol figcaption{position:absolute;left:10px;right:10px;bottom:10px;font-family:var(--mono);font-size:12px;color:#333;text-align:center;line-height:1.2}
.card{position:relative;background:var(--paper);padding:26px 26px 24px;box-shadow:0 .8rem 1.4rem rgba(0,0,0,.25);transform:rotate(var(--r,0deg));background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(70,90,120,.1) 27px 28px)}
.card h3{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(32px,4.2vw,62px)}
.card h3+p{margin-top:14px}
.card p{font-size:16px;color:#2a2926;max-width:36em;margin-bottom:10px}
.card .lab{display:block;margin-bottom:6px}
.dymo{display:inline-block;background:#1c1c1c;color:#f3f2ec;font-family:var(--mono);font-size:13px;padding:5px 10px;border-radius:2px;margin:6px 8px 4px 0;transform:rotate(var(--r,-1deg));box-shadow:0 2px 3px rgba(0,0,0,.3),inset 0 0 0 1px #3a3a3a;text-shadow:0 0 1px #fff;letter-spacing:.02em}
.dymo b{color:#ffd9a0;font-weight:400}
.stamp{position:absolute;width:104px;height:104px;border:2px solid var(--red);border-radius:50%;color:var(--red);display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:12px;line-height:1.25;transform:rotate(-12deg);background:rgba(247,244,236,.55);z-index:4;letter-spacing:.08em;text-transform:uppercase;mix-blend-mode:multiply}
.stamp::after{content:"";position:absolute;inset:5px;border:1px solid var(--red);border-radius:50%}
.stamp b{display:block;font-family:var(--sans);font-weight:800;font-size:25px;letter-spacing:-.03em}
.ast{position:absolute;width:64px;color:var(--ink);animation:spin 14s linear infinite;z-index:4}
@keyframes spin{to{transform:rotate(360deg)}}
/* timeline */
.line{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:2px dashed rgba(247,244,236,.7);transform:translateX(-1px)}
.tl{position:relative;padding-bottom:80px}
.ev{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:center;margin-bottom:clamp(80px,10vw,150px)}
.ev .pics{position:relative;min-height:340px;display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:center}
.ev:nth-child(even) .pics{order:2}
.ev .txt{position:relative}
.ev .stamp{left:50%;top:-30px;margin-left:-52px}
.pics .pol:nth-child(2){margin-top:46px}.pics .pol:nth-child(3){margin-top:-10px}
.wo{margin-top:12px;font-family:var(--mono);font-size:14px;line-height:1.5}
.wo li{list-style:none;padding:6px 0 6px 34px;border-top:1px dashed #9a968a;position:relative;color:#2a2926}
.wo li::before{content:attr(data-n);position:absolute;left:0;font-family:var(--sans);font-weight:800;color:var(--red)}
/* folders */
.desk{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding-bottom:30px}
.fold{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;background:none;border:0;color:#fff;font:inherit;padding:10px 4px;border-radius:10px}
.fold:hover,.fold.on{background:rgba(255,255,255,.18)}
.fold .ic{width:clamp(80px,11vw,150px);aspect-ratio:1.28;position:relative;background:linear-gradient(180deg,#8fc1ec,#5e9bd6);border-radius:8px;box-shadow:0 8px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.55)}
.fold .ic::before{content:"";position:absolute;left:0;top:-12%;width:42%;height:18%;background:#7bb1e2;border-radius:8px 8px 0 0}
.fold .ic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:84%;background:linear-gradient(180deg,#b6d9f5,#79b0e3);border-radius:6px 8px 8px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.fold span{font-size:14px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.4);padding:1px 8px;border-radius:5px}
.fold.on span{background:#2f6fd6}
.win{background:#f6f4ee;border-radius:12px;box-shadow:0 1.4rem 3rem rgba(0,0,0,.35);overflow:hidden;max-width:880px;margin:0 auto 70px;transform:rotate(-.6deg)}
.win .tb{display:flex;align-items:center;gap:8px;padding:11px 14px;background:linear-gradient(#ecebe6,#dcdad3);border-bottom:1px solid #c4c1b8}
.win .tb i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.win .tb i:nth-child(2){background:#febc2e}.win .tb i:nth-child(3){background:#28c840}
.win .tb span{flex:1;text-align:center;font-family:var(--mono);font-size:13px;color:#555;margin-right:50px}
.win .bd{padding:clamp(18px,3vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:20px 40px}
.win h3{font-weight:800;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(34px,4vw,56px);line-height:.9}
.win p{font-size:16px;color:#2a2926;margin-top:12px}
.win table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px}
.win td{padding:8px 0;border-bottom:1px dashed #b9b5a8;vertical-align:top}.win td:last-child{text-align:right;color:var(--red)}
.doc{display:none}.doc.on{display:contents}
/* demo */
.demo{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,60px);align-items:start;padding-bottom:90px}
.vid{border-radius:12px;overflow:hidden;box-shadow:0 1.4rem 3rem rgba(0,0,0,.4);background:#111;transform:rotate(-1deg)}
.vid .tb{display:flex;align-items:center;gap:8px;padding:11px 14px;background:linear-gradient(#ecebe6,#dcdad3)}
.vid .tb i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.vid .tb i:nth-child(2){background:#febc2e}.vid .tb i:nth-child(3){background:#28c840}
.vid .tb span{flex:1;text-align:center;font-family:var(--mono);font-size:13px;color:#555;margin-right:50px}
.vid video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.sticky{background:#f3e9a8;padding:24px 22px 26px;box-shadow:0 .8rem 1.4rem rgba(0,0,0,.25);transform:rotate(2deg);font-family:var(--mono);font-size:14.5px;line-height:1.45;position:relative}
.sticky ol{margin:10px 0 0 18px}.sticky li{margin-bottom:8px}
/* skills */
.sk{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px 26px;padding-bottom:100px}
.sk .card{padding:30px 20px 18px}.sk .card:nth-child(1){--r:-1.8deg}.sk .card:nth-child(2){--r:1.4deg}.sk .card:nth-child(3){--r:-1deg}.sk .card:nth-child(4){--r:2deg}
.sk .card h4{font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:22px;margin-bottom:10px;line-height:1}
/* beyond */
.bey{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:34px 24px;padding-bottom:100px;align-items:start}
.bey .card{grid-column:span 6}.bey .wide{grid-column:span 12}
.bey .pics{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;justify-content:center}
/* contact */
.ct{padding:clamp(80px,10vw,160px) 0 30px;position:relative}
.ct .big{font-size:clamp(70px,17vw,280px)}
.ct .big a:hover{color:var(--red)}
.ct .row{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:34px;font-family:var(--mono);font-size:15px}
.ct .row a{border-bottom:1px solid var(--ink);padding-bottom:3px}.ct .row a:hover{color:var(--red);border-color:var(--red)}
footer{display:flex;justify-content:space-between;padding:60px 0 28px;font-size:13px;color:var(--soft)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
@media(max-width:860px){.bar nav{display:none}.intro,.demo{grid-template-columns:1fr}.receipt{justify-self:start}.ev{grid-template-columns:1fr;gap:34px}.ev:nth-child(even) .pics{order:0}.line{left:14px}.ev .stamp{left:auto;right:0;margin:0;top:-46px;width:84px;height:84px}.desk{grid-template-columns:repeat(3,1fr)}.win .bd{grid-template-columns:1fr}.bey .card{grid-column:span 12}.pol{--w:150px!important}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.ast{animation:none}html{scroll-behavior:auto}}
/* desk scene */



.hint-x{font-family:var(--mono);font-size:26px;color:#10201c;text-align:right;padding:0 clamp(20px,3.2vw,48px)}
.scene{--u:1cqw;container-type:inline-size;position:relative;width:min(1240px,100%);margin:0 auto;aspect-ratio:1200/820}
.obj{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r,0deg));cursor:grab;touch-action:none;user-select:none;opacity:0;--ty:40px;translate:0 var(--ty);transition:opacity .7s var(--dl,0s),translate .9s cubic-bezier(.2,.9,.25,1.2) var(--dl,0s);filter:drop-shadow(0 .9cqw 1.1cqw rgba(0,0,0,.28))}
.scene.in .obj{opacity:1;--ty:0px}
.obj.drag{cursor:grabbing;z-index:50!important;filter:drop-shadow(0 1.8cqw 2.2cqw rgba(0,0,0,.35))}
/* ransom tiles */
.tiles{display:flex;flex-direction:column;gap:.5cqw}
.tiles span{display:grid;place-items:center;width:5.6cqw;height:6.4cqw;font-size:4.6cqw;line-height:1;background:#e8e2d3;color:#1d1a15;box-shadow:.15cqw .2cqw .4cqw rgba(0,0,0,.25)}
.tiles span:nth-child(1){font-family:var(--mono);background:#b9c9a6;transform:rotate(-6deg)}
.tiles span:nth-child(2){font-family:'Inter Tight';font-weight:800;background:#efe9da;transform:rotate(4deg) translateX(1cqw)}
.tiles span:nth-child(3){font-family:'JetBrains Mono';background:#d6a766;color:#fff;transform:rotate(-3deg)}
.tiles span:nth-child(4){font-family:var(--mono);font-style:italic;background:#e6e1d6;transform:rotate(7deg) translateX(-.6cqw)}
.tiles span:nth-child(5){font-family:'Inter Tight';font-weight:800;background:#a7b7a1;transform:rotate(-4deg) translateX(.8cqw)}
.tiles span:nth-child(6){font-family:'JetBrains Mono';background:#efe9da;transform:rotate(3deg)}
.tiles span:nth-child(7){font-family:var(--mono);background:#9fb0c4;color:#fff;transform:rotate(-7deg) translateX(.6cqw)}
/* notebook */
.book{display:grid;grid-template-columns:1fr 3.2cqw 1fr;background:#f3f1ec;border-radius:.6cqw;padding:2.6cqw 1.6cqw 2.6cqw 1.6cqw;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);position:relative;color:#201d18}
.book::before{content:"";position:absolute;inset:0;border-radius:.6cqw;background:repeating-linear-gradient(0deg,transparent 0 1.55cqw,rgba(70,90,120,.09) 1.55cqw 1.6cqw);pointer-events:none}
.coil{grid-column:2;background:repeating-linear-gradient(180deg,#d9d9d6 0 .9cqw,#2a2a2a .9cqw 1.1cqw,#d9d9d6 1.1cqw 1.4cqw);border-radius:1.2cqw;box-shadow:inset .35cqw 0 .35cqw rgba(0,0,0,.28),inset -.35cqw 0 .35cqw rgba(0,0,0,.2)}
.receipt{grid-column:1;background:#efeeea;margin:-1cqw 1cqw 0 .8cqw;padding:1.8cqw 1.4cqw 1.4cqw;font-family:var(--mono);font-size:1.02cqw;line-height:1.55;position:relative;box-shadow:.1cqw .2cqw .5cqw rgba(0,0,0,.2);clip-path:polygon(0 0,100% 0,100% calc(100% - .8cqw),96% 100%,92% calc(100% - .8cqw),88% 100%,84% calc(100% - .8cqw),80% 100%,76% calc(100% - .8cqw),72% 100%,68% calc(100% - .8cqw),64% 100%,60% calc(100% - .8cqw),56% 100%,52% calc(100% - .8cqw),48% 100%,44% calc(100% - .8cqw),40% 100%,36% calc(100% - .8cqw),32% 100%,28% calc(100% - .8cqw),24% 100%,20% calc(100% - .8cqw),16% 100%,12% calc(100% - .8cqw),8% 100%,4% calc(100% - .8cqw),0 100%)}
.receipt h5{font-weight:400;text-align:center;font-size:1.15cqw}
.receipt .ln2{display:flex;justify-content:space-between}
.receipt hr{border:0;border-top:.1cqw dashed #444;margin:.6cqw 0}
.receipt .tl{overflow:hidden;white-space:nowrap;max-width:0}
.scene.in .receipt .tl{animation:type 1.1s steps(34) forwards;animation-delay:calc(1.2s + var(--k)*.45s)}
@keyframes type{to{max-width:100%}}
.barcode{height:3cqw;margin-top:.8cqw;background:repeating-linear-gradient(90deg,#111 0 .12cqw,transparent .12cqw .26cqw,#111 .26cqw .5cqw,transparent .5cqw .62cqw,#111 .62cqw .7cqw,transparent .7cqw .95cqw)}
.tape{position:absolute;width:6cqw;height:2cqw;background:rgba(222,214,190,.78);box-shadow:0 .1cqw .3cqw rgba(0,0,0,.18);transform:rotate(var(--tr,-8deg))}
.note{grid-column:3;margin:-.6cqw -.4cqw 0 1.4cqw;background:#dfddd8;padding:1.6cqw 1.5cqw;position:relative;font-size:1cqw;line-height:1.4;transform:rotate(1.4deg);box-shadow:.1cqw .2cqw .5cqw rgba(0,0,0,.18);align-self:start}
.note h6{font-family:'Inter Tight';font-weight:800;font-size:1.5cqw;margin-bottom:.5cqw}
.note .hand{font-family:var(--mono);font-size:.9cqw;line-height:1.35;margin-top:.8cqw}
.note ul{list-style:none;padding:0;font-family:'Inter Tight';font-weight:500}
.note li::before{content:"● ";font-size:.7em;vertical-align:.1em}
.pin{position:absolute;right:1cqw;top:-.8cqw;width:1.8cqw;height:1.8cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b7b7b7 45%,#6c6c6c);box-shadow:.2cqw .3cqw .4cqw rgba(0,0,0,.35)}
/* camera */
.cam{aspect-ratio:1.42;background:linear-gradient(160deg,#e9e9e6,#b9b9b6 55%,#9d9d9a);border-radius:1.6cqw;position:relative;box-shadow:inset 0 .2cqw .3cqw #fff,inset 0 -.4cqw .6cqw rgba(0,0,0,.25)}
.cam .scr{position:absolute;left:5%;top:19%;width:57%;height:70%;background:#050505;border-radius:.7cqw;border:.5cqw solid #6e6e6c;overflow:hidden;cursor:pointer}
.cam .scr img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.7);transform-origin:50% 16%;filter:grayscale(1)}
.cam .scr::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam .scr.flash::after{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.cam .lens{position:absolute;right:8%;top:8%;width:11cqw;height:11cqw;border-radius:50%;display:none}
.cam .top{position:absolute;left:7%;top:-3.8%;width:20%;height:5%;background:#cfcfcc;border-radius:.5cqw .5cqw 0 0}
.cam .flashbulb{position:absolute;left:6%;top:6%;width:7%;height:9%;background:linear-gradient(#2a2a2a,#555);border-radius:.4cqw}
.cam .lens2{position:absolute;left:19%;top:5%;width:9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#556,#0a0a14 60%);border:.3cqw solid #8b8b88}
.cam .dial{position:absolute;right:7%;top:42%;width:25%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4f4f2,#a7a7a4);box-shadow:inset 0 0 0 .5cqw #c9c9c6,0 .1cqw .3cqw rgba(0,0,0,.3)}
.cam .dial::after{content:"";position:absolute;inset:30%;border-radius:50%;background:#e6e6e3;box-shadow:inset 0 0 .4cqw rgba(0,0,0,.35)}
.cam .btn{position:absolute;width:4%;aspect-ratio:1;border-radius:50%;background:#8d8d8a;right:12%}
.cam .brand{position:absolute;right:9%;top:9%;font-family:'Inter Tight';font-weight:800;font-size:1.05cqw;letter-spacing:.06em;color:#555}
/* clipboard */
.clip{background:linear-gradient(135deg,#c9955f,#a9743f);border-radius:1.2cqw;padding:3.4cqw 1.5cqw 1.5cqw;aspect-ratio:.74}
.clip::before{content:"";position:absolute;left:50%;top:-1.4cqw;width:7cqw;height:5cqw;margin-left:-3.5cqw;background:linear-gradient(180deg,#f2f2f0,#9b9b98);border-radius:1.2cqw 1.2cqw .6cqw .6cqw;box-shadow:inset 0 -.3cqw .4cqw rgba(0,0,0,.25),0 .2cqw .4cqw rgba(0,0,0,.3)}
.sheet{background:#fbfaf7;height:100%;padding:3.4cqw 1.8cqw 1.4cqw;font-size:.95cqw;line-height:1.3;color:#1b1814}
.sheet h6{font-family:'Inter Tight';font-weight:800;font-size:1.7cqw;margin-bottom:1cqw}
.sheet p{margin-bottom:.9cqw}
.sheet b{font-family:'Inter Tight';font-weight:600;font-size:1.1cqw}
.sheet span{display:block;color:#5d574d}
/* terminal */
.term{background:#0b120d;color:#8bf0a5;font-family:var(--mono);font-size:1.25cqw;line-height:1.3;padding:1.2cqw 1.5cqw;border-radius:.5cqw;border:.4cqw solid #2c2f2c;box-shadow:inset 0 0 2cqw rgba(60,255,120,.12)}
.term::after{content:"█";animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.stk{position:absolute;pointer-events:none}
@media(max-width:800px){
 .scene{--u:3.5vw;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:26px;padding:20px 20px 10px;container-type:normal}
 .obj{position:relative;left:auto;top:auto;zoom:2.7;width:calc(min(94%,430px)/2.7)!important;touch-action:auto;cursor:default}
 .obj.tiles{zoom:1;width:auto!important}
 svg.obj{display:none}
 .scene .tiles,.scene .tiles span{font-size:16px}
 .tiles{flex-direction:row;flex-wrap:wrap;justify-content:center}
 .tiles span{width:48px;height:54px;font-size:30px}
 .scene,.scene *{--cq:1}
}
@media(prefers-reduced-motion:reduce){.obj{transition:none;opacity:1;translate:none}.scene .receipt .tl{max-width:100%;animation:none}.term::after{animation:none}}

:root{--bg:#f1efe9;--paper:#f7f4ec;--ink:#0b0b0b;--blue:#2230ff;--sky:#b5d3ec;--pink:#fbdfe7;--sans:'Inter Tight',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--script:'Monsieur La Doulaise',cursive;--soft:#77746d;--rule:#cfccc4}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55}
.pad{padding-left:clamp(20px,3.2vw,48px);padding-right:clamp(20px,3.2vw,48px)}
.sec{position:relative;overflow:hidden;isolation:isolate}
.t-ink{background:#0b0b0b;color:#f1efe9;--acc:#b5d3ec;--lab:#9c9a91;--ln:rgba(241,239,233,.4);--red:var(--acc)}
.t-blue{background:#2230ff;color:#fff;--acc:#fbdfe7;--lab:#cdd4ff;--ln:rgba(255,255,255,.55);--red:var(--acc)}
.t-paper{background:#f1efe9;color:#0b0b0b;--acc:#2230ff;--lab:#77746d;--ln:#cfccc4;--red:var(--acc)}
.t-sky{background:#b5d3ec;color:#0b0b0b;--acc:#2230ff;--lab:#2a4560;--ln:rgba(11,11,11,.3);--red:var(--acc)}
.card,.win,.sticky,.receipt,.pol figcaption,.fill{color:#161616}
.card p,.card h3{color:#161616}
.stamp{mix-blend-mode:normal!important;background:transparent!important;color:var(--acc);border-color:var(--acc)}.stamp::after{border-color:var(--acc)}
.line{border-left:2px dashed var(--ln)!important}
/* timeline stamps sit on the dashed line */
.ev .txt{position:static!important}
.ev .stamp{left:50%!important;top:-34px!important;margin-left:-52px!important;background:#0b0b0b!important;color:#b5d3ec!important;border-color:#b5d3ec!important}
.ev .stamp::after{border-color:#b5d3ec!important}
.t-ink .ev .card{margin-top:34px}
/* asterisk */
.ax{display:inline-block;width:1em;height:1em;vertical-align:-.12em;animation:spin 14s linear infinite;flex:none}
/* nav */
.nv{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:6px;padding:7px 8px 7px 18px;background:rgba(241,239,233,.88);backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.12);border-radius:99px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-width:calc(100vw - 24px);color:#0b0b0b}
.nv .lg{font-weight:800;letter-spacing:-.04em;font-size:16px;display:flex;align-items:center;gap:7px;white-space:nowrap;padding-right:10px}
.nv .lg .ax{color:#2230ff;width:17px;height:17px}
.nv a.l{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;padding:8px 11px;border-radius:99px;white-space:nowrap;color:#0b0b0b}
.nv a.l:hover{background:rgba(0,0,0,.07)}.nv a.l.on{background:#0b0b0b;color:#f1efe9}
.nv .mb{display:none;font-family:var(--mono);font-size:12px;background:#0b0b0b;color:#fff;border:0;border-radius:99px;padding:8px 14px}
/* shared section header */
.sh{display:block;padding-top:clamp(70px,8vw,120px);padding-bottom:clamp(26px,3.6vw,54px);position:relative}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lab);display:flex;align-items:center;gap:9px;margin-bottom:16px}
.kick .ax{width:15px;height:15px;color:var(--acc)}
.sh h2{font-weight:800;text-transform:uppercase;letter-spacing:-.065em;line-height:.8;font-size:clamp(56px,13vw,210px);display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .12em}
.sh h2 .sc,.sel{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;color:var(--acc);font-size:.78em;display:inline-block;position:relative;padding:.02em .16em;line-height:1;transform:rotate(-4deg);mix-blend-mode:normal;margin-left:0}
.sel::before{content:"";position:absolute;inset:.1em -.02em;border:1px solid currentColor}
.sel::after{content:"";position:absolute;inset:calc(.1em - 4px) calc(-.02em - 4px);pointer-events:none;background:linear-gradient(currentColor,currentColor) 0 0/8px 8px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/8px 8px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/8px 8px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/8px 8px no-repeat}
.sh .lab{position:absolute;right:0;bottom:calc(clamp(26px,3.6vw,54px) + 6px);color:var(--lab);text-align:right;max-width:18em}
/* hero */
.kk{min-height:100svh;padding:96px clamp(20px,3.2vw,48px) 34px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.kk .dots{position:absolute;inset:0;z-index:-2;background-image:radial-gradient(circle,#cfccc2 1.6px,transparent 2.1px);background-size:15px 15px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000 20%,transparent 75%)}
.kk .star{position:absolute;left:50%;top:50%;width:min(88vw,900px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-8deg);background:var(--pink);opacity:.8;z-index:-1;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.kk-name{font-weight:800;text-transform:uppercase;letter-spacing:-.07em;line-height:.8;font-size:clamp(54px,14vw,270px);color:#0b0b0b;position:relative;z-index:1;margin-top:.1em}
.kk-name span{display:block}.kk-name span:last-child{text-align:right;margin-top:.04em}
.kk-photo{position:absolute;left:50%;bottom:0;height:min(84svh,960px);width:auto;transform:translateX(-50%);z-index:3;pointer-events:none}
.kk-script{position:absolute;left:clamp(14px,5vw,90px);bottom:19%;z-index:5;font-family:var(--script);font-size:clamp(70px,13vw,230px);line-height:1;color:var(--blue);transform:rotate(-6deg);padding:.02em .14em;mix-blend-mode:normal}
.kk .lolli{z-index:5!important;position:absolute;width:clamp(36px,5vw,76px);aspect-ratio:1;border-radius:50%;background:#7aa3e0;z-index:1}
.kk .lolli::after{content:"";position:absolute;left:50%;top:100%;width:5px;height:clamp(50px,9vw,140px);margin-left:-2.5px;background:#7aa3e0}
.kk-foot{z-index:6;display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:5}
.kk-foot span{display:flex;align-items:center;gap:8px}.kk-foot .ax{color:var(--blue)}
/* strips */
.strip{overflow:hidden;white-space:nowrap;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:clamp(10px,1.4vw,18px) 0}
.strip .trk{display:inline-flex;align-items:center;animation:slide var(--d,38s) linear infinite}
.strip.rev .trk{animation-direction:reverse}
.strip b{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;font-size:clamp(30px,5.4vw,88px);line-height:1;padding:0 clamp(16px,2.4vw,36px)}
.strip .ax{width:clamp(24px,3.8vw,60px);height:clamp(24px,3.8vw,60px);color:var(--acc)}
@keyframes slide{to{transform:translateX(-50%)}}
/* about */
.stmt{font-weight:800;letter-spacing:-.04em;line-height:1;font-size:clamp(30px,5.2vw,84px);text-align:left;text-transform:none;max-width:21em}
.stmt em{font-style:normal;font-family:var(--script);font-weight:400;letter-spacing:0;color:var(--acc);font-size:1.2em;line-height:.6}
.two{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:clamp(40px,6vw,90px);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;font-size:clamp(24px,3.4vw,52px);line-height:.95;padding-bottom:clamp(60px,8vw,110px)}
.two a:hover{color:var(--acc)}
.wc{background:#fff;color:#0b0b0b;padding:clamp(20px,3vw,44px);margin-bottom:22px}
.wc h3{font-weight:800;letter-spacing:-.04em;line-height:.98;font-size:clamp(28px,4.8vw,76px);text-transform:none}
.wc .row{display:flex;gap:clamp(18px,3vw,50px);align-items:flex-end;margin-top:clamp(20px,3vw,46px);flex-wrap:wrap}
.wc .row img{width:clamp(130px,16vw,230px);aspect-ratio:1/1.1;object-fit:cover;filter:grayscale(1)}
.wc .row p{font-weight:700;letter-spacing:-.03em;line-height:1.05;font-size:clamp(15px,1.6vw,22px);max-width:30em;margin-left:auto}
.wc.n{max-width:min(100%,640px);margin-left:auto}
.cards{padding:clamp(60px,8vw,110px) 0 clamp(30px,5vw,60px)}
/* work/desk */
.desk-wrap{padding-bottom:clamp(50px,6vw,90px)}
.fold{color:inherit}
.fold .ic{background:#86c5f2!important;box-shadow:none!important;border-radius:5px!important}
.fold .ic::before{background:#58a5df!important}
.fold .ic::after{background:linear-gradient(180deg,#9bd0f6,#86c5f2)!important;box-shadow:inset 0 -9px 0 -6px rgba(0,0,0,.07)!important}
.fold.star .ic,.fold.star .ic::before,.fold.star .ic::after{background:#f7cfdb!important}.fold.star .ic::before{background:#eab0c4!important}
.fold span:last-child{text-shadow:none!important;color:#0b0b0b;font-weight:600;font-size:15px}
.fold.star span:last-child::before{content:"★ ";color:#2f6fd6}
.fold.on{background:rgba(34,48,255,.08)!important}.fold.on span:last-child{background:#2230ff;color:#fff}
.t-paper .win{box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.18)}
.win .pill{display:inline-block;border-bottom:2px solid #0b0b0b;font-weight:600;font-size:15px;margin-top:6px}.win .pill:hover{color:#2230ff;border-color:#2230ff}
/* footer */
.ft{padding-top:clamp(70px,9vw,140px);padding-bottom:26px}
.ft .big{font-weight:800;text-transform:uppercase;letter-spacing:-.07em;line-height:.8;font-size:clamp(70px,17.5vw,330px)}
.ft .big a{display:flex;align-items:center;gap:.1em;flex-wrap:wrap}
.ft .big a:hover{color:var(--acc)}
.ft .big .ax{width:.62em;height:.62em;color:var(--acc)}
.ft .row{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:38px;font-family:var(--mono);font-size:14px}
.ft .row a{border-bottom:1px solid currentColor;padding-bottom:3px}.ft .row a:hover{color:var(--acc)}
.ft .base{display:flex;justify-content:space-between;gap:12px;margin-top:70px;padding-top:20px;border-top:1px solid var(--ln);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lab)}
.ft .base span,.ft .base a{display:flex;align-items:center;gap:8px}.ft .base .ax{color:var(--acc)}
/* project pages */
.pp{padding-top:clamp(100px,12vw,170px)}
.pp h1{font-weight:800;text-transform:uppercase;letter-spacing:-.07em;line-height:.8;font-size:clamp(60px,15vw,250px);margin:6px 0 0}
.pp h1 .sel{font-size:.4em;display:block;width:max-content;margin:.25em 0 0 .8em}
.pp .one{font-size:clamp(20px,2.4vw,34px);line-height:1.2;font-weight:600;letter-spacing:-.025em;max-width:24em;margin-top:34px}
.pp .meta{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0}
.blk{display:grid;grid-template-columns:150px 1fr;gap:10px 40px;padding:38px 0;border-top:1px solid var(--ln)}
.blk .n{font-family:var(--mono);font-size:12px;color:var(--lab);padding-top:14px;display:flex;gap:7px;align-items:flex-start}.blk .n .ax{width:13px;height:13px;color:var(--acc);margin-top:3px}
.blk h2{font-weight:800;text-transform:uppercase;letter-spacing:-.055em;line-height:.88;font-size:clamp(34px,5vw,70px);margin-bottom:16px}
.blk p,.blk ul,.blk ol{max-width:58ch;margin-bottom:14px}.blk ul,.blk ol{padding-left:20px}.blk li{margin-bottom:8px}.blk li::marker{color:var(--acc)}
.fill{position:relative;background:#fff3a6;font-family:var(--mono);font-size:13px;line-height:1.5;padding:18px 18px 16px;margin:20px 0 10px;max-width:48ch;transform:rotate(-1deg);box-shadow:0 .5rem 1rem rgba(0,0,0,.18)}
.fill::before{content:"";position:absolute;left:30px;top:-10px;width:70px;height:22px;background:rgba(231,222,190,.85);transform:rotate(-5deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.fill b{display:block;color:#b3321f;font-weight:500;margin-bottom:4px}
.nums{display:flex;flex-wrap:wrap;gap:34px}.nums div{font-family:var(--mono);font-size:13px;color:var(--lab);max-width:12em}
.nums strong{display:block;font-family:var(--sans);font-weight:800;letter-spacing:-.06em;font-size:clamp(50px,6vw,84px);line-height:.9;color:var(--ink)}
.nxt{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:30px 0 80px;border-top:1px solid var(--ink)}
.nxt a{font-weight:800;font-size:clamp(22px,3vw,40px);letter-spacing:-.04em;text-transform:uppercase}.nxt a:hover{color:var(--acc)}
.pill{display:inline-block;border-bottom:2px solid currentColor;font-weight:600;font-size:15px}
.ig-row{display:flex;flex-wrap:wrap;gap:28px;margin:10px 0}.ig{margin:0;width:min(100%,360px)}.ig iframe{display:block;width:100%;height:640px;border:1px solid var(--ln);border-radius:12px;background:#fff}.ig figcaption{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--lab)}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px;padding-bottom:10px}
.mini{display:block;background:var(--paper);color:#161616;padding:12px 12px 18px;box-shadow:0 .8rem 1.4rem rgba(0,0,0,.28);transform:rotate(var(--r,0deg));position:relative;transition:transform .35s cubic-bezier(.2,.9,.25,1.3)}
.mini:hover{transform:rotate(0) translateY(-6px)}
.mini img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);display:block;transition:filter .4s}.mini:hover img{filter:none}
.mini .d{font-family:var(--mono);font-size:12px;color:#77746d;display:block;margin-top:12px}
.mini h3{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;font-size:30px;margin:4px 0 6px;color:#161616}
.mini p{font-size:15px;line-height:1.4;color:#161616;margin:0}
.mini .more{font-family:var(--mono);font-size:12px;color:#2230ff;margin-top:10px;display:block}
.go{display:inline-block;margin:clamp(30px,4vw,56px) 0 clamp(50px,7vw,90px);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;font-size:clamp(24px,3.4vw,46px);border-bottom:3px solid currentColor;line-height:1.1}
.go:hover{color:var(--acc)}
.lite-strip{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;padding:10px 0 0}
.lite-p{font-weight:600;letter-spacing:-.025em;font-size:clamp(20px,2.4vw,32px);line-height:1.2;max-width:26em;margin:0 0 30px}
.pol video{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;pointer-events:none;background:#000}
.tix{position:relative;background:#14110f;color:#f3e7c9;width:200px;padding:16px 16px 18px;transform:rotate(var(--r,0deg));box-shadow:0 .8rem 1.4rem rgba(0,0,0,.28);clip-path:polygon(0 0,100% 0,100% 42%,96% 50%,100% 58%,100% 100%,0 100%,0 58%,4% 50%,0 42%)}
.tix small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#c9a96b}
.tix b{display:block;font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;font-size:38px;margin:14px 0 14px;color:#f6d79a}
.tix .tix-bar{display:block;height:20px;background:repeating-linear-gradient(90deg,#f3e7c9 0 2px,transparent 2px 5px,#f3e7c9 5px 6px,transparent 6px 10px)}
.bey .card>h3{margin-bottom:6px}
.bey{align-items:stretch!important}.bey .card .pics{padding-top:22px}
@media(max-width:1100px){.nv a.l{padding:8px 8px;font-size:10.5px}}
@media(max-width:800px){.o-book,.o-term,.o-clip{display:none!important}#folders{grid-template-columns:repeat(3,1fr)!important}.kk-foot span{background:rgba(241,239,233,.92);padding:6px 10px}}
@media(max-width:900px){.nv{left:12px;right:12px;transform:none;justify-content:space-between;flex-wrap:wrap;border-radius:24px;padding:8px 8px 8px 16px}.nv .mb{display:block}.nv a.l{display:none;width:100%}.nv.open a.l{display:block}.nv .lg{order:0}.nv .mb{order:1}.sh .lab{position:static;margin-top:16px;text-align:left}.two{grid-template-columns:1fr}.wc .row p{margin-left:0}.kk-script{bottom:22%}.blk{grid-template-columns:1fr;gap:0}}
/* ===== New structure, in the original cobalt + scrapbook look ===== */
:root{--rule:#cfccc4;--soft:#77746d;--script:'Monsieur La Doulaise',cursive}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,3.2vw,48px)}
.sec2{padding:clamp(56px,7vw,100px) 0;position:relative}
.sec2.nopad-top{padding-top:10px}
.t-sky .kick,.t-paper .kick{color:var(--lab)}

/* nav: CV button */
.nv .cv{display:inline-flex;align-items:center;background:#2230ff;color:#fff!important;border-radius:99px;padding:8px 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;margin-left:4px}
.nv .cv:hover{background:#0b0b0b}
.nv a.l.on{background:#0b0b0b;color:#f1efe9}

/* page header: same bold-caps + script style as the other sections */
.phead2{padding-bottom:clamp(30px,4vw,56px)}
.phead2 .sh{padding-bottom:0}
.phead2 .lead{font-weight:600;letter-spacing:-.025em;font-size:clamp(20px,2.3vw,32px);line-height:1.2;max-width:28em;margin:22px 0 0}

/* shared headings for new blocks */
.h2s{font-weight:800;text-transform:uppercase;letter-spacing:-.06em;line-height:.9;font-size:clamp(38px,6vw,92px);margin:0 0 18px}
.h2s em{font-family:var(--script);font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--acc);font-size:1.12em;line-height:.8}
.sub2{max-width:44em;font-size:19px;margin:0 0 30px;line-height:1.5}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:99px;background:#0b0b0b;color:#f1efe9;font-weight:600;font-size:15px;border:1.5px solid #0b0b0b;transition:.2s}
.btn:hover{background:#2230ff;border-color:#2230ff;color:#fff}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}.btn.ghost:hover{background:#0b0b0b;color:#f1efe9;border-color:#0b0b0b}
.btn.acc{background:#2230ff;border-color:#2230ff;color:#fff}.btn.acc:hover{background:#0b0b0b;border-color:#0b0b0b}
.t-ink .btn{background:#f1efe9;color:#0b0b0b;border-color:#f1efe9}.t-ink .btn:hover{background:#b5d3ec;border-color:#b5d3ec}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.cvhero{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:#2230ff;color:#fff;padding:9px 16px;border-radius:99px}
.cvhero:hover{background:#0b0b0b}

/* hooks: the proof visitors should see first */
.hooks{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ln)}
.hook{display:block;padding:30px 26px 30px 0;border-right:1px solid var(--ln);color:inherit;position:relative}
.hook+.hook{padding-left:26px}.hook:last-child{border-right:0}
.hook strong{display:block;font-weight:800;text-transform:uppercase;letter-spacing:-.07em;font-size:clamp(60px,7.2vw,120px);line-height:.85;color:var(--acc);transition:transform .3s}
.hook:hover strong{transform:translateX(6px)}
.hook b{display:block;font-size:20px;font-weight:700;line-height:1.15;margin:14px 0 8px;letter-spacing:-.02em;max-width:11em}
.hook p{font-size:14.5px;line-height:1.45;margin:0;opacity:.85;max-width:17em}
.hook .pf{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin-top:14px;border-bottom:1px solid currentColor}
.also{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:6px;padding-top:22px;border-top:1px solid var(--ln);font-size:15px}
.also b{font-weight:800;letter-spacing:-.05em;font-size:26px;color:var(--acc);margin-right:8px;vertical-align:-2px}

/* founder pills */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.fpill{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;border:2px solid #0b0b0b;border-radius:99px;background:#fff;color:#0b0b0b}
.fpill h3{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;font-size:26px;line-height:1;margin:0;color:#0b0b0b}
.fpill small{display:block;font-size:14px;color:#555;margin-top:4px}
.fpill i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;text-align:right;white-space:nowrap;color:#2230ff}
.t-ink .fpill{background:#14130f;border-color:#3b3a34;color:#f1efe9}.t-ink .fpill h3{color:#f1efe9}.t-ink .fpill small{color:#a39d8f}

/* tiles */
.tilegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;color:#fff;background:#222;box-shadow:0 .8rem 1.4rem rgba(0,0,0,.2)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.8))}
.tile:hover img{transform:scale(1.06)}
.tile .tx{position:absolute;left:20px;right:20px;bottom:20px;z-index:2}
.tile .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.tile h3{font-weight:800;text-transform:uppercase;letter-spacing:-.06em;font-size:clamp(34px,3.4vw,52px);line-height:.9;margin:6px 0 8px;color:#fff}
.tile p{font-size:14.5px;line-height:1.4;margin:0;color:#fff;opacity:.92}
.tile .arr{position:absolute;right:16px;top:16px;z-index:2;width:38px;height:38px;border-radius:50%;background:#f1efe9;color:#0b0b0b;display:grid;place-items:center;transition:.25s}
.tile:hover .arr{background:#2230ff;color:#fff;transform:rotate(-45deg)}

/* project cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px}
.pcard{display:flex;flex-direction:column;background:#f7f4ec;color:#161616;box-shadow:0 .8rem 1.4rem rgba(0,0,0,.22);transition:transform .35s cubic-bezier(.2,.9,.25,1.3);background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(70,90,120,.07) 27px 28px)}
.pgrid .pcard:nth-child(odd){transform:rotate(-.6deg)}.pgrid .pcard:nth-child(even){transform:rotate(.6deg)}
.pcard:hover{transform:rotate(0) translateY(-6px)}
.pcard .im{aspect-ratio:4/3;overflow:hidden;background:#ddd;margin:12px 12px 0}
.pcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}.pcard:hover img{transform:scale(1.05)}
.pcard .b{padding:16px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .tag{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#77746d}
.pcard h3{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;font-size:34px;line-height:.92;margin:0;color:#161616}
.pcard p{font-size:15px;line-height:1.45;margin:0;color:#2a2926}
.chips2{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.chips2 span{font-family:var(--mono);font-size:11.5px;background:#1c1c1c;color:#f3f2ec;padding:4px 9px;border-radius:2px}
.chips2 b{color:#ffd9a0;font-weight:400}
.pcard .go2{font-family:var(--mono);font-size:12px;color:#2230ff;margin-top:10px}
.grp{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lab);margin:54px 0 18px;padding-top:18px;border-top:1px solid var(--ln)}
.grp .ax{color:var(--acc);width:14px;height:14px}

/* flowchart: path */
.flow{display:flex;align-items:flex-start;overflow-x:auto;padding:26px 6px 22px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.fnode{flex:0 0 158px;text-align:center;position:relative;scroll-snap-align:start;color:inherit;padding:0 6px}
.fnode .ic{width:70px;height:70px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;margin:0 auto 12px;background:#fff;color:#0b0b0b;transition:.25s}
.t-ink .fnode .ic{background:#14130f;color:#f1efe9}
.fnode:hover .ic{background:#2230ff;color:#fff;border-color:#2230ff;transform:translateY(-5px) rotate(-6deg)}
.fnode .y{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--lab)}
.fnode .t{display:block;font-weight:800;font-size:16px;line-height:1.05;margin-top:4px;letter-spacing:-.03em;text-transform:uppercase}
.fnode:not(:last-child)::after{content:"";position:absolute;top:35px;left:calc(50% + 46px);width:calc(100% - 92px);border-top:2px dashed currentColor;opacity:.5}
.fnode:not(:last-child)::before{content:"";position:absolute;top:31px;left:calc(150% - 52px);width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.7}
.svg-i{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* flowchart: loop */
.loop{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.st{padding:0 14px 0 0;position:relative}
.st .ic{width:62px;height:62px;border-radius:50%;background:#0b0b0b;color:#f1efe9;display:grid;place-items:center;margin-bottom:14px}
.st .n{font-family:var(--mono);font-size:11px;color:var(--lab);display:block;margin-bottom:4px}
.st b{display:block;font-weight:800;text-transform:uppercase;letter-spacing:-.05em;font-size:24px;line-height:.95;margin-bottom:8px}
.st p{font-size:14.5px;line-height:1.4;margin:0}
.st p i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--acc);display:block;margin-top:8px}
.st:not(:last-child)::after{content:"";position:absolute;top:31px;left:68px;right:12px;border-top:2px dashed currentColor;opacity:.45}
.loopback{margin:26px 30px 0;border:2px dashed currentColor;border-top:none;height:34px;border-radius:0 0 28px 28px;position:relative;opacity:.55}
.loopback span{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:0 14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.t-sky .loopback span{background:#b5d3ec}.t-paper .loopback span{background:#f1efe9}

/* curiosity map */
.cmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:14px}
.cm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 10px 20px;background:#fff;color:#0b0b0b;box-shadow:0 .5rem 1rem rgba(0,0,0,.14);transition:.25s}
.cm:nth-child(odd){transform:rotate(-1.2deg)}.cm:nth-child(even){transform:rotate(1.2deg)}
.cm:hover{background:#2230ff;color:#fff;transform:rotate(0) translateY(-4px)}
.cm .svg-i{width:34px;height:34px}
.cm b{font-weight:800;text-transform:uppercase;letter-spacing:-.04em;font-size:21px;line-height:1}
.cm small{font-size:12.5px;opacity:.7;line-height:1.3}

/* education */
.edu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.edu>div{background:#f7f4ec;color:#161616;padding:24px;box-shadow:0 .6rem 1.2rem rgba(0,0,0,.18);background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(70,90,120,.07) 27px 28px)}
.edu>div:nth-child(odd){transform:rotate(-.7deg)}.edu>div:nth-child(even){transform:rotate(.7deg)}
.edu h3{font-weight:800;text-transform:uppercase;letter-spacing:-.05em;font-size:28px;line-height:.95;margin:8px 0 10px;color:#161616}
.edu small{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#77746d}
.edu p{margin:0;font-size:15.5px;color:#2a2926}

/* about */
.abhero{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:center}
.abhero .pol{--w:100%;width:100%;max-width:440px;--r:-2deg;cursor:default}
.abhero .pol img{aspect-ratio:3/4;filter:none}
.wall{display:flex;flex-wrap:wrap;gap:26px 22px;justify-content:center}

/* galleries as scrapbook */
.polgal{display:flex;flex-wrap:wrap;gap:34px 26px;justify-content:center;padding:6px 0 10px}
.polgal .pol{cursor:zoom-in}
.polgal video{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#000}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin:44px 0 8px}
.topics a{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:9px 15px;border:2px solid #0b0b0b;border-radius:99px;background:#fff}
.topics a:hover,.topics a.on{background:#0b0b0b;color:#f1efe9}
.photos{display:flex;flex-wrap:wrap;gap:22px;margin-top:24px}
.photos figure{margin:0;width:230px;background:#fbfaf6;padding:10px 10px 12px;box-shadow:0 .6rem 1.2rem rgba(0,0,0,.25)}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;cursor:zoom-in}
.photos figcaption{font-family:var(--mono);font-size:11px;color:#333;padding-top:7px}
.sgphotos{display:flex;flex-wrap:wrap;gap:26px 22px;margin:26px 0 6px}
.sgphotos figure{margin:0;width:230px;background:#fbfaf6;padding:10px 10px 12px;box-shadow:0 .6rem 1.2rem rgba(0,0,0,.25)}
.sgphotos figure:nth-child(odd){transform:rotate(-1.5deg)}.sgphotos figure:nth-child(even){transform:rotate(1.5deg)}
.sgphotos img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;cursor:zoom-in}
.sgphotos figcaption{font-family:var(--mono);font-size:11px;color:#333;padding-top:7px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:300;background:rgba(10,10,10,.94);display:none;place-items:center;padding:30px}
.lb.on{display:grid}.lb img{max-width:94vw;max-height:84vh;display:block}
.lb p{color:#cfd3ff;font-family:var(--mono);font-size:12px;text-align:center;margin:12px 0 0}
.lb button{position:absolute;top:18px;right:22px;background:none;border:1px solid #cfd3ff;color:#fff;border-radius:99px;font-family:var(--mono);font-size:12px;padding:8px 14px}

/* cursor: asterisk */
html.cs,html.cs *{cursor:none!important}
.ast-cursor{position:fixed;left:0;top:0;width:34px;height:34px;pointer-events:none;z-index:9999;color:#2230ff;will-change:transform}
.ast-cursor svg{width:100%;height:100%;animation:spin 7s linear infinite;transition:transform .25s}
.ast-cursor.hov svg{transform:scale(1.7)}.ast-cursor.dn svg{transform:scale(.7)}
.ast-trail{position:fixed;width:15px;height:15px;pointer-events:none;z-index:9998;color:#2230ff;margin:-7px 0 0 -7px;animation:trail .9s ease-out forwards}
.ast-trail svg{width:100%;height:100%}
@keyframes trail{0%{opacity:.85;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.3)}}

/* project pages sit on the same scrapbook look */
.pp .wrap{padding:0}

@media(max-width:1000px){.tilegrid{grid-template-columns:repeat(2,1fr)}.loop{grid-template-columns:1fr;gap:26px}.st:not(:last-child)::after{display:none}.loopback{display:none}.abhero{grid-template-columns:1fr}.hooks{grid-template-columns:1fr 1fr}.hook{border-right:0;border-bottom:1px solid var(--ln);padding:26px 14px 26px 0}.hook+.hook{padding-left:0}}
@media(max-width:900px){.nv .cv{display:none}.nv.open .cv{display:inline-flex;margin:6px 0 2px}}
@media(max-width:560px){.tilegrid{grid-template-columns:1fr}.tile{aspect-ratio:4/3}.hooks{grid-template-columns:1fr}.fpill{border-radius:30px}.polgal .pol{--w:150px!important}}
@media(prefers-reduced-motion:reduce){.ast-cursor svg{animation:none}.fnode:hover .ic{transform:none}}

/* ===== calmer type: smaller, lighter, sentence case on sub-headings ===== */
.sh h2{font-size:clamp(42px,7.2vw,112px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.kk-name{font-size:clamp(54px,12.4vw,236px)}
.h2s{font-weight:700;font-size:clamp(32px,4.6vw,70px);letter-spacing:-.05em}
.hook strong{font-weight:700;font-size:clamp(52px,6vw,98px);letter-spacing:-.06em}
.card h3,.pcard h3,.ev h3,.edu h3,.blk h2,.fpill h3,.st b,.cm b,.tile h3,.win h3{text-transform:none;font-weight:700;letter-spacing:-.035em;line-height:1}
.ev h3{font-size:clamp(28px,3.6vw,52px)}.card h3{font-size:clamp(28px,3vw,44px)}.blk h2{font-size:clamp(30px,3.8vw,54px)}
.tile h3{font-size:clamp(30px,3vw,44px)}.pcard h3{font-size:30px}.edu h3{font-size:26px}.fpill h3{font-size:24px}.st b{font-size:22px}.cm b{font-size:19px}
.stmt{font-weight:700;letter-spacing:-.04em}
.ft .big{font-weight:700;font-size:clamp(56px,12.4vw,220px)}
.pp h1{font-weight:700;font-size:clamp(48px,10vw,170px);letter-spacing:-.06em}
.wc h3{font-weight:700;letter-spacing:-.035em}
.strip b{font-weight:700;font-size:clamp(26px,4.2vw,66px);letter-spacing:-.04em}
.phead2 .lead{font-weight:500}
.dymo b{font-size:1.12em}
.nums strong{font-weight:700;letter-spacing:-.06em;font-size:clamp(46px,5.4vw,80px)}

/* ===== scroll motion ===== */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:#2230ff;z-index:80;pointer-events:none}
.rv2{opacity:0;translate:0 28px;scale:.985;transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms),translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms),scale .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .35s cubic-bezier(.2,.9,.25,1.3),box-shadow .3s,filter .4s,background .25s,color .25s}
.rv2.in2{opacity:1;translate:0 0;scale:1}
.tile img{inset:-8% 0;height:116%;translate:0 var(--py,0px);animation:kb 22s ease-in-out infinite alternate}
.pcard .im img{height:120%;margin-top:-10%;translate:0 var(--py,0px)}
@keyframes kb{from{scale:1.02}to{scale:1.1}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.polgal .pol.in2:nth-child(3n+1){animation:bob 7s ease-in-out infinite}
.polgal .pol.in2:nth-child(3n+2){animation:bob 9s ease-in-out -2s infinite}
.fnode.in2 .ic{animation:pop .7s cubic-bezier(.2,1.4,.3,1) both}
@keyframes pop{from{scale:.6}to{scale:1}}
.ribbon{overflow:hidden;padding:26px 0;background:#0b0b0b}
.ribbon .trk{display:inline-flex;gap:16px;animation:slide 90s linear infinite;white-space:nowrap}
.ribbon img{height:190px;width:auto;display:block;filter:grayscale(1) contrast(1.05);transition:filter .4s}
.ribbon img:hover{filter:none}
.ribbon:hover .trk{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rv2{opacity:1;translate:none;scale:1}.tile img,.polgal .pol,.ribbon .trk,.fnode .ic{animation:none!important}}

/* ===== website highlight + setup page ===== */
.browser{background:#e9e7e1;border-radius:12px;box-shadow:0 1.4rem 3rem rgba(0,0,0,.35);overflow:hidden;position:relative}
.browser::before{content:"";display:block;height:30px;background:linear-gradient(#ecebe6,#dcdad3);border-bottom:1px solid #c4c1b8;background-image:radial-gradient(circle at 16px 15px,#ff5f57 5px,transparent 5.5px),radial-gradient(circle at 34px 15px,#febc2e 5px,transparent 5.5px),radial-gradient(circle at 52px 15px,#28c840 5px,transparent 5.5px),linear-gradient(#ecebe6,#dcdad3)}
.browser img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.browser:hover img{transform:scale(1.03)}
.browser{overflow:hidden}
.twoclick{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:stretch}
.clickcard{display:flex;flex-direction:column;gap:20px;background:#f7f4ec;color:#161616;padding:22px;box-shadow:0 .9rem 1.6rem rgba(0,0,0,.28);transition:transform .35s cubic-bezier(.2,.9,.25,1.3)}
.clickcard:hover{transform:translateY(-6px) rotate(-.4deg)}
.clickcard .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#2230ff}
.clickcard h3{font-weight:700;letter-spacing:-.04em;font-size:clamp(28px,3vw,42px);line-height:1;margin:6px 0 8px;color:#161616}
.clickcard p{margin:0;font-size:15.5px;line-height:1.45;color:#2a2926;max-width:34em}
.clickcard .go2{font-family:var(--mono);font-size:12.5px;color:#2230ff;margin-top:12px;display:inline-block;border-bottom:1px solid currentColor}
.clickcard.setup{background:#0b0b0b;color:#f1efe9;justify-content:space-between}
.clickcard.setup h3,.clickcard.setup p{color:#f1efe9}.clickcard.setup .k,.clickcard.setup .go2{color:#b5d3ec}
.sico{display:flex;flex-wrap:wrap;gap:10px}
.sico span{width:46px;height:46px;border:1.5px solid #f1efe9;border-radius:50%;display:grid;place-items:center}
.sico .svg-i{width:22px;height:22px}
.smets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid rgba(241,239,233,.25);padding-top:14px}
.smets b{display:block;font-size:34px;font-weight:700;letter-spacing:-.05em;color:#b5d3ec;line-height:1}
.smets small{font-size:12px;opacity:.8}
.sitebanner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;padding:34px 0 10px}
.sitebanner .shotlink{display:block}
.sitebanner h2{font-weight:700;text-transform:uppercase;letter-spacing:-.05em;line-height:.92;font-size:clamp(32px,4vw,58px);margin:8px 0 14px}
.sitebanner h2 em{font-family:var(--script);font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:#2230ff;font-size:1.15em}
.sitebanner p{max-width:30em;font-size:17px;margin:0 0 6px}
.toolchips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.toolchips span{font-family:var(--mono);font-size:12.5px;background:#1c1c1c;color:#f3f2ec;padding:6px 11px;border-radius:2px}
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.agrid .cm{align-items:flex-start;text-align:left;transform:none}
.agrid .cm:hover{transform:translateY(-4px)}
.agrid .cm small{opacity:.8;font-size:13.5px;line-height:1.4}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.two2>div{background:#f7f4ec;color:#161616;padding:26px;box-shadow:0 .6rem 1.2rem rgba(0,0,0,.18)}
.two2 h3{font-weight:700;letter-spacing:-.04em;font-size:30px;line-height:1;margin:6px 0 12px;color:#161616}
.two2 p{margin:0 0 10px;color:#2a2926;font-size:16px}
.two2 small{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#2230ff}
@media(max-width:1000px){.twoclick,.sitebanner,.two2{grid-template-columns:1fr}}

/* ===== rich folder window ===== */
.win.rich .bd{display:block;padding:clamp(18px,3vw,38px)}
.win.rich .doc{display:none}.win.rich .doc.on{display:block;animation:docin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes docin{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.dtop{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.dtop small{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#77746d}
.win.rich h3{font-weight:700;letter-spacing:-.05em;font-size:clamp(36px,4.6vw,66px);line-height:.95;margin:6px 0 12px;color:#161616;text-transform:none}
.lede{max-width:44em;font-size:18px;line-height:1.45;margin:0;color:#2a2926}
.dmet{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:26px 0 8px;border-top:2px solid #0b0b0b;border-bottom:1px solid #cfccc4}
.dmet div{padding:16px 14px 14px 0}
.dmet b{display:block;font-weight:700;letter-spacing:-.06em;font-size:clamp(30px,3.4vw,50px);line-height:1;color:#2230ff}
.dmet span{display:block;font-size:13px;color:#555;margin-top:6px;line-height:1.3}
.dcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:20px;align-items:start}
.dcols h4{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#77746d;margin:0 0 10px;font-weight:500}
.ddid{list-style:none;padding:0;margin:0}
.ddid li{position:relative;padding:11px 0 11px 28px;border-top:1px dashed #b9b5a8;font-size:15.5px;line-height:1.45;color:#2a2926}
.ddid li:first-child{border-top:0}
.ddid li::before{content:"✳";position:absolute;left:0;top:11px;color:#2230ff;font-size:15px}
.dpics{display:flex;flex-wrap:wrap;gap:20px 16px;justify-content:center;padding-top:6px}
.dpic{position:relative;margin:0;width:calc(50% - 12px);min-width:150px;background:#fbfaf6;padding:8px 8px 10px;box-shadow:0 .6rem 1.1rem rgba(0,0,0,.24);transform:rotate(var(--r,0deg));transition:transform .4s cubic-bezier(.2,.9,.25,1.3)}
.dpic:hover{transform:rotate(0) scale(1.04);z-index:3}
.dpic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:grayscale(.15)}
.dpic figcaption{font-family:var(--mono);font-size:10.5px;color:#333;padding-top:6px;line-height:1.25}
.dpics .bars{width:100%}
.bars{display:grid;gap:12px;width:100%;padding:10px 0}
.bar{display:grid;grid-template-columns:110px 1fr 56px;gap:10px;align-items:center;font-family:var(--mono);font-size:12.5px}
.bt{display:block;height:22px;background:#e6e2d6;position:relative}
.bt i{position:absolute;inset:0 auto 0 0;width:0;background:#2230ff;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.doc.on .bt i{width:var(--w)}
.bv{font-weight:600;text-align:right}

/* who am i (home) */
.whoami{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(30px,4vw,60px) 0}
.who-h{font-weight:700;letter-spacing:-.055em;line-height:.95;font-size:clamp(38px,5.6vw,88px);margin:12px 0 22px;text-transform:none}
.hl{position:relative;display:inline-block;color:#fff;z-index:0;padding:0 .12em}
.hl::before{content:"";position:absolute;inset:.08em -.02em .02em;background:#2230ff;transform:rotate(-1.4deg);z-index:-1}
.who-s{font-size:clamp(18px,1.7vw,24px);line-height:1.4;max-width:30em;margin:0 0 24px}
.who-s .u{background:linear-gradient(transparent 62%,#fbdfe7 62%)}
.squig{display:block;width:150px;color:#2230ff;margin-top:8px}
.likes{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.likes span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:8px 13px;background:#fff;box-shadow:0 .3rem .7rem rgba(0,0,0,.14);transform:rotate(var(--r,0deg))}
.likes span:nth-child(odd){--r:-1.2deg}.likes span:nth-child(even){--r:1.2deg}
.likes .svg-i{width:16px;height:16px}
.who-r{position:relative;min-height:420px;display:flex;justify-content:center}
.who-r .pol{--w:min(300px,70%)}.who-r .pol img{filter:none}
.note1{position:absolute;left:-4%;bottom:-2%;width:170px;transform:rotate(-5deg);font-size:13px;padding:22px 14px 14px;z-index:3}
.stampx{position:absolute;right:-2%;top:-2%;width:112px;height:112px;border:3px solid #b3321f;border-radius:50%;color:#b3321f;display:grid;place-items:center;text-align:center;font-family:var(--mono);font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.06em;transform:rotate(14deg);z-index:3;background:rgba(241,239,233,.7)}
.doodle-wrap{position:absolute;left:2%;top:-6%;width:90px;color:#2230ff;transform:rotate(-12deg)}.doodle{width:100%}

/* metrics board */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:10px}
.bcol{background:#f7f4ec;color:#161616;padding:22px 20px 14px;position:relative;box-shadow:0 .8rem 1.4rem rgba(0,0,0,.3);transform:rotate(var(--r,0deg))}
.bcol:nth-child(1){--r:-1.2deg}.bcol:nth-child(2){--r:.9deg}.bcol:nth-child(3){--r:-.7deg}.bcol:nth-child(4){--r:1.3deg}
.bcol::before{content:"";position:absolute;top:-10px;left:50%;width:84px;height:24px;margin-left:-42px;background:rgba(231,222,190,.85);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.bcol h3{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#77746d;margin:0 0 6px;font-weight:500}
.bcol h3 .svg-i{width:18px;height:18px;color:#2230ff}
.ms{padding:11px 0;border-top:1px dashed #b9b5a8}.ms:first-of-type{border-top:0}
.ms b{display:block;font-weight:700;letter-spacing:-.06em;font-size:clamp(28px,2.8vw,42px);line-height:1;color:#161616}
.ms span{display:block;font-size:13px;color:#555;margin-top:3px}
.boardfoot{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin-top:30px;align-items:stretch}
.term2{background:#0b0b0b;color:#b8f5c6;border-radius:10px;overflow:hidden;box-shadow:0 1rem 2rem rgba(0,0,0,.4)}
.term2 .th{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#1d1d1d;color:#9a9a9a;font-family:var(--mono);font-size:12px}
.term2 .th i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.term2 .th i:nth-child(2){background:#febc2e}.term2 .th i:nth-child(3){background:#28c840}.term2 .th span{margin-left:10px}
.term2 pre{margin:0;padding:16px 18px;font-family:var(--mono);font-size:13.5px;line-height:1.7;white-space:pre-wrap}
.cur2{animation:blink 1s steps(2) infinite}
.hirebox{background:#fff;color:#0b0b0b;padding:26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;justify-content:center;box-shadow:0 .8rem 1.4rem rgba(0,0,0,.25);transform:rotate(.8deg)}
.hirebox p{margin:0;font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.02em}
.hirebox .stampx{width:120px;height:120px;font-size:12.5px}
.hirebox .btn{background:#2230ff;border-color:#2230ff;color:#fff}.hirebox .btn:hover{background:#0b0b0b;border-color:#0b0b0b}
@media(max-width:1000px){.whoami,.boardfoot,.dcols{grid-template-columns:1fr}.board{grid-template-columns:1fr 1fr}.who-r{min-height:360px}}
@media(max-width:560px){.board{grid-template-columns:1fr}.bar{grid-template-columns:90px 1fr 50px}.dpic{width:100%}}

/* fixes: metric collisions, folder overlap, stamp text */
.dmet{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.dmet b{font-size:clamp(26px,2.5vw,38px);white-space:nowrap;letter-spacing:-.05em}
.desk .fold .ic{width:min(86%,128px)}
.desk .fold{min-width:0}
.hirebox .stampx{width:138px;height:138px;font-size:11px;letter-spacing:.03em;padding:8px}
.stampx{font-size:12px}

/* ===== setup blueprint ===== */
.bp{background:#0b0b0b;color:#f1efe9;padding:clamp(20px,3vw,36px);position:relative;border-radius:6px;box-shadow:0 1.2rem 2.4rem rgba(0,0,0,.35);background-image:linear-gradient(rgba(181,211,236,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(181,211,236,.07) 1px,transparent 1px);background-size:28px 28px}
.bprow{display:flex;align-items:center;gap:0}
.bpn{flex:1 1 0;min-width:0;border:1.5px solid rgba(241,239,233,.5);background:rgba(11,11,11,.85);padding:16px 14px;text-align:left;position:relative}
.bpn .bi{display:block;margin-bottom:10px;color:#b5d3ec}.bpn .svg-i{width:26px;height:26px}
.bpn b{display:block;font-weight:700;letter-spacing:-.035em;font-size:clamp(18px,1.7vw,26px);line-height:1}
.bpn small{display:block;font-family:var(--mono);font-size:11px;line-height:1.35;color:#a9b4bd;margin-top:6px}
.bpn.hot{border-color:#b5d3ec;box-shadow:0 0 0 4px rgba(181,211,236,.12)}
.bpn.done{background:#2230ff;border-color:#2230ff}.bpn.done small,.bpn.done .bi{color:#dfe4ff}
.bpcol{flex:1.1 1 0;display:grid;gap:12px}
.bpa{flex:0 0 34px;height:2px;position:relative;background:repeating-linear-gradient(90deg,#b5d3ec 0 6px,transparent 6px 10px);animation:flowx 1.2s linear infinite;background-size:10px 2px}
.bpa::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:2px solid #b5d3ec;border-right:2px solid #b5d3ec;transform:rotate(45deg)}
@keyframes flowx{to{background-position:10px 0}}
.bpg{margin-top:22px;border:1.5px dashed rgba(241,239,233,.45);padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-family:var(--mono);font-size:12px}
.bpg span{display:inline-flex;align-items:center;gap:8px;color:#b5d3ec;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.bpg span .ax{width:14px;height:14px}
.bpg em{font-style:normal;color:#e6e2d6}
.bpg em::before{content:"·";margin-right:10px;color:#b5d3ec}
.bp.compact .bpn small{display:none}
.techfeature{display:grid;grid-template-columns:1fr;gap:22px}
.sitecard{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,40px);align-items:center;background:#f7f4ec;color:#161616;padding:clamp(18px,2.4vw,30px);box-shadow:0 .9rem 1.6rem rgba(0,0,0,.28);transition:transform .35s cubic-bezier(.2,.9,.25,1.3)}
.sitecard:hover{transform:translateY(-5px) rotate(-.3deg)}
.sitecard h3{font-weight:700;letter-spacing:-.045em;font-size:clamp(28px,3.2vw,46px);line-height:1;margin:6px 0 10px;color:#161616;text-transform:none}
.sitecard p{margin:0 0 6px;font-size:16px;line-height:1.45;color:#2a2926}
.sitecard .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#2230ff}
.setupcard{display:grid;gap:18px}
.setupcard .row2{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:end;color:#f1efe9}
.setupcard h3{font-weight:700;letter-spacing:-.045em;font-size:clamp(28px,3.2vw,46px);line-height:1;margin:6px 0 8px;color:#fff;text-transform:none}
.setupcard p{margin:0;max-width:40em;color:#e6e2d6;font-size:16px}
.setupcard .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#b5d3ec}
.day{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.day>div{background:#f7f4ec;color:#161616;padding:22px;box-shadow:0 .6rem 1.2rem rgba(0,0,0,.18);transform:rotate(var(--r,0deg))}
.day>div:nth-child(odd){--r:-.7deg}.day>div:nth-child(even){--r:.7deg}
.day small{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#2230ff}
.day h3{font-weight:700;letter-spacing:-.04em;font-size:26px;line-height:1;margin:8px 0 8px;color:#161616;text-transform:none}
.day p{margin:0;font-size:15px;line-height:1.45;color:#2a2926}
@media(max-width:1000px){.bprow{flex-direction:column;align-items:stretch}.bpa{flex:0 0 28px;width:2px;height:28px;margin:0 auto;background:repeating-linear-gradient(180deg,#b5d3ec 0 6px,transparent 6px 10px);animation:none}.bpa::after{right:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}.sitecard{grid-template-columns:1fr}.bp.compact .bpn small{display:block}}
@media(prefers-reduced-motion:reduce){.bpa{animation:none}}
.boardfoot.one{grid-template-columns:1fr}.boardfoot.one .term2{max-width:760px}
.boardfoot.one{grid-template-columns:1fr}.boardfoot.one .term2{max-width:760px}