@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#121310;--text:#f5f6f1;--muted:#a4a1ab;--purple:#e8ff8a;--border:#303036}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--purple);outline-offset:6px}button{cursor:pointer}header,main,footer{max-width:1440px;margin:auto}header{height:104px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.brand{font:bold 46px/1 'Space Grotesk',sans-serif;letter-spacing:-5px}.brand span{font:14px 'DM Sans';vertical-align:top;margin-left:7px;color:var(--purple);letter-spacing:0}nav{display:flex;gap:36px;align-items:center;font-size:14px}.nav-contact{border:1px solid #6d7061;border-radius:30px;padding:10px 20px}.nav-contact span{color:var(--purple);margin-left:12px}nav a:hover,.text-link:hover,.socials a:hover{color:var(--purple)}section{padding:90px 6%}.hero{padding-top:70px;padding-bottom:60px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;display:flex;align-items:center;gap:12px;color:var(--muted)}.line{width:30px;height:2px;background:var(--purple)}h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:500;margin:0;letter-spacing:-.045em}h1{font-size:clamp(48px,7.5vw,104px);line-height:1.04;margin:30px 0 36px}h1>span{color:var(--purple)}.hero-bottom{display:flex;justify-content:space-between;align-items:end}.hero-bottom p{color:var(--muted);margin:0}.round-link{display:flex;align-items:center;gap:22px;font-size:14px}.round-link b{height:50px;width:50px;display:grid;place-items:center;border:1px solid #73795a;border-radius:50%;font-size:23px;font-weight:400}.round-link:hover b{background:var(--purple);color:var(--bg)}.projects{padding-top:40px}.section-head{border-top:1px solid var(--border);padding-top:30px;display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:32px}h2{font-size:clamp(32px,3.5vw,48px);line-height:1.14}.section-head h2{margin-top:12px}.purple{color:var(--purple)}.small{font-size:12px;color:var(--muted);letter-spacing:1px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 24px}.project-card{min-width:0}.project-visual{width:100%;aspect-ratio:16/9;border:0;position:relative;overflow:hidden;background:#282a21;display:block;padding:0;border-radius:4px}.project-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .5s;filter:brightness(.85)}.project-visual:hover img{transform:scale(1.035);filter:brightness(1)}.play{width:56px;height:56px;display:grid;place-items:center;background:#1a1c13ac;border:1px solid #ffffff70;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:white;font-size:20px;backdrop-filter:blur(5px)}.number{position:absolute;top:14px;left:16px;color:white;font-size:12px;background:#12131099;padding:3px 8px;border-radius:20px}.project-meta{display:flex;justify-content:space-between;align-items:center;padding-top:16px;gap:16px}.project-meta h3{font-size:25px;letter-spacing:-.025em}.project-meta p{margin:3px 0 0;color:var(--muted);font-size:14px}.project-meta>span{font-size:24px;color:var(--purple)}.about,.contact{display:grid;grid-template-columns:1fr 1fr;gap:8%;border-top:1px solid var(--border)}.about h2,.contact h2{margin-top:24px}.about-copy p{margin:0 0 22px;color:var(--muted)}.about-copy .large{font-size:22px;line-height:1.5;color:var(--text)}.skills{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0}.skills span{font-size:13px;border:1px solid var(--border);padding:6px 12px;border-radius:24px}.text-link{font-size:14px;border-bottom:1px solid var(--purple);padding-bottom:6px}.contact{background:#171813}.contact h2{font-size:clamp(34px,3.6vw,50px)}.contact p{color:var(--muted)}.email{display:inline-block;margin:20px 0 25px;font-size:clamp(14px,1.4vw,20px);border-bottom:1px solid #696f52;padding-bottom:5px}.socials{display:flex;gap:24px;font-size:14px;flex-wrap:wrap}form{padding-top:12px}label{display:block;font-size:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}input,textarea{display:block;background:transparent;border:0;border-bottom:1px solid #53505a;color:var(--text);padding:13px 0;margin:0 0 28px;width:100%;border-radius:0}input::placeholder,textarea::placeholder{color:#8f8b98}textarea{resize:vertical;min-height:140px}.submit{width:100%;border:0;border-radius:3px;background:var(--purple);color:#1c1f10;font-weight:600;padding:16px 22px;display:flex;justify-content:space-between}.submit:hover{background:#eeffaa}.form-note{font-size:13px;line-height:1.5}#form-status{font-size:14px}footer{display:flex;align-items:center;justify-content:space-between;padding:35px 6%;gap:20px}footer>span,footer>a:last-child{font-size:13px;color:var(--muted)}.skip{position:fixed;left:20px;top:-100px;background:var(--purple);color:#111;padding:12px;z-index:10}.skip:focus{top:10px}dialog{background:#1b1c16;color:var(--text);border:1px solid #595f43;padding:24px;width:min(960px,94vw);max-height:92vh;border-radius:8px}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}.dialog-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px}.dialog-bar h2{font-size:28px}.dialog-bar button{background:transparent;border:1px solid #615d67;border-radius:50%;width:40px;height:40px;color:white}#player-container{aspect-ratio:16/9}iframe{border:0;width:100%;height:100%}dialog p{color:var(--muted);font-size:14px}dialog>a{color:var(--purple);font-size:14px}@media(max-width:720px){header{height:82px;padding:0 6%}nav{gap:18px}nav a{font-size:13px}.nav-contact{padding:8px 12px}.nav-contact span{display:none}.brand{font-size:37px}section{padding:60px 6%}.hero{padding-top:45px}.hero h1{font-size:clamp(42px,9vw,64px)}.hero-bottom{align-items:center;gap:20px}.hero-bottom p{font-size:14px}.round-link span{display:none}.section-head{align-items:start}.section-head .small{display:none}.project-grid{gap:30px;grid-template-columns:1fr}.about,.contact{grid-template-columns:1fr;gap:34px}.about-copy .large{font-size:20px}.form-row{grid-template-columns:1fr;gap:0}footer{flex-wrap:wrap}footer .brand{display:none}.eyebrow{font-size:12px;letter-spacing:1.2px}.email{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
h1{font-size:clamp(42px,6vw,82px)}.hero{padding-top:48px;padding-bottom:35px}.projects{padding-top:24px}
.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,1fr);gap:6%;align-items:center;padding-top:54px;padding-bottom:60px}.hero h1{font-size:clamp(38px,4.1vw,59px);line-height:1.1;margin:26px 0}.hero .about-label{font:600 14px/1.5 'DM Sans',sans-serif;letter-spacing:.03em;color:var(--purple);margin-bottom:10px}.intro-text{font-size:17px;line-height:1.65;max-width:610px;margin:0 0 14px}.intro-text.secondary{font-size:15px;color:var(--muted);margin-bottom:22px}.hero-bottom{margin-top:28px}.portrait{margin:0;max-width:440px;width:100%;justify-self:end}.portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid #3c3f31}.portrait figcaption{display:flex;flex-direction:column;border-left:2px solid var(--purple);padding-left:14px;margin-top:18px;font-size:15px}.portrait figcaption span:last-child{font-size:13px;color:var(--muted)}.project-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}.project-filters button{border:1px solid #4d4f43;background:transparent;color:var(--muted);padding:9px 19px;border-radius:24px;font-size:14px;transition:background .2s,color .2s}.project-filters button:hover{color:var(--text);border-color:var(--purple)}.project-filters button[aria-pressed=true]{color:#1c1f10;background:var(--purple);border-color:var(--purple)}.filter-status{color:var(--muted);font-size:13px;margin:0 0 24px}.project-card[hidden]{display:none}@media(max-width:720px){.hero{grid-template-columns:1fr;gap:32px;padding-top:34px;padding-bottom:42px}.hero h1{font-size:clamp(36px,8.2vw,54px)}.portrait{max-width:320px;justify-self:start}.hero .round-link span{display:block}.intro-text{font-size:16px}.project-filters{gap:8px}.project-filters button{padding:8px 14px}.hero .eyebrow{font-size:12px}}
/* Fixed navigation and reading progress */
:root{--header-height:88px}body{padding-top:var(--header-height)}html{scroll-padding-top:calc(var(--header-height) + 24px)}header{position:fixed;inset:0 0 auto;max-width:none;height:var(--header-height);z-index:50;padding:0 max(6%,calc((100vw - 1268px)/2));background:rgba(16,16,19,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #ffffff0c}.scroll-track{position:absolute;bottom:-3px;left:0;width:100%;height:3px;background:#2c2f20}#scroll-progress{width:100%;height:100%;background:linear-gradient(90deg,#c4e443,#e8ff8a,#f0ffb6);transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px #e1ff6a66}.skip{z-index:60}
/* The portrait breaks above a circular purple backdrop. */
.portrait-stage{position:relative;isolation:isolate;aspect-ratio:1;max-width:420px;margin:auto}.portrait-disc{position:absolute;inset:15% 0 0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d7ea8b,#a0b646 62%,#525f20);box-shadow:0 0 70px #aec55022,inset 0 0 0 1px #f1ffb766}.portrait-disc:after{content:'';position:absolute;inset:-12px;border:1px solid #e8ff8a35;border-radius:50%}.portrait-cutout{position:absolute;inset:0;overflow:hidden;border-radius:0 0 49% 49%}.portrait .portrait-cutout img{width:100%;height:100%;object-fit:contain;object-position:center bottom;border:0;border-radius:0;position:relative;filter:drop-shadow(0 6px 10px #1f260522)}.portrait figcaption{margin-top:28px;margin-left:10%}
/* A quiet color sweep keeps the headline in motion. */
.motion-title{display:inline-block;color:var(--purple);background:linear-gradient(110deg,#dffa75 0%,#e3f98c 30%,#f8ffdd 46%,#e3f98c 60%,#dffa75 100%);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:title-flow 7s ease-in-out infinite}.motion-title:after{content:'';display:block;margin-top:8px;width:45%;height:2px;background:linear-gradient(90deg,transparent,#e8ff8a,transparent);transform-origin:left;animation:line-flow 7s ease-in-out infinite}@keyframes title-flow{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}@keyframes line-flow{0%,100%{transform:translateX(0) scaleX(.65);opacity:.4}50%{transform:translateX(100%) scaleX(1);opacity:1}}
.reveal{opacity:1;transform:none}.reveal.is-pending{opacity:0;transform:translateY(24px)}.reveal.is-visible{opacity:1;transform:translateY(0);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.cursor-orbit{display:none}@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.cursor-orbit{display:block;position:fixed;z-index:100;top:0;left:0;width:32px;height:32px;border:1px solid #e8ff8b;border-radius:50%;background:#e3ff710b;pointer-events:none;opacity:0;transform:translate(-100px,-100px);transition:width .2s,height .2s,opacity .2s,background .2s;box-shadow:0 0 16px #dfff5d20}.cursor-orbit.is-active{opacity:.85}.cursor-orbit.is-hover{width:50px;height:50px;background:#e1ff6a1a}}
@media(max-width:720px){:root{--header-height:76px}.portrait{max-width:310px;justify-self:center}.portrait-stage{width:100%}.portrait figcaption{margin-top:24px}.motion-title:after{margin-top:5px}.hero h1{font-size:clamp(35px,8vw,54px)}}
@media(prefers-reduced-motion:reduce){.motion-title,.motion-title:after{animation:none}.reveal.is-pending{opacity:1;transform:none}.reveal.is-visible{transition:none}.cursor-orbit{display:none!important}}
/* Lime identity and Trade Gothic Next display typography. */
:root{--purple:#CCFF00;--accent:#CCFF00}
h1,h2,h3,.brand{font-family:'trade-gothic-next',Arial,sans-serif;font-weight:700;letter-spacing:-.035em}.hero h1{font-size:clamp(38px,4.2vw,60px);line-height:1.08}.hero .about-label{font-family:'DM Sans',sans-serif;letter-spacing:.03em}
.portrait-disc{inset:15% 7.5% 0;border-radius:50%;background:#202516;box-shadow:inset 0 0 0 1px #ccff001c,0 0 45px #ccff0008;overflow:hidden}.portrait-disc:after{inset:0;border:0;border-radius:50%;background:radial-gradient(ellipse at 30% 35%,#ccff0038,transparent 65%);animation:portrait-light 10s ease-in-out infinite;transform:translate(-18%,8%) scale(1.2)}.portrait-cutout{inset:0 7.5%;border-radius:0 0 50% 50% / 0 0 42.5% 42.5%}.portrait .portrait-cutout img{width:117.647%;max-width:none;height:100%;left:-8.8235%;object-fit:contain;filter:drop-shadow(0 4px 12px #0003)}
@keyframes portrait-light{0%,100%{transform:translate(-22%,12%) scale(1.2);opacity:.5}50%{transform:translate(25%,-18%) scale(1.35);opacity:.9}}
.submit{position:relative;isolation:isolate;overflow:hidden;background:#CCFF00;color:#161b06;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.submit:before{content:'';position:absolute;z-index:-1;inset:-60% auto -60% -60%;width:35%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,#ffffff75,transparent);transition:left .65s ease}.submit:hover,.submit:focus-visible{background:#d8ff3e;transform:translateY(-3px);box-shadow:0 8px 26px #ccff0025}.submit:hover:before,.submit:focus-visible:before{left:125%}.submit-arrow{transition:transform .25s ease}.submit:hover .submit-arrow,.submit:focus-visible .submit-arrow{transform:translate(3px,-3px)}.submit:active{transform:translateY(0);box-shadow:none}
#scroll-progress{background:linear-gradient(90deg,#86a900,#CCFF00);box-shadow:0 0 10px #ccff0033}.motion-title{background-image:linear-gradient(110deg,#CCFF00 0%,#ccff00 30%,#f3ffbd 46%,#ccff00 60%,#CCFF00 100%)}.motion-title:after{background:linear-gradient(90deg,transparent,#CCFF00,transparent)}.cursor-orbit{border-color:#CCFF00;background:#ccff000b;box-shadow:0 0 16px #ccff0020}.cursor-orbit.is-hover{background:#ccff001a}
@media(prefers-reduced-motion:reduce){.portrait-disc:after{animation:none}.submit:hover,.submit:focus-visible,.submit:hover .submit-arrow{transform:none}.submit:before{display:none}}
/* Continuous orbital light: a bright leading arc with a long fading trail. */
.portrait-disc{background:#1c2113;overflow:hidden;box-shadow:inset 0 0 0 1px #ccff0025,0 0 35px #ccff0008}
.portrait-disc:before{content:'';position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,transparent 0deg,transparent 175deg,#ccff000c 220deg,#ccff0066 290deg,#CCFF00 338deg,#f3ffc2 351deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:orbital-light 8s linear infinite;pointer-events:none}
.portrait-disc:after{content:'';position:absolute;inset:0;border:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 245deg,#ccff0008 290deg,#ccff0055 342deg,transparent 360deg);filter:blur(15px);opacity:.8;animation:orbital-light 8s linear infinite;transform:none;pointer-events:none}
@keyframes orbital-light{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.portrait-disc:before,.portrait-disc:after{animation:none}}
/* Expanding wordmark. */
.brand{font-size:30px;line-height:1.15;letter-spacing:-.035em;flex-shrink:0}.brand .brand-name{display:inline-flex;align-items:baseline;white-space:nowrap}.brand span{font:inherit;vertical-align:baseline;margin:0;letter-spacing:inherit;color:inherit}.brand .brand-initial{color:#CCFF00}.brand .brand-tail{display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width .55s cubic-bezier(.2,.75,.2,1),opacity .35s ease}.brand:hover .brand-tail,.brand:focus-visible .brand-tail{max-width:4em;opacity:1}.brand .brand-dot{padding:0 .02em}.hero .intro-text{margin-bottom:26px}.email{transition:color .25s ease,border-color .25s ease}.email:hover,.email:focus-visible{color:#CCFF00;border-color:#CCFF00}
/* Radial waves expand from the center; no rotation. */
.portrait-disc:before,.portrait-disc:after{content:'';position:absolute;inset:0;padding:0;border-radius:50%;border:0;background:radial-gradient(circle,transparent 45%,#ccff000d 55%,#ccff0055 64%,#ccff0080 68%,#ccff0033 72%,transparent 78%);mask:none;-webkit-mask:none;filter:blur(2px);transform:scale(.06);opacity:0;animation:center-light-pulse 4.8s linear infinite;pointer-events:none}.portrait-disc:after{animation-delay:-2.4s;filter:blur(5px)}
@keyframes center-light-pulse{0%{transform:scale(.06);opacity:0}12%{opacity:.85}65%{opacity:.75}100%{transform:scale(1.8);opacity:0}}
@media(max-width:900px){.brand{font-size:26px}header nav{gap:18px}}
@media(max-width:600px){.brand{font-size:27px;position:relative}.brand:hover .brand-tail,.brand:focus-visible .brand-tail{max-width:0;opacity:0}.brand:focus-visible:after{content:'Nicholas.Escovar';position:absolute;top:calc(100% + 16px);left:0;font-size:23px;background:#101013;padding:10px 14px;border:1px solid #ccff0033;color:#CCFF00;border-radius:4px}}
@media(prefers-reduced-motion:reduce){.portrait-disc:before,.portrait-disc:after{animation:none;transform:none;opacity:.15}.brand .brand-tail{transition:none}}