﻿:root{color-scheme:dark;--paper:#3c3b39;--red:#ed251e}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#100f10;color:#fff}body{display:grid;place-items:center;font-family:'Arial Narrow','Roboto Condensed',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.28}a:focus-visible,button:focus-visible{outline:3px solid #ff463b;outline-offset:7px}button:hover:not(:disabled),a:hover{color:#ff4c40}.stage{position:relative;width:1440px;height:800px;overflow:hidden;flex-shrink:0;transform-origin:center;isolation:isolate}.screen{position:absolute;inset:0;background-size:1440px 800px;background-position:center;overflow:hidden}.screen[hidden]{display:none}.filters{position:absolute;width:0;height:0}.home{background-image:url('assets/frame-1.png')}.home video{width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#05050a55,transparent 55%),linear-gradient(0deg,#05050a88,transparent 40%);pointer-events:none}.hero-name{position:absolute;bottom:43px;left:98px;margin:0;font-family:Impact,'Arial Black',sans-serif;font-size:66px;font-weight:900;text-transform:uppercase;line-height:.96;letter-spacing:-2px;transform:rotate(-6deg) skew(-9deg);filter:url(#rough);text-shadow:4px 4px 0 #121218}.hero-name span{font-size:72px}.video-control{position:absolute;bottom:30px;right:34px;background:#12121890;border:1px solid #fff6;width:42px;height:42px;font-size:20px}.header{position:absolute;left:98px;top:81px;display:flex;gap:32px;align-items:flex-start;z-index:5}.sticker{display:block;width:180px;height:118px;background:url('assets/frame-1.png') -98px -81px / 1440px 800px;border-radius:19px;transition:transform .2s}.sticker:hover{transform:rotate(-4deg)}nav{display:flex;flex-direction:column;gap:11px;padding-top:11px}nav a{font-size:21px;line-height:26px;text-transform:uppercase;font-stretch:condensed;letter-spacing:-1px;position:relative;width:max-content}nav a[aria-current=page]::before{content:'';position:absolute;left:-15px;top:9px;width:6px;height:6px;background:var(--red);transform:rotate(-12deg)}.about{background-image:url('assets/about-background.png')}.work{background-image:url('assets/frame-3.png')}.photos{background-image:url('assets/about-background.png')}.contacts{background-image:url('assets/frame-5.png')}.paper-fill{position:absolute;left:90px;top:65px;width:675px;height:650px;background:var(--paper)}.bio{position:absolute;left:111px;top:507px;width:560px}.bio h2{margin:0 0 33px;font-size:19px;line-height:24px;font-weight:400;text-transform:uppercase;color:#aaa9a4}.bio p{font-size:20px;line-height:1.5;margin:0;max-width:530px}.character{position:absolute;left:790px;top:59px;width:680px;height:680px;pointer-events:none}.sprite{width:100%;height:100%;background-image:url('assets/character-atlas.png');background-size:400% 200%;background-repeat:no-repeat;filter:drop-shadow(0 16px 12px #0008)}.rotation-control{position:absolute;right:72px;bottom:25px;border:0;background:transparent;color:#b5b1ae;font-size:13px;letter-spacing:1px}.rotation-control span{margin-left:6px}.radar{position:absolute;left:614px;top:65px;width:135px;height:134px;background:url('assets/frame-3.png') -614px -65px / 1440px 800px}.clients{position:absolute;left:112px;top:310px;width:622px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(10,auto);column-gap:26px;row-gap:14px;counter-reset:client}.clients li{display:flex;align-items:baseline;gap:12px;font-size:18px;line-height:1.2;counter-increment:client}.clients li::before{content:counter(client,decimal-leading-zero) '.';font-family:monospace;font-size:16px;color:#a4a39d;flex:0 0 27px}.map-label{position:absolute;background:#151712eb;padding:5px 9px;font-size:20px;line-height:25px;white-space:nowrap}.m1{left:894px;top:119px}.m2{left:1268px;top:92px}.m3{left:1092px;top:341px}.m4{left:1007px;top:527px}.m5{left:1260px;top:532px}.m6{left:1087px;top:658px}.disk{position:absolute;left:112px;bottom:101px;font-size:34px;font-weight:700;letter-spacing:-1px}.disk span{font-size:25px;margin-left:7px}.gallery-controls{position:absolute;left:411px;bottom:95px;display:flex;gap:36px}.gallery-controls button{border:0;background:transparent;padding:0;width:145px;height:75px;color:var(--red);transition:transform .18s}.gallery-controls button:hover{transform:rotate(-4deg)}.gallery-controls svg{width:100%;height:100%;filter:url(#rough)}.gallery-controls path{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter}.gallery{position:absolute;left:938px;top:0;width:365px;height:800px}.photo-main{position:absolute;top:126px;width:365px;height:548px;background:url('assets/frame-4.png') -938px -126px / 1440px 800px;box-shadow:0 10px 35px #0005}.photo-prev,.photo-next{position:absolute;left:115px;width:135px;height:74px;background:url('assets/frame-4.png') -1053px 0 / 1440px 800px;opacity:.65}.photo-prev{top:0}.photo-next{bottom:0;background-position:-1053px -726px}.photo-count{position:absolute;right:38px;bottom:28px;color:#b4afaa;font:13px monospace;letter-spacing:2px}.gallery img{width:100%;height:100%;object-fit:contain}.gallery .photo-prev img,.gallery .photo-next img{object-fit:cover}.socials{position:absolute;left:120px;top:627px;display:flex;gap:26px;align-items:center}.socials a{display:flex;width:49px;height:49px;align-items:center;justify-content:center;transition:transform .2s}.socials a:hover{transform:translateY(-5px) rotate(-5deg)}.socials svg{width:49px;height:49px;fill:currentColor}.socials .email-icon{font-family:Arial,sans-serif;font-size:62px;font-weight:500;line-height:1}.contact-hotspot{position:absolute;border-bottom:2px solid transparent}.contact-hotspot:hover{border-color:var(--red);background:#ffffff08}.tg{left:935px;top:145px;width:75px;height:48px}.mail{left:1252px;top:234px;width:103px;height:48px}.sound{left:867px;top:385px;width:150px;height:48px}.insta{left:1273px;top:559px;width:136px;height:48px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

html,body{overflow:hidden}.stage{position:fixed;left:50%;top:50%;margin-left:-720px;margin-top:-400px}

/* Revision 2: type, character selection and contact actions */
@font-face{font-family:'SF Pro Local';src:local('SF Pro Text'),local('SF Pro Display'),local('SF Pro');font-display:swap}
:root{--ui-font:'SF Pro Local','SF Pro Text','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body,button{font-family:var(--ui-font)}nav a{font-size:20px;letter-spacing:-.6px;font-stretch:normal}.bio p{font-size:18px;line-height:1.55;max-width:600px}.bio{width:610px}.bio h2{font-size:18px;margin-bottom:26px}.photo-count{font-family:var(--ui-font)}
.hero-name{left:80px;bottom:22px;width:405px;height:270px;transform:rotate(-4deg);filter:none;text-shadow:none;line-height:0}.hero-name img{display:block;width:100%;height:100%;object-fit:contain}
.character-picker{position:absolute;left:185px;top:260px;width:470px;display:flex;justify-content:space-between;gap:40px}.character-option{border:0;border-bottom:2px solid transparent;background:transparent;width:205px;padding:0 0 10px;color:#c5c4c1;font-size:14px;letter-spacing:1px}.character-option[aria-pressed=true]{border-color:#ef332a;color:white}.mini-character{display:block;width:195px;height:195px;background:url('assets/character-atlas.png') 0 0 / 400% 200% no-repeat;transition:filter .2s}.character-option:hover .mini-character{filter:drop-shadow(0 0 9px #ffffff66)}.formal{background-image:url('assets/character-formal-atlas.png')}
.clients{top:285px;grid-template-rows:repeat(10,42px);row-gap:0;column-gap:22px}.clients li{font-size:16px;line-height:20px;gap:10px;align-items:flex-start;counter-increment:none;padding-top:3px}.clients li::before{content:'•';font-family:var(--ui-font);font-size:17px;flex:0 0 9px;color:#d8d6cd}.map-label{font-size:17px;min-width:120px;line-height:25px}.m4{font-size:16px;left:1007px}.m6{min-width:135px}
.disk{left:90px;top:355px;bottom:auto;width:675px;text-align:center;font-size:66px;font-weight:650;letter-spacing:-3px;line-height:1.15}.disk span{font-size:37px;vertical-align:top;display:inline-block;margin-top:6px}.gallery-controls{left:217px;bottom:104px;gap:55px}.gallery-controls button{width:180px;height:100px;filter:drop-shadow(0 5px 0 #151316);transform:rotate(-5deg)}.gallery-controls button:last-child{transform:rotate(5deg)}.gallery-controls svg{filter:none;overflow:visible}.gallery-controls path{fill:url(#chrome);stroke:#201c2b;stroke-width:6;stroke-linejoin:round;paint-order:stroke fill}.gallery-controls button:disabled{opacity:.85}
.phone-number{position:absolute;left:90px;top:356px;width:675px;text-align:center;font-size:51px;font-weight:550;letter-spacing:-2px;font-variant-numeric:tabular-nums}.socials{left:115px;width:620px;justify-content:space-between;gap:0}.socials button{display:flex;width:49px;height:49px;padding:0;border:0;background:transparent;align-items:center;justify-content:center;transition:transform .2s}.socials button:hover{transform:translateY(-5px) rotate(-5deg)}.socials .email-icon{font-family:var(--ui-font)}
.contact-hotspot{border:0;border-bottom:2px solid transparent;padding:0 7px;display:flex;align-items:center;justify-content:center;background:#1c191beF;font-size:19px;color:#fff;line-height:1.2;height:34px}.contact-hotspot:hover{background:#282329;color:#ff4c40}.tg{left:950px;top:146px;width:56px}.mail{left:1271px;top:235px;width:92px}.sound{left:884px;top:387px;width:152px;font-size:17px}.insta{left:1292px;top:561px;width:140px;font-size:17px}.toast{position:absolute;z-index:20;left:427px;bottom:55px;transform:translateX(-50%);padding:16px 24px;background:#efeee7;color:#232220;font-size:18px;box-shadow:5px 5px 0 #111;white-space:nowrap}.toast[hidden]{display:none}
.clients{display:block;columns:2;column-gap:22px}.clients li{break-inside:avoid;margin:0 0 18px;padding:0;min-height:22px}.clients li:nth-child(11){break-before:column}
/* Liquid lettering matched to the black-and-white alphabet reference. */
.hero-name{left:98px;bottom:48px;width:440px;height:180px;padding:17px 14px;background:#fff;transform:none;border-radius:2px}.hero-name img{object-fit:contain}
/* DJ ROMAN: iridescent liquid logo on a transparent background. */
.hero-name{left:83px;bottom:36px;width:430px;height:255px;padding:0;background:transparent;border-radius:0;transform:none}
/* Home navigation and cleaned backgrounds. */
.home{background-image:none;background-color:#0c0c12}.hero-name a{display:block;width:100%;height:100%}.hero-name a:hover{filter:brightness(1.15)}.nav-art{display:none}.stage[data-page=home] .sticker{display:none}.stage[data-page=home] .header nav{padding:0;gap:8px}.stage[data-page=home] nav a{display:block;width:320px;height:53.333px}.stage[data-page=home] .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.stage[data-page=home] .nav-art{display:block;width:320px;height:53.333px;background-image:url('assets/menu-iridescent.png');background-size:320px 213.333px;background-repeat:no-repeat}.art-about{background-position:0 0}.art-work{background-position:0 -53.333px}.art-photos{background-position:0 -106.667px}.art-contacts{background-position:0 -160px}.stage[data-page=home] nav a:hover{filter:brightness(1.25);transform:translateX(4px)}
.work{background-image:url('assets/map-clean.png')}.radar{left:566px}.map-label{background:none;padding:5px 9px;text-shadow:0 2px 5px #000}.disk{font-family:var(--ui-font);font-weight:400;letter-spacing:-1px}.gallery-controls button,.gallery-controls button:last-child{filter:none;transform:rotate(15deg);height:110px}.gallery-controls button:first-child{transform:rotate(-15deg)}.gallery-controls path{fill:#292929;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke fill}.gallery-controls .arrow-outline{stroke:#292929;stroke-width:19}.gallery-controls .arrow-inset{stroke:#ecebe7;stroke-width:10}.gallery-controls button:disabled{opacity:1}
.contacts{background-image:url('assets/contacts-clean.png')}.contact-hotspot{background:none;text-shadow:0 2px 5px #000}.contact-hotspot:hover{background:#ffffff08}
/* Compact home menu, closer to the top-left corner. */
.stage[data-page=home] .header{left:48px;top:40px}.stage[data-page=home] .header nav{gap:7px}.stage[data-page=home] nav a,.stage[data-page=home] .nav-art{width:160px;height:26.667px}.stage[data-page=home] .nav-art{background-size:160px 106.667px}.stage[data-page=home] .art-about{background-position:0 0}.stage[data-page=home] .art-work{background-position:0 -26.667px}.stage[data-page=home] .art-photos{background-position:0 -53.333px}.stage[data-page=home] .art-contacts{background-position:0 -80px}
/* Burgundy italic wordmark, single-line layout. */
.hero-name{left:83px;bottom:42px;width:430px;height:100px;overflow:hidden}.hero-name img{position:absolute;left:0;top:-23px;width:430px;height:143.333px;object-fit:contain}

/* Approved home composition and supplied media. */
.home video{transform:scale(1.1);transform-origin:top left}
.stage[data-page=home] .header{left:48px;top:48px;gap:48px}
.stage[data-page=home] .sticker{display:block;position:relative;background-image:url('assets/frame-2.png')}
.stage[data-page=home] .header nav{padding:0;gap:11px}
.stage[data-page=home] nav a{width:max-content;height:auto;line-height:26px;font-size:20px}
.stage[data-page=home] .nav-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.stage[data-page=home] .nav-art{display:none}
.stage[data-page=home] nav a:hover{filter:none;transform:none}
.signature-window{display:none}
.stage[data-page=home] .signature-window{display:block;position:absolute;left:9px;top:49px;width:162px;height:57px;overflow:hidden;mix-blend-mode:multiply}
.signature{position:absolute;width:60px;height:102px;object-fit:contain;left:51px;top:-23px;transform:rotate(-90deg)}
.hero-name{left:48px;bottom:48px;width:418px;height:64px}
.hero-name img{left:-7px;top:-41.5px;filter:url(#red-logo)}
.gallery-controls button,.gallery-controls button:first-child,.gallery-controls button:last-child,.gallery-controls button:hover{transform:none}
.gallery-controls button:hover{filter:brightness(1.25)}
.gallery video{width:100%;height:100%;object-fit:contain;background:#080809}
.photo-main,.photo-prev,.photo-next{overflow:hidden}
.reference-photo{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;aspect-ratio:365 / 548;background-size:394.52055% 145.9854%;background-position:87.25581% 50%}
.phone-number{margin:0;user-select:text}
