@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap";
:root{--paper-beige:#f5f1e8;--ink-black:#1a1a1a;--accent-color:#d4735d;--light-gray:#9e9e9e;--shadow-color:#0000001a;--font-handwritten:"Caveat",cursive;--font-body:"Inter",sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--paper-beige);color:var(--ink-black);position:relative;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:1;opacity:.8;background-image:repeating-linear-gradient(0deg,#0000,#0000 2px,#00000008 2px 4px),repeating-linear-gradient(90deg,#0000,#0000 2px,#00000008 2px 4px),radial-gradient(circle at 20%,#00000005 1px,#0000 1px),radial-gradient(circle at 80% 80%,#00000005 1px,#0000 1px),radial-gradient(circle at 40% 20%,#00000005 1px,#0000 1px);background-size:100% 100%,100% 100%,50px 50px,60px 60px,70px 70px;width:100%;height:100%;position:fixed;top:0;left:0}body:after{content:"";pointer-events:none;z-index:2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");width:200%;height:200%;animation:8s steps(10,end) infinite grain;position:fixed;top:-50%;left:-50%}@keyframes grain{0%,to{transform:translate(0)}10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}50%{transform:translate(-15%,10%)}60%{transform:translate(15%)}70%{transform:translateY(15%)}80%{transform:translate(3%,35%)}90%{transform:translate(-10%,10%)}}.portfolio-container{z-index:10;max-width:100%;min-height:100vh;margin:0 auto;position:relative}.animate-on-scroll{opacity:0;transition:opacity .8s cubic-bezier(.33,1,.68,1),transform .8s cubic-bezier(.33,1,.68,1);transform:translateY(30px)rotate(.5deg)}.animate-on-scroll.visible{opacity:1;animation:.6s ease-out .3s paperRustle;transform:translateY(0)rotate(0)}@keyframes paperRustle{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-2px)rotate(-.3deg)}50%{transform:translateY(0)rotate(.3deg)}75%{transform:translateY(-1px)rotate(-.2deg)}}.sketch-text{font-family:var(--font-handwritten);font-weight:600;display:inline-block;position:relative}.sketch-underline{display:inline-block;position:relative}.sketch-underline:after{content:"";background-image:url("data:image/svg+xml,%3Csvg width='100' height='8' viewBox='0 0 100 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 Q25 1, 50 4 T100 4' stroke='%23d4735d' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:100px 8px;height:8px;animation:1.5s ease-out forwards drawUnderline;position:absolute;bottom:-5px;left:-5px;right:-5px}@keyframes drawUnderline{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}.doodle{pointer-events:none;opacity:.6;position:absolute}.stamp-button{font-family:var(--font-handwritten);border:3px solid var(--ink-black);color:var(--ink-black);cursor:pointer;text-transform:uppercase;letter-spacing:1px;background:0 0;padding:12px 28px;font-size:1.1rem;font-weight:600;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);position:relative;box-shadow:4px 4px #0000001a}.stamp-button:before{content:"";border:2px dashed var(--ink-black);opacity:0;transition:opacity .3s;position:absolute;inset:-3px}.stamp-button:hover{transform:translate(-2px,-2px)rotate(-1deg);box-shadow:6px 6px #00000026}.stamp-button:hover:before{opacity:.3}.stamp-button:active{transform:translate(2px,2px)rotate(1deg);box-shadow:2px 2px #0000001a}.polaroid-frame{background:#fff;padding:12px 12px 45px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;transform:rotate(0);box-shadow:0 4px 6px #0000001a,0 1px 3px #00000014}.polaroid-frame:before{content:"";pointer-events:none;border:1px solid #0000000d;position:absolute;inset:0}.polaroid-frame:hover{transform:rotate(0)translateY(-8px)scale(1.02);box-shadow:0 12px 20px #00000026,0 4px 8px #0000001a}.pencil-highlight{position:relative;overflow:hidden}.pencil-highlight:after{content:"";border:3px solid var(--ink-black);opacity:0;pointer-events:none;background:0 0;border-radius:2px;transition:opacity .3s;animation:.6s ease-out forwards paused pencilDraw;position:absolute;inset:-4px;transform:rotate(-.5deg)}.pencil-highlight:hover:after{opacity:1;animation-play-state:running}@keyframes pencilDraw{0%{clip-path:polygon(0 0,0 0,0 100%,0 100%)}25%{clip-path:polygon(0 0,100% 0,100% 0,0 0)}50%{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%)}75%{clip-path:polygon(100% 100%,100% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}.ink-stroke{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}.ink-stroke svg{width:100%;height:100%}.ink-stroke path{stroke:var(--ink-black);stroke-width:2px;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.3}.paper-shadow{box-shadow:2px 2px #0000000d,4px 4px #00000008,6px 6px #00000005}@keyframes stopMotionSlide{0%{opacity:0;transform:translate(-100%)rotate(-2deg)}10%{opacity:.1;transform:translate(-90%)rotate(-1.8deg)}20%{opacity:.2;transform:translate(-80%)rotate(-1.5deg)}30%{opacity:.3;transform:translate(-70%)rotate(-1.2deg)}40%{opacity:.4;transform:translate(-60%)rotate(-1deg)}50%{opacity:.5;transform:translate(-50%)rotate(-.8deg)}60%{opacity:.6;transform:translate(-40%)rotate(-.5deg)}70%{opacity:.7;transform:translate(-30%)rotate(-.3deg)}80%{opacity:.8;transform:translate(-20%)rotate(-.2deg)}90%{opacity:.9;transform:translate(-10%)rotate(-.1deg)}to{opacity:1;transform:translate(0)rotate(0)}}@keyframes erase{0%{clip-path:inset(0);opacity:1}to{clip-path:inset(0 100% 0 0);opacity:0}}@keyframes drawIn{0%{stroke-dashoffset:1000px;opacity:0}to{stroke-dashoffset:0;opacity:1}}.animated-path{stroke-dasharray:1000;stroke-dashoffset:1000px;animation:2s ease-out forwards drawIn}section{max-width:1600px;margin:0 auto 60px;padding:120px 8%;position:relative;overflow:visible}@media (min-width:1400px){section{padding:120px 10%}}section:before{content:"";pointer-events:none;filter:drop-shadow(0 1px 2px #0000000d);background-image:linear-gradient(90deg,#0000 0% 2%,#00000008 2% 4%,#0000 4% 6%,#00000005 6% 7%,#0000 7% 10%,#0000000a 10% 11%,#0000 11% 15%);background-repeat:repeat-x;background-size:100px 100%;height:10px;position:absolute;top:-5px;left:0;right:0}section:nth-child(2n){background:#ffffff4d;box-shadow:inset 0 0 100px #00000005}section:nth-child(odd){background:#f5f1e880;box-shadow:inset 0 0 100px #00000004}section{background-blend-mode:multiply,multiply,screen,screen;background-image:radial-gradient(at 20% 30%,#00000003 0%,#0000 50%),radial-gradient(at 80% 70%,#00000003 0%,#0000 50%),radial-gradient(at 40% 80%,#ffffff05 0%,#0000 40%),radial-gradient(at 70% 20%,#ffffff05 0%,#0000 40%)}section:after{content:"";pointer-events:none;border-top:0 solid #0000;border-bottom:50px solid #00000008;border-left:50px solid #0000;border-right:0 solid #0000;width:0;height:0;transition:border-width .3s;position:absolute;bottom:0;right:0}section:hover:after{border-width:0 0 60px 60px}h1{font-family:var(--font-handwritten);margin-bottom:1rem;font-size:clamp(3rem,8vw,7rem);font-weight:700;line-height:1.1}h2{font-family:var(--font-handwritten);margin-bottom:2rem;font-size:clamp(2.5rem,6vw,5rem);font-weight:600;line-height:1.2}h3{font-family:var(--font-handwritten);font-size:clamp(1.8rem,4vw,3rem);font-weight:600;line-height:1.3}p{font-family:var(--font-body);color:var(--ink-black);font-size:clamp(1rem,2vw,1.1rem);font-weight:400;line-height:1.7}@media (max-width:768px){section{margin:0 auto 40px;padding:80px 20px}h2{font-size:clamp(2rem,7vw,3.5rem)}h3{font-size:clamp(1.5rem,5vw,2.2rem)}p{font-size:clamp(.95rem,2.5vw,1.05rem)}.stamp-button{padding:11px 22px;font-size:.95rem}section:after{border-width:0 0 30px 30px}}html{scroll-padding-top:100px}::selection{background:var(--accent-color);color:#fff}a{color:inherit;text-decoration:none;position:relative}a:hover{color:var(--accent-color)}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--paper-beige)}::-webkit-scrollbar-thumb{background:var(--light-gray);border:2px solid var(--paper-beige);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--ink-black)}.accent-color{color:var(--accent-color)}.ink-black{color:var(--ink-black)}.text-center{text-align:center}.container{max-width:1200px;margin:0 auto;padding:0 20px}