:root{--bg-primary:#1a1a2e;--bg-secondary:#16213e;--accent-yellow:#f5c518;--accent-gold:#e6a817;--text-primary:#fff;--text-secondary:#ccc;--red-pop:#e63946}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:Bebas Neue,sans-serif;overflow:hidden}#hero,#about,#projects,#skills,#contact{width:100vw;height:100vh;position:fixed;top:0;left:0}#start-screen{background:var(--accent-yellow);z-index:100;cursor:pointer;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}#press-start{color:var(--red-pop);letter-spacing:.05em;z-index:2;font-size:clamp(3rem,6vw,7rem);animation:1s ease-in-out infinite blink;transform:skew(-5deg)}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.start-star{color:#fff;z-index:1;font-size:clamp(1.5rem,2.5vw,3rem);animation:2s ease-in-out infinite starPulse;position:absolute}.star-1{font-size:clamp(1rem,1.5vw,2rem);animation-delay:0s;top:10%;left:10%}.star-2{font-size:clamp(2rem,3.5vw,4rem);animation-delay:.5s;top:15%;right:15%}.star-3{font-size:clamp(.8rem,1.2vw,1.5rem);animation-delay:1s;bottom:25%;left:20%}.star-4{font-size:clamp(1.2rem,2vw,2.5rem);animation-delay:.3s;top:40%;right:8%}@keyframes starPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}.start-banner{background:var(--red-pop);z-index:2;width:100%;padding:8px 0;position:absolute;bottom:8%;left:0;overflow:hidden;transform:skewY(-2deg)}.start-banner span{white-space:nowrap;color:#fff;letter-spacing:.2em;font-size:1rem;animation:20s linear infinite marquee;display:inline-block}@keyframes marquee{0%{transform:translate(100vw)}to{transform:translate(-100%)}}.start-banner-top{animation:none;top:8%;bottom:auto;transform:skewY(9deg)}.start-banner-top span{animation:20s linear infinite marqueeReverse}@keyframes marqueeReverse{0%{transform:translate(-100%)}to{transform:translate(100vw)}}#too-small{background:var(--accent-yellow);z-index:200;visibility:hidden;opacity:0;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0;overflow:hidden}#too-small.visible{visibility:visible;opacity:1}.ts-content{text-align:center;z-index:2;flex-direction:column;justify-content:center;align-items:center;display:flex;transform:skew(-3deg)}.ts-sub{letter-spacing:.4em;color:var(--bg-primary);background:var(--red-pop);margin-bottom:1rem;padding:2px 14px;font-size:1rem;display:inline-block}.ts-title{color:var(--red-pop);letter-spacing:.03em;margin-bottom:1.5rem;font-size:clamp(5rem,20vw,8rem);line-height:.85}.ts-msg{color:var(--bg-primary);letter-spacing:.05em;margin-bottom:.8rem;font-family:Barlow Condensed,sans-serif;font-size:1rem;font-style:italic;line-height:1.6}.ts-req{letter-spacing:.2em;color:var(--bg-primary);opacity:.7;font-size:.8rem}.ts-req span{color:var(--red-pop);font-style:italic}.ts-banner{background:var(--red-pop);z-index:2;width:100%;padding:8px 0;position:absolute;left:0;overflow:hidden}.ts-banner-top{top:8%;transform:skewY(2deg)}.ts-banner-bottom{bottom:8%;transform:skewY(-2deg)}.ts-banner span{white-space:nowrap;color:#fff;letter-spacing:.2em;font-size:1rem;display:inline-block}.ts-banner-top span{animation:18s linear infinite marquee}.ts-banner-bottom span{animation:18s linear infinite marqueeReverse}#hero{z-index:5;justify-content:space-between;align-items:center;padding:0 8%;display:flex;overflow:hidden}#hero-text,#menu{z-index:1;position:relative}#menu ul{list-style:none}#menu ul li:hover{color:var(--accent-yellow)}#menu ul li{letter-spacing:.1em;color:var(--text-secondary);cursor:pointer;align-items:center;margin-bottom:.5rem;font-size:clamp(1.5rem,2vw,4rem);transition:color .2s;display:flex}#menu ul li.active:after{content:"◀";margin-left:clamp(10px,1.5vw,20px);font-size:clamp(.9rem,1.2vw,1.5rem)}#handle{color:var(--bg-primary);background:var(--accent-yellow);letter-spacing:.3em;margin-bottom:.5rem;padding:2px 10px;font-size:.85rem;display:inline-block}#name{color:var(--text-primary);text-align:right;font-size:clamp(4rem,6.5vw,12rem);line-height:.9}#tagline{color:var(--text-secondary);letter-spacing:.2em;text-align:right;margin-top:1rem;font-size:1rem}.geo{z-index:0;position:absolute}.geo-1{border:3px solid var(--accent-yellow);opacity:.15;width:clamp(150px,20vw,300px);height:clamp(150px,20vw,300px);top:clamp(-60px,-5vw,-30px);left:30%}.geo-2{border:2px solid var(--accent-yellow);opacity:.08;width:clamp(300px,40vw,600px);height:clamp(300px,40vw,600px);bottom:clamp(-150px,-13vw,-80px);left:40%}.geo-3{background:var(--accent-yellow);opacity:.8;width:4px;height:120%;top:0;left:50%;transform:rotate(5deg)}#controls{color:var(--text-secondary);letter-spacing:.15em;z-index:1;flex-direction:column;align-items:flex-end;gap:.4rem;font-size:.75rem;display:flex;position:absolute;bottom:2rem;right:3rem}.key{border:1px solid var(--accent-yellow);color:var(--accent-yellow);letter-spacing:0;border-radius:50%;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;font-size:.7rem;font-weight:700;line-height:1;display:inline-flex}#character{z-index:2;opacity:.15;position:fixed;bottom:0;left:50%}#character img{filter:brightness(0)drop-shadow(0 0 2px #fff)drop-shadow(0 0 2px #fff);z-index:0;height:110vh;transform:rotate(186deg)}#wave{opacity:1;z-index:0;width:100%;height:clamp(200px,28vh,400px);position:absolute;top:0;left:0}#wave2{opacity:.5;z-index:0;width:100%;height:clamp(125px,18vh,250px);position:absolute;top:0;left:0}#about{visibility:hidden;opacity:0;z-index:4;padding:4% 8%;overflow:hidden}#about-divider{background:var(--accent-yellow);opacity:.15;z-index:0;width:120%;height:clamp(20px,3vh,40px);position:absolute;top:45%;left:-10%;transform:rotate(-20deg)}#about-header{z-index:2;position:relative}#about-header-bar{clip-path:polygon(0% 0%,100% 0%,92% 100%,0% 100%);background:#000;margin-bottom:1.5rem;padding:.5rem 2rem;display:inline-block}#about-header h2{color:var(--text-primary);letter-spacing:.1em;border:none;margin:0;padding:0;font-size:clamp(2.5rem,4vw,8rem)}#about-content{z-index:2;flex:1;display:flex;position:relative}#about-left{flex-direction:column;gap:1.2rem;width:38%;display:flex}#about-meta{flex-direction:column;gap:.3rem;display:flex}.meta-small{color:var(--text-secondary);letter-spacing:.2em;font-size:.8rem}.meta-stat{align-items:baseline;gap:1rem;display:flex}.meta-label{background:var(--accent-yellow);color:var(--bg-primary);letter-spacing:.3em;padding:2px 8px;font-size:.75rem}.meta-value{color:var(--text-primary);font-size:clamp(3rem,5vw,10rem);line-height:1}.meta-stars{gap:.2rem;display:flex}.star.filled{color:var(--accent-yellow);font-size:clamp(.8rem,1vw,1.2rem)}.star.empty{color:var(--text-secondary);opacity:.4;font-size:clamp(.8rem,1vw,1.2rem)}#about-bio{color:var(--text-primary);letter-spacing:.03em;font-family:Barlow Condensed,sans-serif;font-size:1rem;font-style:italic;line-height:1.7}#about-list{flex-direction:column;gap:.3rem;display:flex}.list-label{color:var(--accent-yellow);letter-spacing:.3em;margin-bottom:.3rem;font-size:.75rem;font-style:italic;display:block}.list-item{letter-spacing:.1em;background:var(--bg-secondary);color:var(--text-secondary);border-left:3px solid #0000;width:clamp(180px,17vw,250px);padding:6px 14px;font-family:Barlow Condensed,sans-serif;font-size:.95rem}.list-item.active-item{color:var(--bg-primary);border-left:3px solid var(--red-pop);background:#fff}#about-links a{color:var(--bg-primary);background:var(--accent-yellow);letter-spacing:.2em;padding:6px 20px;font-size:1rem;text-decoration:none;transition:background .2s;display:inline-block}#about-links a:hover{background:var(--accent-gold)}.card-label{color:var(--accent-yellow);letter-spacing:.3em;margin-bottom:.3rem;font-size:.75rem;display:block}#about-info-card{background:var(--bg-secondary);clip-path:polygon(30px 0%,100% 0%,100% 100%,0% 100%);z-index:2;border-top:3px solid var(--accent-yellow);min-width:clamp(300px,31vw,450px);padding:1.5rem 3rem;position:fixed;bottom:2rem;right:2rem}#about-info-card h3{color:var(--accent-yellow);margin-bottom:.3rem;font-size:clamp(2rem,3vw,6rem);font-style:italic}#about-info-card p{color:var(--text-secondary);letter-spacing:.1em;z-index:2;margin-bottom:.2rem;font-family:Barlow Condensed,sans-serif;font-size:.9rem}#about-photos{z-index:1;width:clamp(250px,30vw,900px);height:clamp(320px,40vw,1100px);position:absolute;top:10%;right:5%}.photo-box{background:var(--bg-secondary);z-index:1;will-change:transform;border:2px solid #f5c5184d;position:absolute;overflow:hidden;transform:translateZ(0)}.photo-box img{object-fit:cover;width:100%;height:100%}.box-1{width:45%;height:28%;top:2%;right:50%;transform:rotate(2deg)}.box-2{width:42.5%;height:26%;top:12%;right:0%;transform:rotate(-3deg)}.box-3{z-index:1;width:55%;height:34%;top:46%;right:2.5%;transform:rotate(12deg)}.box-4{z-index:1;width:37.5%;height:40%;top:36%;right:70%;transform:rotate(-1deg)}#about-controls{color:var(--text-secondary);letter-spacing:.15em;z-index:3;flex-direction:column;align-items:flex-end;gap:.4rem;font-size:1rem;display:flex;position:absolute;top:2rem;right:2rem}.key-wide{border:1px solid var(--accent-yellow);color:var(--accent-yellow);letter-spacing:0;vertical-align:middle;border-radius:4px;justify-content:center;align-items:center;padding:1px 6px;font-family:Arial,sans-serif;font-size:.6rem;font-weight:700;line-height:1;display:inline-flex}#projects{visibility:hidden;opacity:0;z-index:4;align-items:stretch;padding:0;display:flex;overflow:hidden}#projects-list{border-right:2px solid #ffffff26;flex-direction:column;flex-shrink:0;width:42%;height:100vh;display:flex;overflow:hidden}#projects-list-header{border-bottom:1px solid #f5c51826;flex-shrink:0;padding:clamp(1.2rem,3vh,2.5rem) clamp(1rem,4%,3rem)}#projects-title-bar{clip-path:polygon(0% 0%,100% 0%,92% 100%,0% 100%);background:#000;margin-bottom:.4rem;padding:.4rem 1.8rem;display:inline-block}#projects-title-bar h2{color:var(--text-primary);letter-spacing:.1em;margin:0;font-size:clamp(2rem,3.5vw,5rem)}#projects-subtitle{color:var(--accent-yellow);letter-spacing:.35em;font-size:clamp(.6rem,.7vw,.8rem);font-style:italic}.project-row{cursor:pointer;border-bottom:1px solid #ffffff0a;align-items:stretch;height:clamp(64px,9vh,100px);transition:background .15s;display:flex;position:relative;overflow:hidden}.project-row:before{content:"";background:var(--row-color);opacity:0;transition:opacity .15s;position:absolute;inset:0}.project-row:hover:before,.project-row.active:before{opacity:.07}.project-row.active{border-left:3px solid var(--red-pop)}.project-row.wip{opacity:.55;pointer-events:none;border-left:2px dashed #666}.project-row.wip .row-number{opacity:.4;text-decoration:line-through}.row-label{background:var(--row-color);clip-path:polygon(0% 0%,80% 0%,100% 100%,0% 100%);z-index:1;color:#000000d9;letter-spacing:.08em;writing-mode:vertical-rl;text-orientation:mixed;flex-shrink:0;justify-content:center;align-items:center;width:clamp(48px,5vw,72px);padding-bottom:6px;font-size:clamp(.45rem,.55vw,.65rem);font-weight:900;display:flex;position:relative;transform:rotate(180deg)}.row-inner{z-index:1;flex:1;align-items:center;gap:clamp(.6rem,1.5vw,1.4rem);padding:0 clamp(.8rem,2vw,1.8rem);display:flex;position:relative}.row-number{color:var(--row-color);opacity:.25;flex-shrink:0;font-size:clamp(1.8rem,2.8vw,4rem);font-style:italic;line-height:1}.project-row.active .row-number{opacity:.6}.row-meta{flex-direction:column;flex:1;gap:.25rem;display:flex}.row-name{color:var(--text-secondary);letter-spacing:.08em;font-size:clamp(1rem,1.4vw,1.8rem);line-height:1}.project-row.active .row-name{color:var(--text-primary)}.row-tags{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.row-tag{color:var(--row-color);border:1px solid var(--row-color);letter-spacing:.15em;opacity:.8;background:#0000004d;padding:1px 6px;font-family:Barlow Condensed,sans-serif;font-size:clamp(.55rem,.65vw,.75rem)}.row-year{color:var(--text-secondary);letter-spacing:.2em;opacity:.5;margin-left:auto;padding-right:.5rem;font-family:Barlow Condensed,sans-serif;font-size:clamp(.55rem,.65vw,.75rem)}.row-arrow{color:var(--row-color);opacity:0;flex-shrink:0;font-size:clamp(.7rem,.9vw,1.1rem);transition:opacity .15s}.project-row.active .row-arrow{opacity:1}#projects-detail{flex-direction:column;flex:1;gap:clamp(1rem,2vh,2rem);height:100vh;padding:clamp(1.5rem,3vh,3rem) clamp(1.5rem,3vw,4rem);display:flex;position:relative}#project-preview-wrap{flex:1;min-height:0;position:relative}#project-preview{background:var(--bg-secondary);clip-path:polygon(0% 0%,calc(100% - 20px) 0%,100% 20px,100% 100%,20px 100%,0% calc(100% - 20px));border:1px solid #f5c51833;width:100%;height:100%;position:relative;overflow:hidden}#project-preview-placeholder{justify-content:center;align-items:center;width:100%;height:100%;display:flex}#project-preview-placeholder span{color:var(--text-secondary);opacity:.2;letter-spacing:.4em;font-size:clamp(1rem,2vw,2rem)}#project-preview-img{object-fit:contain;width:100%;height:100%}#preview-corner-tl,#preview-corner-br{border-color:var(--accent-yellow);opacity:.6;border-style:solid;width:clamp(16px,2vw,28px);height:clamp(16px,2vw,28px);position:absolute}#preview-corner-tl{border-width:2px 0 0 2px;top:.5rem;left:.5rem}#preview-corner-br{border-width:0 2px 2px 0;bottom:.5rem;right:.5rem}#project-info-panel{background:var(--bg-secondary);border-top:3px solid var(--accent-yellow);clip-path:polygon(20px 0%,100% 0%,100% 100%,0% 100%);flex-shrink:0;justify-content:space-between;align-items:flex-end;gap:1.5rem;padding:clamp(.8rem,1.5vh,1.4rem) clamp(1.2rem,2.5vw,2.5rem);display:flex}#project-info-top{flex:1;min-width:0}#project-info-label{color:var(--accent-yellow);letter-spacing:.35em;margin-bottom:.2rem;font-size:clamp(.6rem,.7vw,.8rem);display:block}#project-info-name{color:var(--accent-yellow);white-space:nowrap;text-overflow:ellipsis;margin-bottom:.4rem;font-size:clamp(1.6rem,2.5vw,4rem);font-style:italic;line-height:1;overflow:hidden}#project-info-desc{color:var(--text-secondary);letter-spacing:.05em;max-width:55ch;font-family:Barlow Condensed,sans-serif;font-size:clamp(.75rem,.85vw,1rem);line-height:1.5}#project-info-bottom{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:.6rem;display:flex}#project-stack-list{flex-wrap:wrap;justify-content:flex-end;gap:.3rem;display:flex}.stack-tag{color:var(--text-primary);letter-spacing:.15em;background:#f5c5181f;border:1px solid #f5c51859;padding:2px 8px;font-family:Barlow Condensed,sans-serif;font-size:clamp(.6rem,.7vw,.8rem)}#project-links{gap:.6rem;display:flex}.proj-link{color:var(--bg-primary);background:var(--accent-yellow);letter-spacing:.2em;padding:4px 16px;font-size:clamp(.7rem,.8vw,.9rem);text-decoration:none;transition:background .2s;display:inline-block}.proj-link:hover{background:var(--accent-gold)}#projects-controls{color:var(--text-secondary);letter-spacing:.15em;z-index:3;flex-direction:column;align-items:flex-start;gap:.35rem;font-size:clamp(.6rem,.7vw,.8rem);display:flex;position:absolute;bottom:1.5rem;left:clamp(1.5rem,1.75vw,3rem)}