@font-face{font-family:Archivo Black;src:url('../assets/fonts/archivo-black-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/fonts/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}
/* Keep the console's copper instrumentation. Client fonts belong to specimens. */
.hero-photo{--ratio:1;width:min(76%,calc(var(--visual-h) * var(--ratio)));transform:translateX(-8%)}
.echo-photo{width:min(26%,calc(var(--visual-h) * .45));right:2%;top:8%;transform:rotate(6deg)}
.portrait-card{--ratio:.9412}
#portfolio .screen-card{--ratio:1.6}
.archivo{font-family:'Archivo Black',sans-serif;font-weight:400}
.manrope{font-family:Manrope,sans-serif;font-weight:400}
.specimen>.archivo{font-size:clamp(26px,2.75vw,46px);line-height:1.18;margin:26px 0}
.specimen>.manrope{font-size:clamp(16px,1.6vw,25px);line-height:1.6;margin:27px 0;color:var(--copper)}
.specimen>.alphabet{font-size:9px;line-height:1.9;color:var(--muted);margin:24px 0 0}
@media(min-width:1600px){.console-grid{width:100%;max-width:1390px;margin-inline:auto}}
@media(min-width:851px) and (max-height:760px){.specimen>.archivo{font-size:32px;margin:20px 0}.specimen>.manrope{font-size:18px;margin:20px 0}.specimen>.alphabet{font-size:8px;margin:16px 0 0}}
@media(max-width:1100px) and (min-width:851px){.specimen>.archivo{font-size:26px;margin:10px 0}.specimen>.manrope{font-size:15px;margin:10px 0}}
@media(max-width:850px){.hero-photo{width:min(78%,calc(var(--visual-h) * var(--ratio)))}.echo-photo{width:24%;right:0;top:7%}.readout h1{display:block}.specimen>.archivo{font-size:27px;margin:22px 0}.specimen>.manrope{font-size:16px;margin:22px 0}.specimen>.alphabet{font-size:7px;margin:18px 0 0}.stat-grid dt{white-space:normal}}