@font-face{font-family:Urbanist;src:url('assets/urbanist-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Urbanist;src:url('assets/urbanist-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Jacquard 12';src:url('assets/jacquard-12.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--mint:#50ebba;--ink:#ccc;--background:#001410}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;background:var(--background)}
body{font-family:Urbanist,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.page{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;min-height:max(100svh,56.25vw)}
.artwork{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#001410}
.portrait{position:absolute;width:118.4%;height:auto;max-width:none;left:-.5%;bottom:-2vw;display:block}
.pixel-effect{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.header{position:absolute;left:3.125vw;top:3.125vw}
.brand{display:block;width:7.1vw;min-width:72px;line-height:0;margin:-.57vw}
.brand img{display:block;width:100%;height:auto}
.content{position:relative;margin-left:9.765625vw;padding-top:10.75vw;padding-bottom:4vw;width:46vw}
h1{margin:0 0 0 -.38vw;font-size:6.875vw;font-weight:700;line-height:.86;letter-spacing:0}
.headline-line{display:block;white-space:nowrap}
.accent{color:var(--mint)}
.tech{font-family:'Jacquard 12',Georgia,serif;font-weight:400;letter-spacing:0;font-size:1.4112em;line-height:.6947}
.bio{color:var(--mint);font-size:clamp(14px,.9375vw,26px);line-height:1.45;max-width:max(24vw,340px);margin:6.1vw 0 0}
.socials{display:flex;align-items:center;justify-content:space-between;width:24vw;margin-top:4.5vw;gap:12px}
.socials a{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:-6px;transition:filter 180ms ease}
.socials a:last-child{margin-right:-6px}
.socials img{display:block;width:clamp(23px,1.56vw,42px);height:auto}
.socials a:first-child img{width:clamp(27px,1.8vw,47px)}
a:hover{filter:brightness(1.2)}
.socials a .icon-pixels{position:absolute;display:none;pointer-events:none}
.socials a.is-distorting .icon-pixels{display:block}
.socials a.is-distorting img{opacity:0}
a:focus-visible{outline:2px solid var(--mint);outline-offset:6px;border-radius:2px}
footer{position:absolute;left:9.765625vw;bottom:3.65vw;font-size:clamp(12px,.9375vw,25px);line-height:1.4;color:#b6bdbb}
::selection{background:var(--mint);color:#001410}
@media(max-width:700px),(orientation:portrait){
  .page{min-height:max(100svh,177.7778vw)}
  .header{left:7.5vw;top:7.6vw}
  .brand{width:12.4vw;min-width:55px;margin:-1vw}
  .content{margin-left:18vw;width:71vw;padding-top:20.3vw;padding-bottom:82vw}
  h1{font-size:12.2222vw;line-height:.86;letter-spacing:0;margin-left:-.65vw}
  .bio{font-size:clamp(15px,3.3333vw,48px);line-height:1.45;max-width:68vw;margin-top:6vw}
  .socials{width:67vw;margin-top:4vw;gap:8px}
  .socials a{margin-left:-5px}
  .socials img{width:4.6vw;min-width:22px}
  .socials a:first-child img{width:5.25vw;min-width:25px}
  .portrait{width:max(229.4vw,129svh);left:min(-103.4vw,calc(18.5vw - 68.53125svh));bottom:-2.6vw}
  footer{left:18vw;bottom:4.5vw;font-size:clamp(10px,1.7361vw,25px);max-width:76vw}
}
/* Short landscape viewports need a tighter icon gap and room for the footer. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
  .socials{margin-top:12px}
}
@media(orientation:landscape) and (max-height:600px) and (min-width:701px) and (max-width:1100px){
  .content{padding-bottom:calc(3.65vw + 40px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
  .pixel-effect,.socials a .icon-pixels{display:none!important}
  .socials a.is-distorting img{opacity:1}
}