@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --night:#080b24; --plum:#210743; --line:#56416e; --cyan:#36cdd2; --cyan-light:#a8ecff; --gold:#ffdd69; --text:#e9f5ff; --soft:#b7c9dc; --radius:16px; }
*, *::before, *::after { box-sizing:border-box; }
html { min-height:100%; }
body { display:grid; place-items:center; min-height:100svh; margin:0; background-color:var(--night); background-image:radial-gradient(ellipse at center,transparent 48%,rgba(2,1,16,.42) 80%,rgba(1,1,12,.72) 100%),repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.12) 4px),linear-gradient(rgba(4,5,26,.35),rgba(4,5,26,.35)),url('/assets/space-background.png'); background-position:center; background-size:cover,auto,cover,cover; background-attachment:fixed; color:var(--text); font:400 16px/1.45 'IBM Plex Sans',sans-serif; }
a { color:inherit; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.hub { display:flex; flex-direction:column; gap:18px; width:min(900px,84vw); height:min(100svh,720px); min-height:580px; padding:20px 0; }
.hub-header { display:flex; align-items:center; gap:18px; min-height:92px; }
.hub-avatar { flex:none; width:80px; height:80px; border-radius:14px; background:#050a2a; object-fit:cover; image-rendering:pixelated; }
.hub-header h1 { flex:none; width:176px; margin:0; font:700 22px/1.02 'Space Grotesk',sans-serif; letter-spacing:-.035em; }
.hub-header h1 span { display:block; color:var(--gold); }
.hub-juice { flex:none; width:106px; height:106px; margin-left:auto; object-fit:contain; image-rendering:pixelated; }
.hub-header-rule { flex:none; width:3px; height:68px; border-radius:4px; background:var(--cyan); }
.hub-header p { margin:0; color:var(--soft); font-size:18px; line-height:1.32; }
.hub-header p span { color:var(--cyan); }
.hub-grid { display:grid; flex:1; min-height:0; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:12px; }
.hub-tile { position:relative; display:block; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#111735; text-decoration:none; isolation:isolate; transition:border-color .18s,box-shadow .18s,transform .18s; }
.hub-tile:hover, .hub-tile:focus-visible { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan),0 0 12px rgba(54,205,210,.25); transform:translateY(-3px); }
.hub-tile::after { position:absolute; inset:0; z-index:0; content:''; background:linear-gradient(180deg,rgba(0,3,35,.06),rgba(0,3,35,.76)); pointer-events:none; }
.hub-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile-overline, .tile-title { position:absolute; z-index:1; }
.tile-overline { top:16px; left:18px; color:var(--cyan-light); font:700 11px 'Space Grotesk',sans-serif; letter-spacing:.1em; text-shadow:0 1px 8px #000; }
.tile-title { right:18px; bottom:13px; color:#fff; font:700 clamp(21px,2.6vw,34px)/1.05 'Space Grotesk',sans-serif; letter-spacing:-.035em; text-align:right; text-shadow:0 2px 12px #000; }
.tile-portfolio { grid-column:1/3; grid-row:1/3; }
.tile-portfolio img, .tile-hire img, .tile-terms img { image-rendering:pixelated; }
.tile-portfolio .tile-title { font-size:clamp(30px,3vw,41px); }
.tile-about { grid-column:3; grid-row:1; background:linear-gradient(145deg,#37205a,#172342); }
.tile-about img { object-fit:cover; image-rendering:pixelated; }
.tile-socials { grid-column:4; grid-row:1; background:#d23b36; }
.tile-socials img { object-fit:contain; image-rendering:pixelated; }
.tile-studio { grid-column:3/5; grid-row:2; background:linear-gradient(100deg,#210743,#101c3b); }
.tile-studio img { width:55%; height:100%; object-fit:contain; object-position:center bottom; image-rendering:auto; }
.tile-studio::after { background:linear-gradient(90deg,transparent 38%,rgba(0,3,35,.55)); }
.tile-studio .tile-overline { left:auto; right:17px; }
.tile-hire { grid-column:1/3; grid-row:3; }
.tile-hire img { object-position:center 58%; }
.tile-terms { grid-column:3/5; grid-row:3; background:#1f1919; }
.tile-terms::after { background:none; }
.tile-terms img { left:5%; width:48%; height:100%; object-fit:contain; opacity:1; object-position:center bottom; }
.hub-dock { display:flex; justify-content:center; gap:12px; padding-bottom:1px; }
.hub-dock a { display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--line); border-radius:14px; background:#141b3a; color:var(--cyan-light); transition:background .18s,border-color .18s,transform .18s; }
.hub-dock a:hover { border-color:var(--cyan); background:#203256; transform:translateY(-3px); }
.hub-dock .brand-icon { width:28px; height:28px; object-fit:contain; }
@media (max-width:750px) and (min-width:561px) { .hub-header h1 { width:140px; font-size:19px; } .hub-header p { font-size:15px; } .hub-header { gap:13px; } .hub-avatar { width:70px; height:70px; } .hub-juice { width:82px; height:88px; } .hub-header-rule { height:58px; } .hub-grid { gap:10px; } .tile-title { right:12px; bottom:10px; font-size:21px; } .tile-overline { top:12px; left:12px; font-size:9px; } .tile-studio .tile-overline { right:12px; } }
@media (max-width:560px) { body { display:block; } .hub { width:calc(100% - 28px); height:auto; min-height:100svh; gap:14px; padding:18px 0; } .hub-header { display:grid; grid-template-columns:64px minmax(0,1fr) 82px; grid-template-rows:auto auto; gap:4px 10px; min-height:0; } .hub-avatar { grid-column:1; grid-row:1; width:64px; height:64px; } .hub-header h1 { grid-column:2/4; grid-row:1; width:auto; font-size:17px; } .hub-header-rule { grid-column:1; grid-row:2; justify-self:end; width:2px; height:50px; } .hub-header p { grid-column:2; grid-row:2; font-size:12px; } .hub-juice { grid-column:3; grid-row:2; width:82px; height:82px; margin-left:0; } .hub-grid { flex:1; min-height:500px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1.5fr 1fr 1.1fr 1fr; gap:9px; } .tile-portfolio { grid-column:1/3; grid-row:1; } .tile-about { grid-column:1; grid-row:2; } .tile-socials { grid-column:2; grid-row:2; } .tile-studio { grid-column:1/3; grid-row:3; } .tile-hire { grid-column:1; grid-row:4; } .tile-terms { grid-column:2; grid-row:4; } .tile-terms img { left:0; width:65%; } .tile-overline { top:11px; left:11px; font-size:9px; } .tile-studio .tile-overline { right:11px; } .tile-title { right:11px; bottom:10px; font-size:22px; } .tile-portfolio .tile-title { font-size:31px; } .hub-dock { gap:8px; } .hub-dock a { width:46px; height:46px; border-radius:12px; } .hub-dock .brand-icon { width:25px; height:25px; } }
@media (max-height:650px) and (min-width:561px) { .hub { gap:11px; min-height:0; padding:12px 0; } .hub-header { min-height:72px; } .hub-avatar { width:65px; height:65px; } .hub-dock a { width:44px; height:44px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; } }
html, body, body * { cursor:url('/assets/dmp-cursor.png') 1 1, auto !important; }
a, button, [role="button"] { cursor:url('/assets/dmp-cursor.png') 1 1, pointer !important; }
input, textarea, [contenteditable="true"] { cursor:text !important; }