@font-face{font-family:Montserrat;src:url('./assets/Montserrat-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('./assets/Montserrat-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url('./assets/Montserrat-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{font-family:Montserrat,Arial,sans-serif;color:#fff;background:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
.page{min-height:100vh;padding:8px 16px 36px}
.profile{width:min(100%,546px);margin:0 auto}
.hero{height:600px;position:relative;display:block;overflow:hidden;border-radius:10px;background:#1b1717;color:#fff;text-decoration:none;outline-offset:4px}
.hero-photo{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 35%;filter:brightness(.82)}
.hero-shade{position:absolute;inset:54% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.hero-icon{position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 1px 6px rgba(0,0,0,.1)}
.hero-icon img{display:block;width:30px;height:30px;object-fit:contain}
.hero:focus-visible{outline:2px solid #fff}
.hero-title{position:absolute;bottom:43px;left:12px;right:12px;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.38)}
.hero-title h1{margin:0;font-size:22px;line-height:1.25;font-weight:700}
.hero-title p{margin:9px 0 0;color:#e0dfdf;font-size:14px;line-height:1.3;font-weight:600}
.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:24px}
.card{height:290px;position:relative;display:block;overflow:hidden;border-radius:10px;background:#171717;color:#fff;text-decoration:none;isolation:isolate;outline-offset:4px}
.card-photo{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease,filter .35s ease}
.twitter-photo{filter:brightness(.86)}
.card-shade{position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.48));pointer-events:none}
.card-icon{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 1px 6px rgba(0,0,0,.1)}
.card-icon img{display:block;width:25px;height:25px;object-fit:contain}
.card-name{position:absolute;left:6px;right:6px;bottom:20px;text-align:center;font-size:16px;line-height:1.3;font-weight:700;text-shadow:0 1px 5px rgba(0,0,0,.48)}
.card:hover .card-photo,.card:focus-visible .card-photo{transform:scale(1.045);filter:brightness(.88)}
.card:hover .twitter-photo,.card:focus-visible .twitter-photo{filter:brightness(.78)}
.card:focus-visible{outline:2px solid #fff}
@media(max-width:600px){.page{padding:8px 12px 28px}.hero{height:min(600px,110vw)}.links{gap:12px;margin-top:20px}.card{height:clamp(215px,54vw,290px)}.card-name{bottom:17px;font-size:14px}}
@media(max-width:380px){.page{padding-left:9px;padding-right:9px}.links{gap:10px}.card-icon{width:31px;height:31px}.card-icon img{width:23px;height:23px}}
@media(prefers-reduced-motion:reduce){.card-photo{transition:none}}