:root{--bg:#080808;--bg-2:#0f0f0f;--fg:#fff;--muted:#fff;--line:#ffffff1a;--display:'Syne',sans-serif;--body:'Inter',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:6px}h1,h2,h3,h4,p{margin:0}::selection{background:#fff;color:#080808}.skip-link{position:fixed;top:-100px;background:#fff;color:#080808;padding:15px;z-index:100}.skip-link:focus{top:10px}.wrap{max-width:1280px;width:calc(100% - 128px);margin-inline:auto}.header{position:absolute;top:0;left:0;width:100%;padding:35px 64px;display:flex;justify-content:space-between;align-items:center;z-index:10;font-size:12px}.logo{font-family:'Outfit',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.7px}.logo span{color:#fff}.header>a:last-child{color:#fff;transition:color .2s}.header>a:last-child:hover{color:#fff}.intro{height:165svh}.intro-sticky{height:100svh;min-height:600px;position:sticky;top:0;overflow:hidden;perspective:1200px;display:grid;place-items:center}.intro-center{text-align:center;will-change:transform,opacity;width:100%;transform-style:preserve-3d}h1{font:800 clamp(70px,18.5vw,310px)/1 var(--display);letter-spacing:-.06em;padding-right:.06em}.intro-center p{color:#fff;font-size:14px;margin-top:30px;letter-spacing:.1px}.intro-bottom{position:absolute;bottom:38px;left:64px;right:64px;display:flex;justify-content:space-between;font-size:11px;color:#fff}.intro-bottom a{display:flex;gap:22px}.intro-bottom a span{color:#fff}h2{font-family:'Outfit',sans-serif;font-size:clamp(42px,5.4vw,80px);font-weight:500;line-height:1.08;letter-spacing:-.055em}h2 span{color:#fff}.about{display:grid;grid-template-columns:1fr 1.2fr;gap:90px;padding-block:120px 150px}.about-identity{display:flex;align-items:center;gap:15px;margin-top:35px;font:500 19px 'Outfit',sans-serif;color:#fff}.about-identity img{width:48px;height:48px;border-radius:50%;object-fit:cover;filter:grayscale(1)}.about-copy>p{font-size:16px;line-height:1.95;color:#fff;max-width:620px}.about-link{display:inline-flex;gap:35px;font-size:12px;margin-top:32px;padding-bottom:10px;border-bottom:1px solid #ffffff30}.about-link span{color:#fff}.about-link:hover{border-color:#fff}.projects-empty{font-size:13px;color:#fff;padding:30px 0;border-top:1px solid var(--line)}.projects{padding-block:100px 150px}.projects h2{margin-bottom:65px;font-size:clamp(36px,4vw,60px)}.project{padding:35px 0;border-top:1px solid var(--line);display:flex;gap:55px;align-items:center}.project-image{width:45%;height:290px;border-radius:6px;overflow:hidden;flex-shrink:0;background:#151515}.project-image img{width:100%;height:100%;object-fit:cover}.project-copy{max-width:550px}.project .project-title{font:500 30px 'Outfit',sans-serif;letter-spacing:-.8px}.project p{font-size:13px;line-height:1.8;color:#fff;margin-top:20px}.project-links{display:flex;gap:28px;margin-top:25px;font-size:11px}.project-links a{padding-bottom:6px;border-bottom:1px solid #ffffff40}.activity{height:200svh;background:#0c0c0c}.activity-sticky{position:sticky;top:0;height:100svh;min-height:720px;padding-block:70px;display:flex;flex-direction:column;justify-content:center}.activity-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:45px;gap:30px}.activity-heading>a{font-size:12px;color:#fff;padding-bottom:7px}.skyline-panel{position:relative;background:#101010;border:0;border-radius:8px;overflow:hidden}.skyline-toolbar,.skyline-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 26px;font-size:11px;color:#fff}.view-toggle{display:flex;gap:20px}.view-toggle button{border:0;background:none;color:#fff;padding:5px 0;font-size:11px;cursor:pointer;border-bottom:1px solid transparent}.view-toggle button[aria-pressed=true]{color:#fff;border-color:#fff}#skyline{display:block;width:100%;height:340px;touch-action:pan-y}.skyline-bottom{font-size:10px;border:0;padding-block:20px;flex-wrap:wrap}.skyline-tooltip{position:absolute;pointer-events:none;background:#eee;color:#111;padding:10px 12px;border-radius:4px;font-size:11px;display:none;z-index:2;max-width:245px}.skyline-panel noscript p{padding:20px;font-size:12px}.connect{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px;padding-block:170px}.social-links a{display:flex;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line);font-size:17px}.social-links a span:last-child{color:#fff;transition:transform .2s}.social-links a:hover span:last-child{transform:translate(3px,-3px);color:#fff}.footer{padding:55px 64px 27px;background:#0f0f0f;color:#fff;border-radius:28px 28px 0 0;margin:30px 10px 0;border-top:1px solid #ffffff1a}.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff;font-size:11px}.footer-top p{font:400 22px 'Outfit',sans-serif;color:#fff;letter-spacing:-.6px}.footer-wordmark{display:block;text-align:center;font:800 clamp(70px,20vw,340px)/1.2 var(--display);letter-spacing:-.065em;padding-right:.065em;margin-block:55px 35px;color:#fff}.footer-bottom{padding-top:25px;border-top:1px solid var(--line);font-size:10px}.reveal{opacity:1}.js-motion .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}.js-motion .reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.header{padding-inline:32px}.intro-bottom{left:32px;right:32px}.about{gap:45px}.connect{gap:45px}.footer{padding-inline:32px}}
@media(max-width:650px){.wrap{width:calc(100% - 40px)}.header{padding:26px 20px}.header>a:last-child{font-size:11px}.logo{font-size:21px}.intro{height:140svh}.intro-sticky{min-height:530px}h1{font-size:19vw}.intro-center p{font-size:12px;margin-top:25px}.intro-bottom{left:20px;right:20px;bottom:30px;font-size:9px}.intro-bottom a{gap:10px}h2{font-size:42px}.about{grid-template-columns:1fr;gap:30px;padding-block:70px 90px}.about-identity{margin-top:25px;font-size:17px}.about-copy>p{font-size:13px;line-height:1.9}.about-link{margin-top:25px;font-size:11px}.projects{padding-block:70px 90px}.projects h2{margin-bottom:35px}.project{flex-direction:column;align-items:stretch;gap:25px}.project-image{width:100%;height:230px}.project .project-title{font-size:26px}.project p{font-size:12px}.activity{height:180svh}.activity-sticky{min-height:620px;padding-block:40px}.activity-heading{margin-bottom:30px;gap:15px}.activity-heading h2{font-size:37px}.activity-heading>a{font-size:10px;white-space:nowrap}.skyline-toolbar{padding:17px 14px;font-size:9px}.view-toggle{gap:15px}.view-toggle button{font-size:10px}#skyline{height:290px}.skyline-bottom{padding:17px 14px;font-size:9px;line-height:1.6}.skyline-bottom>span:last-child{max-width:105px;text-align:right}.connect{grid-template-columns:1fr;gap:35px;padding-block:90px}.social-links a{font-size:15px;padding-block:19px}.footer{padding:35px 20px 22px;margin:24px 8px 0;border-radius:22px 22px 0 0}.footer-top{font-size:9px}.footer-top p{font-size:18px}.footer-wordmark{font-size:20vw;margin-block:45px 30px}.footer-bottom{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro,.activity{height:auto}.intro-sticky,.activity-sticky{position:relative}.js-motion .reveal{opacity:1;transform:none;transition:none}.intro-center{will-change:auto}}

/* The original profile-led hero, within the current scroll scene. */
.intro-center{max-width:920px;padding:100px 24px 90px}
.intro-avatar{display:block;width:140px;height:140px;margin:0 auto 48px;border-radius:50%;border:3px solid var(--line);object-fit:cover;box-shadow:0 0 40px #ffffff1a}
.intro-center h1{font-size:clamp(60px,10vw,136px);line-height:.9;letter-spacing:-.045em}
.intro-center p{max-width:520px;margin:28px auto 24px;font-size:17px;line-height:1.75;letter-spacing:0}
@media(max-width:650px){.intro-avatar{width:120px;height:120px;margin-bottom:36px}.intro-center p{font-size:14px}}

/* Icons and a wordmark that stays inside the footer at every viewport. */
.icon{width:14px;height:14px;display:inline-block;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}.intro-bottom a span{display:inline-flex}.about-link span{display:inline-flex}.activity-heading>a,.project-links a{display:inline-flex;align-items:center;gap:7px}.social-links a span:last-child{display:inline-flex;align-items:center}.footer{overflow:hidden;container-type:inline-size}.footer-wordmark{font-size:min(18cqw,340px);width:100%;white-space:nowrap;overflow:visible;line-height:1.3;letter-spacing:-.075em;padding:0;margin-block:55px 35px}.footer-top>a{display:inline-flex;align-items:center;gap:8px}.icon-check{width:30px;height:30px;stroke-width:1.2}
@media(max-width:650px){.footer-wordmark{font-size:18cqw;margin-block:45px 30px}}


.footer .footer-wordmark{color:#fff}.footer a:focus-visible{outline-color:#fff}.footer-bottom{border-top-color:var(--line)}

/* Project Showcase: the list stays quiet; the image appears beside the pointer. */
.project{position:relative;border-bottom:1px solid var(--line);transition:background-color .25s ease}.project+.project{border-top:0}.project-copy{max-width:650px;width:100%}.project-image{order:2;border:1px solid #ffffff40;background:#101010}.project-image img{filter:grayscale(1)}.project:focus-within{background:#ffffff04}
@media(hover:hover) and (pointer:fine){
  .project{padding:38px 14px;margin-inline:-14px}.project:hover{background:#ffffff04}.project-image{position:fixed;top:0;left:0;width:min(310px,calc(100vw - 36px));height:auto;aspect-ratio:16/9;max-height:calc(100vh - 36px);margin:0;z-index:50;border-radius:7px;opacity:0;pointer-events:none;box-shadow:0 20px 60px #0008;transform:translate3d(var(--preview-x,0px),var(--preview-y,0px),0) translate(-50%,-50%) rotate(var(--preview-tilt,-4deg)) scale(.86);transition:opacity .22s ease,scale .3s ease;scale:.9;will-change:transform,opacity}.project.preview-open .project-image{opacity:1;scale:1}.project-image img{object-fit:contain;object-position:center;transform:none;display:block}.project:hover .project-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
}
@media(hover:none),(pointer:coarse){.project{flex-direction:column;align-items:stretch}.project-image{position:relative;width:100%;height:auto;aspect-ratio:16/9;max-width:620px;margin-top:10px}.project-image img{object-fit:contain;object-position:center;display:block}}
@media(prefers-reduced-motion:reduce){.project,.project-image{transition:none}.project-image{will-change:auto}}

.skyline-legend{display:flex;align-items:center;gap:9px;margin-left:auto;white-space:nowrap;font-size:10px;color:inherit}.legend-scale{display:inline-flex;gap:4px}.legend-scale i{display:block;width:10px;height:10px;border-radius:2px;background:#262626}.legend-scale i:nth-child(2){background:#999}.legend-scale i:nth-child(3){background:#b9b9b9}.legend-scale i:nth-child(4){background:#d5d5d5}.legend-scale i:nth-child(5){background:#f0f0f0}
@media(max-width:650px){.skyline-legend{font-size:9px;gap:7px}.skyline-bottom{gap:14px}.legend-scale{gap:3px}.legend-scale i{width:9px;height:9px}}

.skyline-bottom{padding:18px 32px 20px;gap:20px;line-height:1.6;align-items:center}.skyline-toolbar{padding:24px 36px;line-height:1.6}.skyline-legend{gap:10px}
@media(max-width:650px){.skyline-bottom{padding:18px 22px 20px;gap:16px}.skyline-toolbar{padding:20px 22px;gap:16px}.skyline-legend{gap:8px}}

/* Reserve space for both text rows; let the canvas fit the sticky scene. */
.activity-heading{flex-shrink:0}.skyline-panel{display:flex;flex-direction:column;flex:1;min-height:0;max-height:560px}.skyline-toolbar,.skyline-bottom{flex:0 0 auto}.skyline-panel #skyline{flex:1 1 0;min-height:120px;height:0}

.footer-legal{display:flex;flex-wrap:wrap;gap:20px}.footer-legal a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:650px){.footer-bottom{flex-wrap:wrap;row-gap:16px}.footer-legal{gap:18px}}

/* The interactive hero is projected onto the real 3D display. */
.intro{height:320svh}.intro-sticky{min-height:0;height:100svh;isolation:isolate;background:#080808;perspective:none}
.mac-hero{position:absolute;inset:0;background:#080808}
.mac-desktop{position:absolute;inset:0;display:grid;place-items:center;background:#080808}
.mac-desktop .intro-center{width:100%;max-width:920px;transform:none;opacity:1;will-change:auto}
.mac-renderer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mac-3d .mac-hero{inset:auto;top:0;left:0;width:1600px;height:1000px;border-radius:29px;transform-origin:0 0;overflow:hidden;backface-visibility:hidden;will-change:transform;pointer-events:none}
.mac-3d .mac-desktop{inset:auto;top:50%;left:50%;width:100vw;height:100svh;transform:translate(-50%,-50%) scale(var(--hero-fit,1));transform-origin:center;pointer-events:auto}
.mac-scroll-hint{position:absolute;bottom:38px;left:0;width:100%;text-align:center;color:#bdbdbd;font-size:12px;letter-spacing:.03em;opacity:var(--hint-opacity,0);pointer-events:none}
.mac-scroll-hint span{display:block;margin-top:12px;font-size:20px}
@media(max-width:650px){.intro{height:290svh}.mac-desktop .intro-center{padding-inline:20px}.mac-scroll-hint{bottom:28px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.intro{height:auto}.intro-sticky{position:relative}.mac-renderer,.mac-scroll-hint{display:none}.mac-3d .mac-hero{inset:0;width:100%;height:100%;transform:none!important;opacity:1!important}.mac-3d .mac-desktop{inset:0;width:100%;height:100%;transform:none}}

.mac-3d .mac-hero::after{content:"";position:absolute;top:-1px;left:50%;width:167px;height:36px;transform:translateX(-50%);border-radius:0 0 9px 9px;background:radial-gradient(circle at 50% 48%,#293342 0 3px,#101114 4px 7px,transparent 8px),#080808;opacity:var(--notch-opacity,1);pointer-events:none}
@media(prefers-reduced-motion:reduce){.mac-3d .mac-hero::after{display:none}}

/* NRW Roleplay leads the portfolio; small utilities stay compact below it. */
.project-group+.project-group{margin-top:64px}
.project-group-title{font:500 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#bdbdbd;margin-bottom:24px}
.project-group-featured .project{gap:48px;padding:32px 0;margin:0;align-items:center;border-top:0;border-bottom:1px solid var(--line);background:none}
.project-group-featured .project-copy{flex:1;min-width:0}
.project-group-featured .project-title{font-size:clamp(34px,4.2vw,56px);letter-spacing:-.04em;line-height:1.1}
.project-group-featured .project p{font-size:15px;line-height:1.85}
.project-group-featured .project-image{position:relative;inset:auto;order:2;width:48%;height:auto;aspect-ratio:16/10;max-height:none;margin:0;opacity:1;scale:1;transform:none;transition:none;will-change:auto;box-shadow:none;border:1px solid var(--line);border-radius:12px}
.project-group-featured .project-image img{object-fit:contain;display:block}
.project-group-featured .project:hover .project-title{text-decoration:none}
.project-group-tools .project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.project-group-tools .project{display:block;min-width:0;padding:24px;margin:0;background:#0f0f0f;border:1px solid var(--line);border-radius:12px}
.project-group-tools .project-title{font-size:22px;letter-spacing:-.5px}
.project-group-tools .project p{font-size:12px;line-height:1.8;margin-top:14px;color:#c4c4c4}
.project-group-tools .project-links{margin-top:20px}
.project-group-tools .project-image{display:none}
@media(hover:hover) and (pointer:fine){.project-group-tools .project-image{display:block}}
@media(max-width:650px){.project-group+.project-group{margin-top:40px}.project-group-title{font-size:11px;margin-bottom:16px}.project-group-featured .project{gap:24px;padding:0 0 28px;flex-direction:column;align-items:stretch}.project-group-featured .project-image{width:100%;order:0}.project-group-featured .project-title{font-size:36px}.project-group-featured .project p{font-size:13px}.project-group-tools .project-list{grid-template-columns:1fr;gap:12px}.project-group-tools .project{padding:20px}.project-group-tools .project-title{font-size:20px}}