*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--ink:#0e0e0d;--ink-mid:#3a3935;--ink-soft:#7a7870;--ink-faint:#b8b6ae;--paper:#f5f4f0;--paper-warm:#eeecea;--rule:#0e0e0d1f;--rule-strong:#0e0e0d40;--font-display:"DM Serif Display", Georgia, serif;--font-body:"DM Sans", sans-serif;--font-mono:"DM Mono", monospace;--max-w:1100px;--pad-x:clamp(1.5rem, 5vw, 4rem);--nav-h:64px;--ease-out:cubic-bezier(.16, 1, .3, 1)}html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}body{font-family:var(--font-body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.65;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:9999;opacity:.6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");position:fixed;inset:0}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--paper)}::-webkit-scrollbar-thumb{background:var(--ink-faint)}nav{height:var(--nav-h);z-index:200;-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--rule);background:#f5f4f0ed;position:fixed;top:0;left:0;right:0}.nav-inner{max-width:var(--max-w);padding:0 var(--pad-x);justify-content:space-between;align-items:center;height:100%;margin:0 auto;display:flex}.nav-logo{font-family:var(--font-display);color:var(--ink);letter-spacing:-.01em;z-index:201;font-size:1.2rem;text-decoration:none;position:relative}.nav-links{align-items:center;gap:2.5rem;list-style:none;display:flex}.nav-links a{font-family:var(--font-mono);color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:400;text-decoration:none;transition:color .2s;position:relative}.nav-links a:after{content:"";background:var(--ink);width:0;height:1px;transition:width .3s var(--ease-out);position:absolute;bottom:-2px;left:0}.nav-links a:hover{color:var(--ink)}.nav-links a:hover:after{width:100%}@media (width<=768px){.nav-links{display:none}}.wrap{max-width:var(--max-w);padding:0 var(--pad-x);margin:0 auto}#hero{min-height:100vh;padding-top:var(--nav-h);grid-template-rows:1fr auto;display:grid}.hero-main{flex-direction:column;justify-content:center;padding:6rem 0 4rem;display:flex}.hero-eyebrow{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);opacity:0;animation:rise .8s var(--ease-out) .1s forwards;align-items:center;gap:1rem;margin-bottom:2rem;font-size:.72rem;display:flex}.hero-eyebrow:before{content:"";background:var(--ink-faint);width:40px;height:1px;display:block}.hero-headline{font-family:var(--font-display);letter-spacing:-.03em;color:var(--ink);opacity:0;animation:rise .9s var(--ease-out) .2s forwards;margin-bottom:1rem;font-size:clamp(3.2rem,8vw,7.5rem);line-height:1}.hero-headline em{color:var(--ink-mid);font-style:italic}.hero-sub{color:var(--ink-soft);opacity:0;max-width:500px;animation:rise .9s var(--ease-out) .35s forwards;margin-bottom:3.5rem;font-size:clamp(1rem,2vw,1.2rem);font-weight:300;line-height:1.7}.hero-cta{opacity:0;animation:rise .9s var(--ease-out) .45s forwards;flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.btn-primary{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:.85rem 2rem;font-size:.75rem;text-decoration:none;transition:all .25s}.btn-primary:hover{color:var(--ink);background:0 0}.btn-ghost{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--rule-strong);background:0 0;padding:.85rem 2rem;font-size:.75rem;text-decoration:none;transition:all .25s}.btn-ghost:hover{color:var(--ink);border-color:var(--ink)}.hero-rule{border:none;border-top:1px solid var(--rule);opacity:0;animation:rise .9s var(--ease-out) .6s forwards}.hero-bottom{opacity:0;animation:rise .9s var(--ease-out) .7s forwards;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem 2.5rem;padding:1.5rem 0;display:flex}.hero-bottom-left{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;font-size:.68rem}.hero-scroll{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:.6rem;font-size:.68rem;display:flex}.scroll-dot{border:1px solid var(--ink-faint);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}section{border-top:1px solid var(--rule);padding:7rem 0}.section-header{align-items:baseline;gap:1.5rem;margin-bottom:5rem;display:flex}.section-num{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.1em;font-size:.68rem}.section-title{font-family:var(--font-display);color:var(--ink);letter-spacing:-.02em;font-size:clamp(2rem,4vw,3rem);line-height:1}.about-grid{grid-template-columns:1fr 1fr;align-items:start;gap:6rem;display:grid}.about-body p{color:var(--ink-mid);margin-bottom:1.5rem;font-size:1.1rem;font-weight:300;line-height:1.85}.about-body p:last-child{margin-bottom:0}.about-body strong{color:var(--ink);font-weight:500}.sidebar-block{border-top:1px solid var(--rule);padding:1.5rem 0}.sidebar-block:last-child{border-bottom:1px solid var(--rule)}.sidebar-label{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5rem;font-size:.65rem}.sidebar-value{color:var(--ink-mid);font-size:.95rem}.tech-outer{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000);mask-image:linear-gradient(90deg,#0000,#000 6% 94%,#0000)}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-33.3334%)}}.tech-track{will-change:transform;backface-visibility:hidden;width:fit-content;animation:45s linear infinite marquee;display:flex}.tech-track:hover{animation-play-state:paused}.tech-item{border-right:1px solid var(--rule);white-space:nowrap;cursor:default;flex-shrink:0;align-items:center;gap:.75rem;padding:1rem 1.8rem;transition:background .2s;display:flex}.tech-item:hover{background:var(--paper-warm)}.tech-icon{opacity:.8;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.tech-icon svg{width:100%;height:100%;display:block}.tech-label{font-family:var(--font-mono);color:var(--ink-soft);letter-spacing:.04em;font-size:.78rem}.tech-toggle{align-items:center;gap:.5rem;margin-left:auto;display:flex}.tech-toggle-btn{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rule-strong);color:var(--ink-soft);cursor:pointer;background:0 0;padding:.4rem .85rem;font-size:.65rem;transition:all .2s}.tech-toggle-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.tech-toggle-btn:hover:not(.active){color:var(--ink);border-color:var(--ink)}.tech-list-view{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:none}.tech-list-view.active{display:block}.tech-outer.hidden{display:none}.tech-category{border-bottom:1px solid var(--rule);grid-template-columns:180px 1fr;align-items:baseline;gap:2rem;padding:1.4rem 0;display:grid}.tech-category:last-child{border-bottom:none}.tech-category-label{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-size:.65rem}.tech-category-items{flex-wrap:wrap;gap:.5rem;display:flex}.tech-pill{font-family:var(--font-mono);color:var(--ink-soft);letter-spacing:.04em;border:1px solid var(--rule);background:var(--paper);align-items:center;gap:.5rem;padding:.35rem .8rem;font-size:.72rem;transition:all .2s;display:flex}.tech-pill:hover{background:var(--paper-warm);border-color:var(--rule-strong);color:var(--ink)}.tech-pill .tech-icon{width:14px;height:14px}@media (width<=600px){.tech-category{grid-template-columns:1fr;gap:.75rem}}.projects-list{flex-direction:column;display:flex}.project-row{border-bottom:1px solid var(--rule);color:inherit;cursor:pointer;grid-template-columns:3fr 1fr auto;align-items:center;gap:2rem;padding:2.5rem 0;text-decoration:none;display:grid;position:relative}.project-row:first-child{border-top:1px solid var(--rule)}.project-row:before{content:"";inset:0 calc(-1 * var(--pad-x));background:var(--paper-warm);opacity:0;z-index:0;transition:opacity .2s;position:absolute}.project-row:hover:before{opacity:1}.project-row>*{z-index:1;position:relative}.project-meta{align-items:center;gap:1rem;margin-bottom:.6rem;display:flex}.project-num{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.1em;font-size:.62rem}.project-live{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid #0e0e0d26;padding:.25rem .6rem;font-size:.6rem}.project-name{font-family:var(--font-display);color:var(--ink);letter-spacing:-.02em;margin-bottom:.5rem;font-size:clamp(1.4rem,3vw,2rem);line-height:1.1}.project-desc{color:var(--ink-soft);max-width:480px;font-size:.9rem;font-weight:300;line-height:1.6}.project-tags{flex-wrap:wrap;gap:.4rem;margin-top:.8rem;display:flex}.tag{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.06em;font-size:.62rem}.tag:not(:last-child):after{content:"·";margin-left:.4rem}.project-middle{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.06em;text-align:right;font-size:.7rem}.project-arrow{border:1px solid var(--rule-strong);width:36px;height:36px;color:var(--ink-soft);transition:all .25s var(--ease-out);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.project-row:hover .project-arrow{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:rotate(45deg)}.project-arrow svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:14px;height:14px}.project-coming{opacity:.4;cursor:default}.project-coming:before,.project-coming .project-arrow{display:none}#contact{background:var(--ink);color:var(--paper);border-top:none;padding:7rem 0 4rem}.contact-eyebrow{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.5rem;font-size:.68rem}.contact-headline{font-family:var(--font-display);letter-spacing:-.03em;color:var(--paper);max-width:700px;margin-bottom:5rem;font-size:clamp(2.5rem,6vw,5.5rem);line-height:1.05}.contact-headline em{color:var(--ink-faint);font-style:italic}.contact-links{border-top:1px solid #f5f4f01a;grid-template-columns:repeat(3,1fr);display:grid}.contact-link{color:var(--paper);border-right:1px solid #f5f4f01a;flex-direction:column;gap:.4rem;padding:2rem 0;text-decoration:none;transition:background .2s;display:flex}.contact-link:nth-child(2){padding-left:2rem}.contact-link:last-child{border-right:none;padding-left:2rem}.contact-link:hover{background:#f5f4f00a}.contact-link-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-size:.62rem}.contact-link-value{color:#f5f4f0b3;align-items:center;gap:.5rem;font-size:.95rem;font-weight:300;display:flex}.contact-link-value svg{stroke:currentColor;fill:none;stroke-width:1.5px;opacity:.5;width:12px;height:12px}.footer-bottom{border-top:1px solid #f5f4f01a;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:3rem;display:flex}.footer-copy{font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.06em;font-size:.65rem}.footer-credit{font-family:var(--font-mono);color:#f5f4f033;letter-spacing:.06em;font-size:.65rem}@keyframes rise{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.reveal{opacity:0;transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);transform:translateY(24px)}.reveal.visible{opacity:1;transform:translateY(0)}@media (width<=768px){.about-grid{grid-template-columns:1fr;gap:3rem}.project-row{grid-template-columns:1fr auto}.project-middle{display:none}.contact-links{grid-template-columns:1fr}.contact-link:nth-child(2),.contact-link:last-child{padding-left:0}.contact-link{border-bottom:1px solid #f5f4f01a;border-right:none}.footer-bottom{text-align:center;flex-direction:column;gap:.5rem}.section-header{margin-bottom:3rem}section{padding:5rem 0}}@media (width<=480px){.hero-main{padding:4rem 0 3rem}}
