:root { --bg:#171113; --surface:#251a1d; --paper:#fff4df; --text:#fff9ef; --muted:#c7b5ae; --coral:#ff5635; --orange:#f6aa25; --line:#563b40; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 85% -5%,#4d2529 0,var(--bg) 35rem); font-family:Nunito,system-ui,sans-serif; }
.profile { width:min(100%,510px); min-height:100vh; padding:26px 17px 40px; }
.profile-header { position:relative; }.avatar-wrap { width:132px; height:132px; margin:0 auto 16px; padding:5px; border:2px solid var(--orange); border-radius:42% 58% 54% 46% / 45% 39% 61% 55%; transform:rotate(-4deg); background:var(--coral); box-shadow:5px 6px 0 #0c090a; overflow:hidden; }
.profile-image { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; transform:rotate(4deg) scale(1.08); }.eyebrow { margin:0 0 6px; color:var(--orange); font:500 .62rem DM Mono,monospace; letter-spacing:.13em; }
h1 { margin:0; font-size:clamp(2.6rem,12vw,3.75rem); line-height:.84; font-weight:900; letter-spacing:-.09em; } h1 span { color:var(--coral); text-shadow:2px 2px 0 #000; }.username { margin:8px 0 4px; color:var(--orange); font-size:.82rem; font-weight:900; }.bio { margin:0; color:var(--muted); font-size:.88rem; }
.socials { display:flex; justify-content:center; gap:10px; margin:19px 0 29px; }.socials a { display:grid; place-items:center; width:43px; height:43px; color:var(--bg); background:var(--paper); border-radius:50%; text-decoration:none; font-size:1.1rem; box-shadow:3px 3px 0 #000; transition:transform .18s,background .18s; }.socials a:hover { transform:translateY(-4px) rotate(-6deg); background:var(--orange); }
.featured { display:grid; gap:13px; }.featured-card { display:block; position:relative; overflow:hidden; border-radius:21px; background:var(--surface); color:var(--text); text-decoration:none; border:1px solid #71444b; box-shadow:0 12px 28px #0006; transition:transform .2s,box-shadow .2s; }.featured-card:hover { color:var(--text); transform:translateY(-4px); box-shadow:0 16px 30px #0009; }.card-image { display:block; width:100%; object-fit:cover; background:#3d2529; }.feature-main .card-image { height:235px; }.card-tag { position:absolute; top:12px; left:12px; padding:6px 8px; color:#231315; background:var(--orange); border-radius:99px; font:500 .55rem DM Mono,monospace; letter-spacing:.1em; }.featured-card strong { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-size:.78rem; letter-spacing:.065em; }.featured-card strong i { font-size:1.1rem; }.feature-pair { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.mini-card .card-image { height:154px; }.mini-card strong { min-height:70px; font-size:.66rem; line-height:1.12; padding:11px; }
.contact { margin:28px 0; padding:22px 11px; border-block:1px solid var(--line); }.contact p { margin:0 0 6px; color:var(--muted); font:500 .61rem DM Mono,monospace; letter-spacing:.16em; }.contact a { color:var(--orange); font-size:.79rem; font-weight:900; text-decoration:none; letter-spacing:.025em; }
.section-title { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; }.section-title p { margin:0; font-size:.88rem; font-weight:900; letter-spacing:.12em; }.section-title span { color:var(--muted); font:500 .54rem DM Mono,monospace; letter-spacing:.08em; }.gallery { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.gallery a { overflow:hidden; border-radius:15px; background:var(--surface); }.gallery a:nth-child(3n+1) { grid-row:span 2; }.gallery img { display:block; width:100%; height:100%; min-height:145px; object-fit:cover; background:var(--surface); transition:transform .3s; }.gallery a:nth-child(3n+1) img { min-height:300px; }.gallery a:hover img { transform:scale(1.05); }.replace-note { margin:15px 4px 0; color:#957d7c; font-size:.64rem; }.replace-note code { color:var(--orange); }.site-footer, footer { display:block; padding-top:29px; color:#80686b; text-align:center; font:500 .58rem DM Mono,monospace; letter-spacing:.1em; }
@media (min-width:700px) { .profile { width:min(100%,570px); padding:34px 22px 50px; }.avatar-wrap { width:145px; height:145px; }.feature-main .card-image { height:270px; }.mini-card .card-image { height:180px; }.gallery { gap:13px; }.gallery img { min-height:180px; }.gallery a:nth-child(3n+1) img { min-height:373px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }