@font-face{font-family:Encode Sans SC;font-style:normal;font-weight:100 400;font-display:swap;src:url(/fonts/encode-sans-sc-latin.woff2)format("woff2")}@font-face{font-family:Tourney;font-style:normal;font-weight:100 400;font-display:swap;src:url(/fonts/tourney-latin.woff2)format("woff2")}:root{--accent:#a40808;--accent-bright:#e22828;--surface:#111;--surface-raised:#191919;--text:#f7f7f7;--text-muted:#b7b7b7;--border:#ffffff24;--nav-height:3.75rem;--content-width:90rem;--radius:.55rem;--transition:.18s ease}*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth;background:#000;overflow-x:clip}body{width:100%;max-width:100%;color:var(--text);background:#000;margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow-x:clip}.srOnly{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.skipLink{z-index:100;border-radius:var(--radius);color:#000;transition:transform var(--transition);background:#fff;padding:.75rem 1rem;font-weight:700;text-decoration:none;position:fixed;top:.75rem;left:.75rem;transform:translateY(-200%);&:focus{transform:translateY(0)}}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline-offset:3px;outline:3px solid #fff}::-webkit-scrollbar{background:#280000;width:8px}::-webkit-scrollbar-thumb{background:#eee}.App{width:100%;overflow-x:clip;&>header{isolation:isolate;background:#070510;align-items:center;height:72svh;min-height:42rem;display:flex;position:relative;& .heroPicture,& .heroImage{z-index:0;width:100%;height:100%;position:absolute;inset:0}& .heroImage{object-fit:cover}& .mask{background:linear-gradient(90deg,#000000ad 0%,#00000047 47%,#0000 76%),linear-gradient(#0000 72%,#000000d1 100%)}& .titleBlockLeft{z-index:2;width:min(52rem,100%);padding:clamp(2rem,5vw,6rem);position:relative;& h1{text-wrap:balance;max-width:12ch;margin:0;font-family:Tourney,sans-serif;font-size:clamp(3.25rem,7vw,7.5rem);font-weight:400;line-height:.92}& p{margin:0}& .role{color:#fff;letter-spacing:.08em;text-transform:uppercase;margin-top:1.5rem;font-family:Encode Sans SC,sans-serif;font-size:clamp(1.2rem,2.5vw,2rem)}& .specialties{color:#e6e6e6;text-wrap:balance;max-width:39rem;margin-top:.75rem;font-size:clamp(1rem,1.8vw,1.35rem);line-height:1.55}& .tagline{color:var(--text-muted);margin-top:.35rem;font-family:monospace;font-size:1rem}& .heroActions{flex-wrap:wrap;gap:.75rem;margin-top:2rem;display:flex;& a{border:1px solid var(--border);border-radius:var(--radius);color:#fff;backdrop-filter:blur(8px);min-height:3rem;transition:background var(--transition), border-color var(--transition), transform var(--transition);background:#00000094;justify-content:center;align-items:center;padding:.75rem 1.1rem;font-weight:650;text-decoration:none;display:inline-flex;&:hover{background:#232323e0;border-color:#fff6;transform:translateY(-2px)}&.primary{border-color:var(--accent-bright);background:var(--accent);&:hover{background:#c20b0b}}}}}& .contactBlockRight{--contact-size:2.5rem;z-index:2;border:1px solid var(--border);border-radius:calc(var(--radius) + .2rem);backdrop-filter:blur(10px);background:#0000005c;gap:.55rem;padding:.6rem;display:flex;position:absolute;top:1.25rem;right:1.25rem;& a{width:var(--contact-size);height:var(--contact-size);transition:background var(--transition), transform var(--transition);border-radius:.35rem;place-items:center;display:grid;&:hover{background:#ffffff1f;transform:translateY(-2px)}& img{object-fit:contain;opacity:.82;width:1.75rem;height:1.75rem}&:not(.contactResume,.contactGithub,.contactYoutube,.contactBluesky,.contactBlog) img{filter:invert()}}}}& .mask{z-index:1;pointer-events:none;position:absolute;inset:0;&.fadeTopBottom{background:linear-gradient(#000 0%,#0000 24% 76%,#000 100%)}}& nav{z-index:10;min-height:var(--nav-height);border-bottom:1px solid var(--border);backdrop-filter:blur(12px);background:#040404eb;display:flex;position:sticky;top:0;box-shadow:0 .75rem 2rem #0006;& button{cursor:pointer;border:0}& .menuButton{width:100%;min-height:var(--nav-height);color:#fff;background:0 0;padding:.75rem 1rem;font:650 1rem system-ui,sans-serif;display:none}& .navItem{min-width:10rem;transition:background var(--transition), border-color var(--transition);border-bottom:3px solid #5d0000;flex:1;position:relative;& .categoryButton{width:100%;min-height:calc(var(--nav-height) - 3px);color:#fff;background:0 0;padding:.75rem;font:600 clamp(.9rem,1.5vw,1.1rem) system-ui,sans-serif}& ul{border:1px solid var(--border);background:#0f0f0ffa;width:100%;min-width:15rem;margin:0;padding:.4rem;list-style:none;display:none;position:absolute;top:100%;box-shadow:0 1rem 2rem #0000008c;& li a{color:#eee;border-radius:.35rem;padding:.7rem .8rem;font-size:.95rem;text-decoration:none;display:block;&:hover,&:focus-visible{background:var(--accent);color:#fff}}}&:hover,&:focus-within,&.categoryOpen{border-bottom-color:var(--accent-bright);background:#1a0808}&.categoryOpen{& ul{display:block}}@media (hover:hover) and (pointer:fine){&:hover ul{display:block}}}}& .featuredProjects>section{min-height:calc(46rem - var(--nav-height));height:calc(100svh - var(--nav-height));scroll-margin-top:var(--nav-height);isolation:isolate;position:relative;& .carousel,& .carousel-image{width:100%;height:100%;position:absolute;inset:0}& .carousel-image{object-fit:cover;opacity:0;transition:opacity 1s ease-in-out;&.active{opacity:1}}& .projectContent{z-index:2;width:min(100%, var(--content-width));flex-direction:column;align-items:flex-start;height:100%;margin:0 auto;padding:2rem clamp(1.25rem,4vw,4rem);display:flex;position:relative;& h2{color:#fff;overflow-wrap:anywhere;text-wrap:balance;max-width:15ch;margin:0;font-family:Encode Sans SC,sans-serif;font-size:clamp(3rem,6vw,6.5rem);font-weight:100;line-height:.98}&>p{border:1px solid var(--border);border-radius:var(--radius);color:#f1f1f1;backdrop-filter:blur(8px);background:#000000c2;width:min(42rem,60%);margin:clamp(2rem,3vw,3rem) 0 0;padding:1.1rem 1.25rem;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.6;box-shadow:0 1rem 3rem #0000006b}&>.projectActions{margin-top:auto}}&.right .projectContent{align-items:flex-end;& h2{text-align:right}}}& .projectActions{flex-wrap:wrap;gap:.65rem;display:flex;& a{border-radius:var(--radius);background:var(--accent);color:#fff;min-height:3rem;transition:background var(--transition), border-color var(--transition), transform var(--transition);border:1px solid #ffffff2e;align-items:center;gap:.55rem;padding:.65rem .9rem;font-weight:650;text-decoration:none;display:inline-flex;box-shadow:0 .5rem 1.5rem #46000073;&:hover{background:#c20b0b;border-color:#ffffff73;transform:translateY(-2px)}& img{object-fit:contain;width:1.5rem;height:1.5rem}}&.compact{margin-top:auto;& a{min-height:2.35rem;box-shadow:none;background:#282828;padding:.45rem .65rem;font-size:.82rem;&:hover{background:var(--accent)}& img{width:1.1rem;height:1.1rem}}}}& .projectArchive{background:#000;min-height:auto;padding:clamp(2.5rem,4vw,4rem) clamp(1rem,4vw,4rem) clamp(5rem,9vw,9rem);& .archiveIntro,& .archiveGrid{width:min(100%, var(--content-width));margin-inline:auto}& .archiveIntro{max-width:var(--content-width);& h2{margin:0;font-family:Encode Sans SC,sans-serif;font-size:clamp(2.8rem,6vw,5.5rem);font-weight:100;line-height:1}}& .archiveGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:3rem;display:grid}& .archiveCard{min-width:0;scroll-margin-top:calc(var(--nav-height) + 1rem);border:1px solid var(--border);border-radius:calc(var(--radius) + .2rem);background:var(--surface);transition:border-color var(--transition), transform var(--transition);flex-direction:column;display:flex;overflow:hidden;box-shadow:0 1rem 2.5rem #00000040;&:target{border-color:var(--accent-bright);box-shadow:0 0 0 3px #e2282833}&:hover{border-color:#ffffff47;transform:translateY(-3px)}& .archiveImageFrame{aspect-ratio:16/9;background:#050505;width:100%;display:block;position:relative;overflow:hidden;&>.archiveImage{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity 1s ease-in-out;position:absolute;inset:0;&.active{opacity:1}}}& .archiveCardContent{flex-direction:column;flex:1;min-height:18rem;padding:1.15rem;display:flex;& .archiveCategory{color:#df6969;letter-spacing:.09em;text-transform:uppercase;margin:0 0 .35rem;font-size:.72rem;font-weight:750}& h3{margin:0;font-size:1.35rem;line-height:1.2}&>p:not(.archiveCategory){color:var(--text-muted);margin:.75rem 0 1.25rem;font-size:.92rem;line-height:1.55}}}}}.siteFooter{border-top:1px solid var(--border);color:var(--text-muted);background:#030303;padding:4rem clamp(1rem,4vw,4rem);& .footerContent{width:min(100%, var(--content-width));grid-template-columns:minmax(16rem,1.3fr) minmax(16rem,1fr);gap:2rem 4rem;margin-inline:auto;display:grid;& p{max-width:38rem;margin:0;line-height:1.6}& .footerName{color:#fff;margin-bottom:.45rem;font-size:1.25rem;font-weight:750}& nav{flex-wrap:wrap;align-content:flex-start;gap:.65rem 1.25rem;display:flex;& a{color:#eee;text-underline-offset:.25rem;font-weight:600;&:hover{color:#f77}}}& .copyright{border-top:1px solid var(--border);grid-column:1/-1;padding-top:1.5rem;font-size:.82rem}}}@media (width<=900px){.App>header{align-items:flex-end;height:85svh;min-height:45rem;& .mask{background:linear-gradient(#00000014 0%,#00000085 45%,#000000d1 100%),linear-gradient(90deg,#00000052,#0000)}& .titleBlockLeft{padding-bottom:4.5rem;& h1{font-size:clamp(3.25rem,12vw,6.5rem)}}}.App .featuredProjects>section .projectContent>p{width:min(42rem,78%)}.App .projectArchive .archiveGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){:root{--nav-height:3.35rem}.App{&>header{height:100svh;min-height:43rem;& .titleBlockLeft{padding:6.5rem 1.25rem 3.5rem;& h1{max-width:12ch;font-size:clamp(2.2rem,11vw,3.4rem)}& .role{font-size:1.05rem}& .specialties{font-size:1rem}& .heroActions a{width:100%}}& .contactBlockRight{--contact-size:2.25rem;gap:.3rem;top:.8rem;right:50%;transform:translate(50%);& a img{width:1.45rem;height:1.45rem}}}& nav{flex-direction:column;& .menuButton{display:block}& .navItem{border-bottom-width:1px;width:100%;display:none;& .categoryButton{min-height:3rem}& ul{border-inline:0;min-width:0;position:static}}&.menuOpen .navItem{display:block}}& .featuredProjects>section{min-height:calc(47rem - var(--nav-height));height:calc(100svh - var(--nav-height));& .projectContent,&.right .projectContent{text-align:center;align-items:center;padding:1.5rem 1rem;& h2{text-align:center;max-width:12ch;font-size:clamp(2.7rem,13vw,4.5rem)}&>p{width:100%;max-width:38rem;margin-top:1rem;padding:.9rem 1rem;font-size:.95rem;line-height:1.5}&>.projectActions{justify-content:center}}}& .projectArchive{padding-inline:.85rem;& .archiveIntro{padding-inline:.4rem}& .archiveGrid{grid-template-columns:1fr}}}}@media (width<=650px){.siteFooter .footerContent{grid-template-columns:1fr;& .copyright{grid-column:auto}}}@media (width<=420px){.App{&>header .contactBlockRight{--contact-size:2rem;padding:.45rem}& .featuredProjects>section .projectContent{&>p{font-size:.88rem}}& .projectActions:not(.compact){gap:.4rem;& a{min-height:2.6rem;padding:.55rem .7rem;font-size:.85rem;& img{width:1.25rem;height:1.25rem}}}}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
