*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030305;color:#e9e6e8;font-family:'Space Grotesk',sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}#space{position:fixed;inset:0;width:100%;height:100%;z-index:-2}body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse at 50% 45%,#1b1018,#070609 50%,#020203);pointer-events:none}.noise{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:.035;background-size:180px 180px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.loader{position:fixed;inset:0;background:#030305;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .8s,visibility .8s}.loader.done{opacity:0;visibility:hidden}.loader b{font:50px 'DM Serif Display';color:#ed2945}.loader div{width:180px;height:1px;background:#292329}.loader i{display:block;width:0;height:1px;background:#ed2945;animation:load 1s forwards}.loader small{font-size:11px;letter-spacing:3px;color:#8c848f}header{position:fixed;top:0;left:0;right:0;padding:25px 4.5vw;display:flex;justify-content:space-between;align-items:center;z-index:20}.brand{font:32px 'DM Serif Display';letter-spacing:-5px}.brand span{color:#ed2945}.status{font-size:11px;letter-spacing:2px;color:#8c848f;display:flex;align-items:center;gap:10px}.status i{width:5px;height:5px;border-radius:50%;background:#ed2945;box-shadow:0 0 10px #ed2945}.status span{margin-left:18px;color:#aaa}.status span:before{content:'LOCAL / ';color:#8c848f}#sound{background:none;border:0;font-size:11px;letter-spacing:2px;color:#8c848f}#sound b{color:#ed2945;margin-left:8px}nav{position:fixed;left:4.5vw;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:22px}nav:before{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:1px;background:#282329}nav a{position:relative;display:flex;align-items:center;gap:12px;color:#8c848f;font-size:11px;letter-spacing:1px;transition:.25s}nav a i{width:9px;height:9px;border-radius:50%;border:1px solid #50454f;background:#080609;z-index:1}nav a small{font-size:11px;color:#8c848f;order:-1}nav a.active,nav a:hover{color:#ed2945}nav a.active i{background:#ed2945;border-color:#ed2945;box-shadow:0 0 0 5px #ed29451c,0 0 15px #ed2945}nav a.active small{color:#ed2945}.hud{position:fixed;bottom:25px;left:4.5vw;right:4.5vw;display:flex;justify-content:space-between;z-index:15;font-size:11px;letter-spacing:1.5px;color:#8c848f;pointer-events:none}.screen{position:relative;min-height:100vh;min-height:100svh;padding:120px 12vw 80px 17vw;overflow:hidden;border-bottom:1px solid #ffffff09}.hero{height:100vh;height:100svh;min-height:680px;padding:0;display:flex;align-items:center;justify-content:center}.topline{position:absolute;top:17%;left:17vw;right:12vw;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:#8c848f}.hero-center{text-align:center;position:relative;z-index:2;margin-top:-1vh}.micro{font-size:11px;letter-spacing:4px;color:#ed2945;margin:0 0 24px}.hero h1{font:clamp(70px,12vw,170px)/.78 'DM Serif Display';letter-spacing:-7px;margin:0;text-shadow:0 12px 50px #000}.hero h1 span{display:block}.hero h1 em{display:block;font-style:normal;color:#ed2945;margin-left:8vw}.roles{display:flex;justify-content:center;gap:13px;align-items:center;flex-wrap:wrap;margin-top:30px;font-size:11px;letter-spacing:1.5px;color:#aaa}.roles b{font-size:11px;color:#ed2945}.hero-center button{margin-top:43px;background:transparent;border:0;border-bottom:1px solid #4a414b;padding:14px 0;display:inline-flex;gap:25px;letter-spacing:3px;font-size:11px;transition:.3s}.hero-center button:hover{color:#ed2945;border-color:#ed2945}.hero-center button span{color:#ed2945}.caption{position:absolute;bottom:24%;font:italic 22px 'DM Serif Display';color:#8c848f;line-height:1.2}.caption small{display:block;font:11px 'Space Grotesk';letter-spacing:2px;color:#ed2945;margin-bottom:12px}.caption.left{left:17vw}.caption.right{right:12vw;text-align:right}.bottom{position:absolute;bottom:30px;left:17vw;right:12vw;display:flex;align-items:center;gap:18px;color:#8c848f;font-size:11px;letter-spacing:2px}.bottom i{height:1px;width:90px;background:#302a31;position:relative}.bottom i:after{content:"";position:absolute;width:20px;height:1px;background:#ed2945;animation:scroll 2s infinite}.bottom span:last-child{margin-left:auto}.section-head{position:absolute;top:95px;left:17vw;right:12vw;display:flex;justify-content:space-between;color:#ed2945;font-size:11px;letter-spacing:2px}.section-head span:last-child{color:#8c848f}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center;min-height:68vh}.artifact-wrap{height:420px;position:relative;display:grid;place-items:center}.artifact{width:230px;height:320px;border:1px solid #4d3b47;background:linear-gradient(140deg,#1c141b,#050507 75%);position:relative;display:grid;place-items:center;transform:rotate(-7deg);box-shadow:30px 30px 0 #100c11,0 0 70px #a51d3014}.artifact:before,.artifact:after{content:"";position:absolute;background:#ed2945;opacity:.4}.artifact:before{width:1px;height:130%;left:50%}.artifact:after{height:1px;width:130%;top:50%}.arttop,.artbottom{position:absolute;font-size:11px;letter-spacing:2px;color:#8c848f}.arttop{top:15px;left:15px}.artbottom{bottom:15px;right:15px}.artifact-wrap>p{position:absolute;right:0;bottom:25px;font:italic 23px 'DM Serif Display';color:#8c848f;transform:rotate(-6deg)}h2{font:clamp(48px,6vw,88px)/.93 'DM Serif Display';letter-spacing:-2px;margin:0 0 25px}h2 em{font-weight:400;color:#ed2945}.copy>p:not(.micro),.skill-copy>p,.project-intro>p,.contact-copy>p{max-width:430px;font-size:13px;line-height:1.9;color:#b3adb5}.copy .dim{color:#8c848f}.link{display:inline-block;margin-top:20px;padding-bottom:10px;border-bottom:1px solid #ed294544;color:#ed2945;font-size:11px;letter-spacing:2px}.section-foot{position:absolute;bottom:28px;left:17vw;right:12vw;display:flex;justify-content:space-between;color:#8c848f;font-size:11px;letter-spacing:2px}.skills{min-height:max(100vh,640px);min-height:max(100svh,640px)}.skill-copy{position:relative;z-index:2}.constellation{position:absolute;right:5vw;top:14%;width:58vw;height:72vh;min-height:450px}.orbit{position:absolute;left:50%;top:50%;border:1px solid #8b293945;border-radius:50%;transform:translate(-50%,-50%)}.o1{width:75%;height:40%;transform:translate(-50%,-50%) rotate(-22deg)}.o2{width:90%;height:55%;transform:translate(-50%,-50%) rotate(38deg)}.o3{width:55%;height:82%;transform:translate(-50%,-50%) rotate(65deg)}.node{position:absolute;width:58px;height:58px;border:1px solid #513742;background:#070609;border-radius:50%;display:grid;place-items:center;transition:.3s;box-shadow:0 0 35px #000}.node:hover,.node.selected{border-color:#ed2945;box-shadow:0 0 30px #ed294533;transform:scale(1.12)}.node small{font-size:11px;color:#ed2945;letter-spacing:2px}.core{width:95px;height:95px;left:50%;top:50%;transform:translate(-50%,-50%);border-color:#ed2945;background:radial-gradient(#29101a,#050507 70%)}.core span{font:30px 'DM Serif Display'}.skill-info{position:absolute;right:0;bottom:0;width:260px;text-align:right}.skill-info small{font-size:11px;letter-spacing:2px;color:#ed2945}.skill-info h3{font:22px 'DM Serif Display';margin:8px 0}.skill-info p{font-size:12px;color:#8c848f;line-height:1.6}.project-intro{display:inline-block;vertical-align:top;width:32%;margin-right:5%}.project-list{display:inline-block;vertical-align:top;width:62%;margin-top:30px}.project{display:grid;grid-template-columns:25px 85px 1fr 25px;align-items:center;gap:20px;padding:18px 0;border-top:1px solid #ffffff17;transition:.3s}.project:nth-last-child(2){border-bottom:1px solid #ffffff17}.project:hover{padding-left:12px;border-color:#ed294566}.project>span:first-child{font-size:11px;color:#ed2945}.project-art{height:70px;border:1px solid #34262f;display:grid;place-items:center;background:radial-gradient(circle,#21101a,#070609 70%);font-size:27px;color:#ed2945;position:relative;overflow:hidden}.project-art:after{content:"";position:absolute;width:150%;height:1px;background:#ed294533;transform:rotate(-35deg)}.project small{font-size:11px;letter-spacing:2px;color:#ed2945}.project h3{font:24px 'DM Serif Display';font-weight:400;margin:6px 0}.project p{font-size:12px;line-height:1.6;color:#8c848f;margin:0}.project>b{color:#ed2945}.contact{display:flex;align-items:center}.contact-copy{margin-left:10%;position:relative;z-index:2}.contact-copy h2{font-size:clamp(70px,9vw,130px)}.mail{display:inline-block;margin-top:24px;border-bottom:1px solid #ed2945;padding-bottom:12px;font-size:13px}.signal{position:absolute;right:15%;top:25%;width:300px;height:300px;border:1px solid #ed29452b;border-radius:50%;display:grid;place-items:center;font:90px 'DM Serif Display';color:#ed2945;text-shadow:0 0 40px #ed294533;animation:spin 45s linear infinite}.signal:before,.signal:after{content:"";position:absolute;inset:-30px 25px;border:1px solid #ed29451b;border-radius:50%;transform:rotate(55deg)}.signal:after{inset:20px -45px;transform:rotate(-35deg)}.socials{position:absolute;bottom:105px;left:17vw;display:flex;gap:25px;flex-wrap:wrap}.socials a,footer{font-size:11px;letter-spacing:1.5px;color:#8c848f}.socials a:hover,footer a:hover{color:#ed2945}footer{position:absolute;bottom:28px;left:17vw;right:12vw;display:flex;justify-content:space-between;border-top:1px solid #ffffff12;padding-top:18px}
.cursor{display:none;position:fixed;left:0;top:0;width:25px;height:25px;border:1px solid #ed2945;border-radius:50%;pointer-events:none;z-index:40;transform:translate(-50%,-50%);transition:width .2s,height .2s}.cursor.hover{width:48px;height:48px;background:#ed294511}
@keyframes load{to{width:100%}}@keyframes scroll{0%{left:0}50%{left:70px}100%{left:0}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.screen{padding:110px 7vw 75px 13vw}.section-head,.section-foot{left:13vw;right:7vw}.topline,.bottom{left:13vw;right:7vw}.caption.left{left:13vw}.caption.right{right:7vw}.two-col{gap:4vw}.constellation{right:0;width:65vw}.project-intro{width:100%}.project-list{width:100%}.signal{right:2%;opacity:.5}.contact-copy{margin-left:0}}
@media(max-width:600px){header{padding:18px 6vw}.status{font-size:11px}.status span{display:none}nav{left:12px;gap:18px}nav a span{display:none}.screen{padding:100px 6vw 70px 15vw}.hero{padding:0}.topline{left:15vw;right:6vw;top:15%;font-size:11px}.hero h1{font-size:clamp(47px,13vw,78px);letter-spacing:-3px}.hero h1 em{margin-left:3vw}.roles{max-width:280px;margin:20px auto 0;font-size:11px;line-height:2}.caption{font-size:15px;bottom:24%}.caption.left{left:15vw}.caption.right{right:6vw}.bottom{left:15vw;right:6vw}.section-head{left:15vw;right:6vw;top:75px;font-size:11px}.two-col{display:block}.artifact-wrap{height:280px}.artifact{transform:scale(.72) rotate(-7deg)}.artifact-wrap>p{font-size:16px}.skills{min-height:900px}.constellation{top:42%;right:2vw;width:86vw;height:45vh;min-height:350px}.node{width:46px;height:46px}.core{width:72px;height:72px}.core span{font-size:22px}.skill-info{right:10%;bottom:-4%;width:210px}.project-intro{width:100%}.project-list{width:100%;margin-top:20px}.project{grid-template-columns:15px 50px 1fr 15px;gap:10px}.project-art{height:55px}.project h3{font-size:18px}.project p{font-size:11px}.project small{font-size:11px}.contact{min-height:850px}.contact-copy{margin:0}.contact-copy h2{font-size:68px}.signal{right:-25%;top:15%;opacity:.35;transform:scale(.65)}.socials{left:15vw;right:6vw;bottom:100px;gap:13px}.socials a{font-size:11px}footer{left:15vw;right:6vw;flex-wrap:wrap;gap:10px;font-size:11px}footer span:nth-child(2){display:none}}
/* Scene-based navigation layer */
.portal-dock{position:fixed;z-index:25;right:4.5vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:13px}
.portal{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#8c848f;font-size:11px;letter-spacing:2px;text-align:right;transition:.25s}
.portal i{width:7px;height:7px;border:1px solid #5c3b48;border-radius:50%;display:block;transition:.25s}
.portal.active,.portal:hover{color:#ed2945}.portal.active i,.portal:hover i{background:#ed2945;box-shadow:0 0 14px #ed2945;border-color:#ed2945}
.hud-mid{color:#c27b8d}
.scene-flash{position:fixed;inset:0;background:#ed2945;opacity:0;pointer-events:none;z-index:45}
.screen{transition:filter .5s}
.screen.scene-enter{animation:sceneEnter .8s cubic-bezier(.2,.8,.2,1)}
@keyframes sceneEnter{from{opacity:.35;filter:blur(8px);transform:translateY(18px) scale(.99)}to{opacity:1;filter:none;transform:none}}
@media(max-width:600px){.portal-dock{right:10px;gap:12px}.portal span{display:none}.portal i{width:8px;height:8px}.hud-mid{display:none}}

.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#ed2945;color:#030305;padding:10px 14px;font-size:12px;transition:top .2s}.skip:focus{top:12px}
a:focus-visible,button:focus-visible{outline:2px solid #ed2945;outline-offset:4px}
@media(hover:hover) and (pointer:fine){body,button{cursor:none}.cursor{display:block}}
@media(max-width:600px){.hud{font-size:11px;letter-spacing:1px}.hud #xy{display:none}.hud{justify-content:flex-start}.socials a,.status,footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.core:hover,.core.selected{transform:translate(-50%,-50%) scale(1.12)}
@media(hover:none){#xy{visibility:hidden}}

/* Hero extras */
.hero-sub{margin:22px auto 0;max-width:420px;font-size:13px;line-height:1.7;color:#b3adb5}
.hero-actions{display:flex;justify-content:center;align-items:center;gap:44px;flex-wrap:wrap}
.hero-center .cvlink{margin-top:43px;padding:14px 0;border-bottom:1px solid #4a414b;display:inline-flex;gap:25px;letter-spacing:3px;font-size:11px;transition:.3s}
.hero-center .cvlink:hover{color:#ed2945;border-color:#ed2945}.hero-center .cvlink span{color:#ed2945}
/* Profile photo in the artifact card */
.artifact{overflow:visible}
.artifact .photo{position:absolute;inset:0;overflow:hidden}.artifact img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.5);transform-origin:46% 20%;filter:grayscale(.3) contrast(1.05) brightness(.82)}
.artifact:before,.artifact:after{z-index:1}.arttop,.artbottom{z-index:2;color:#d8d0da;text-shadow:0 1px 8px #000}
/* The Path */
.path-list{margin-top:30px}
.step{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:20px 0;border-top:1px solid #ffffff17}
.step:last-of-type{border-bottom:1px solid #ffffff17}
.step time{font-size:11px;letter-spacing:2px;color:#ed2945;line-height:1.7}
.step small{font-size:11px;letter-spacing:2px;color:#8c848f}
.step h3{font:24px 'DM Serif Display';font-weight:400;margin:6px 0}
.step p{font-size:12px;line-height:1.7;color:#9a939c;margin:0;max-width:460px}
@media(max-width:600px){.hero-sub{max-width:280px;font-size:12px}.hero-actions{gap:26px}.hero-center .cvlink,.hero-center button{margin-top:26px}.step{grid-template-columns:1fr;gap:6px}.step h3{font-size:18px}}
.artifact-wrap>p{bottom:-18px;right:-14px}@media(max-width:600px){.artifact-wrap>p{bottom:-6px;right:0}}
.path-list{width:58%}.step{grid-template-columns:190px 1fr}@media(max-width:900px){.path-list{width:100%}}@media(max-width:600px){.step{grid-template-columns:1fr}}
@media(max-width:600px){#path{padding-bottom:130px}}

/* Project detail pages */
.detail{min-height:100vh}
.detail header{position:absolute}
.detail .noise{opacity:.03}
.project-detail-wrap{max-width:860px;margin:0 auto;padding:130px 24px 90px;position:relative;z-index:2}
.project-detail-back{display:inline-block;margin-bottom:30px;font-size:11px;letter-spacing:2px;color:#8c848f;transition:color .25s}
.project-detail-back:hover{color:#ed2945}
.project-detail-card{border:1px solid #ffffff17;background:linear-gradient(140deg,#1c141b99,#050507cc 75%);padding:clamp(24px,5vw,56px);box-shadow:0 0 70px #a51d3014}
.section-mini{font-size:11px;letter-spacing:3px;color:#ed2945;margin:0 0 22px}
.project-detail-card h1{font:clamp(40px,7vw,78px)/.98 'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-2px;margin:0 0 26px}
.project-detail-card h2{font:30px 'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:0;margin:38px 0 14px;color:#e9e6e8}
.project-detail-card p{font-size:14px;line-height:1.9;color:#b3adb5;max-width:640px}
.project-detail-card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.project-detail-card li{position:relative;padding-left:22px;font-size:14px;color:#cfc8d1}
.project-detail-card li:before{content:"✳";position:absolute;left:0;top:1px;font-size:11px;color:#ed2945}
.project-detail-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.project-detail-actions a{border:1px solid #4a414b;padding:14px 22px;font-size:11px;letter-spacing:2px;transition:.25s}
.project-detail-actions a:hover{border-color:#ed2945;color:#ed2945}
.project-detail-actions a.primary{background:#ed2945;border-color:#ed2945;color:#030305;font-weight:600}
.project-detail-actions a.primary:hover{background:#ff4a63;color:#030305}
@media(hover:hover) and (pointer:fine){body.detail,body.detail button{cursor:auto}}
@media(max-width:600px){.project-detail-wrap{padding-top:110px}.project-detail-card h2{font-size:24px}}
.project-detail-card ul+p{margin-top:26px}.section-mini{text-transform:uppercase}

/* ===================== Responsive layer ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
header{padding-left:max(4.5vw,env(safe-area-inset-left));padding-right:max(4.5vw,env(safe-area-inset-right))}
nav{left:max(4.5vw,calc(env(safe-area-inset-left) + 10px))}
.portal-dock{right:max(4.5vw,calc(env(safe-area-inset-right) + 10px))}
.hud-mid{transition:opacity .3s}body.away .hud-mid{opacity:0}

/* Skills: keep the constellation clear of the heading on laptops */
.skill-copy>p{max-width:min(430px,28vw)}

/* Mid-width screens: HUD shows only "SECTOR 0X", portal labels collapse to dots */
@media(max-width:1500px){.sname{display:none}}
@media(max-width:1180px){#xy{visibility:hidden}}
@media(max-width:1599px){.portal span{display:none}.portal-dock{gap:16px}}

/* Short laptop screens: stop the hero top line from colliding with the heading */
@media(max-height:760px){.topline{top:92px}.hero-center{margin-top:26px}}

/* ---- Compact mode: phones, tablets (portrait) and short landscape screens ---- */
@media(max-width:900px),(max-height:560px){
 .hud,.portal-dock,.caption,.hero .bottom{display:none}
 nav{gap:20px}
 nav a span{display:none}
 .section-head,.topline{white-space:nowrap}
 .section-head span:last-child,.topline span:last-child{display:none}
}
@media(max-width:900px){
 .hero{padding:0 5vw 0 14vw}
 .skills{min-height:0}
 .constellation{position:relative;right:auto;top:auto;width:100%;max-width:560px;height:min(86vw,420px);min-height:300px;margin:26px 0 130px auto}
 .skill-info{left:0;right:auto;top:100%;bottom:auto;margin-top:18px;text-align:left;width:min(100%,360px)}
 .skill-copy>p{max-width:430px}
}
@media(max-width:600px){
 .hero-actions{flex-direction:column;gap:0}
 .hero-center .cvlink,.hero-center button{margin-top:22px}
 .artifact-wrap{height:320px;margin-bottom:18px}
 .artifact{transform:translateY(-24px) scale(.72) rotate(-7deg)}
 .artifact-wrap>p{bottom:0;right:0}
 .contact-copy h2{font-size:clamp(44px,17vw,68px)}
}

/* ---- Short screens (landscape phones, small laptops) ---- */
@media(max-height:560px){
 .topline{display:none}
 .hero{height:auto;min-height:100vh;min-height:100svh;padding-top:56px;padding-bottom:40px}
 .hero h1{font-size:clamp(46px,14vh,92px)}
 .hero-sub{display:none}
 .hero-center .cvlink,.hero-center button{margin-top:18px}
 .micro{margin-bottom:14px}
 .two-col{min-height:0}
 .artifact-wrap{height:340px}
 .artifact{transform:scale(.85) rotate(-7deg)}
}
@media(max-height:700px){
 .contact{display:block;min-height:0;padding-top:120px;padding-bottom:28px}
 .contact .socials{position:static;margin-top:36px}
 .contact footer{position:static;margin-top:36px}
}

/* ---- Touch: bigger tap areas without changing the look ---- */
@media(pointer:coarse){
 nav a,#sound,.socials a,.link,.mail,footer a,.cvlink,.project-detail-back{position:relative}
 nav a:after,#sound:after,.socials a:after,.link:after,.mail:after,footer a:after,.cvlink:after,.project-detail-back:after{content:"";position:absolute;inset:-9px -8px}
}
@media(max-width:400px){.hero{padding-left:17vw;padding-right:4vw}}

/* Orbs ride their orbit: nodes live inside the rotated ellipse and counter-rotate to stay upright */
.orbit{pointer-events:none}
.orbit .node{pointer-events:auto;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s,1));font-size:14px;letter-spacing:.5px}
.orbit .node:hover,.orbit .node.selected{--s:1.12}
@media(max-width:600px){.orbit .node{font-size:12px;letter-spacing:0}}
.skill-copy{pointer-events:none}

/* Desktop skills layout: constellation sits between the text and the portal dock; info panel under it */
@media(min-width:901px){
 .skills{min-height:max(100vh,700px);min-height:max(100svh,700px)}
 .constellation{width:min(44vw,760px);height:56vh;min-height:450px;max-height:700px;right:calc(4.5vw + 34px)}
 .skill-info{left:auto;right:calc(100% + 28px);top:auto;bottom:0;margin:0;text-align:left;width:clamp(220px,24vw,340px)}
}
@media(min-width:1600px){.constellation{right:calc(4.5vw + 160px)}}

/* ===== Calm mode, moving orbs, skill ↔ project links ===== */
.hbtns{display:flex;align-items:center;gap:22px}
#calm{background:none;border:0;font-size:11px;letter-spacing:2px;color:#8c848f}
#calm b{color:#ed2945;margin-left:8px}
#calm[aria-disabled="true"]{opacity:.55}
@media(max-width:430px){.status{display:none}}
html.calm{scroll-behavior:auto}
html.calm *,html.calm *:before,html.calm *:after{animation:none!important;transition:none!important}
@media(pointer:coarse){#calm{position:relative}#calm:after{content:"";position:absolute;inset:-9px -8px}}

/* orbs: position comes from --x/--y (rest) plus --dx/--dy (orbit motion, set by script.js); hover scale uses the separate `scale` property */
.orbit .node{transition:border-color .3s,box-shadow .3s,scale .3s;transform:translate(var(--dx,0px),var(--dy,0px)) translate(-50%,-50%) rotate(var(--r));scale:var(--s,1)}

.skill-info .skill-used{margin:10px 0 0;font-size:11px;letter-spacing:1.5px;color:#8c848f;line-height:1.8}
.skill-info .skill-used:empty{display:none}
.skill-used a{color:#ed2945;border-bottom:1px solid #ed294555;margin-left:2px}
.skill-used a:hover{border-color:#ed2945}
.project.lit{border-top-color:#ed294599;background:linear-gradient(90deg,#ed294522,transparent 70%);box-shadow:inset 3px 0 0 #ed2945}
.project.lit h3{color:#fff}
.project-intro>.lit-note{margin:14px 0 0;font-size:11px;letter-spacing:1.5px;line-height:1.8;color:#8c848f}
.lit-note b{color:#ed2945;font-weight:600}
.lit-note button{margin-left:8px;background:none;border:0;border-bottom:1px solid #ed294555;color:#ed2945;font-size:11px;letter-spacing:2px;padding:0 0 2px}

@media(min-width:1181px){.skill-info{width:clamp(220px,30vw,420px)}}