/* ===== Fonts ===== */
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Unbounded";src:url("../fonts/unbounded-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

/* ===== Tokens ===== */
:root{
  --void:#070A14; --orbit:#0E1324; --star:#EEF0FF; --dust:#8C92AE;
  --ion:#5CF2FF; --nebula:#B865FF; --flare:#FF5CA8;
  --text-2:#C3C8DF;
  --line:rgba(238,240,255,.12);
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --gutter:clamp(20px,5vw,96px);
  --maxw:1240px;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--star);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--ion);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip-link{position:absolute;left:16px;top:-60px;z-index:3000;background:var(--star);color:var(--void);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:16px}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.site-header,main,.site-footer{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ===== Nebula (slow CSS drift behind the canvas) ===== */
.nebula{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 70% 25%,rgba(184,101,255,.13),transparent 70%),
             radial-gradient(closest-side at 22% 78%,rgba(92,242,255,.07),transparent 70%),
             radial-gradient(closest-side at 50% 50%,rgba(255,92,168,.04),transparent 70%);
  animation:nebula-drift 60s ease-in-out infinite alternate}
@keyframes nebula-drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
#sky{z-index:1}
.site-header,main,.site-footer{z-index:2}

/* ===== Loader ===== */
.ld{display:none}
html.js .ld{display:flex;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center;pointer-events:none}
html.js:not(.loaded) .site-header,html.js:not(.loaded) main,html.js:not(.loaded) .site-footer{opacity:0;animation:failsafe-show 0s 7s forwards}
html.js:not(.loaded) .ld{animation:failsafe-hide 0s 7s forwards}
@keyframes failsafe-show{to{opacity:1}}
@keyframes failsafe-hide{to{opacity:0;visibility:hidden}}
html.loaded .site-header,html.loaded main,html.loaded .site-footer{opacity:1;transition:opacity .9s ease .1s}
html.js.loaded .ld{opacity:0;transition:opacity .45s ease}
.ld-nebula{position:absolute;inset:-20%;background:radial-gradient(closest-side at 38% 42%,rgba(184,101,255,.16),transparent 70%),radial-gradient(closest-side at 64% 58%,rgba(92,242,255,.11),transparent 70%);filter:blur(10px);animation:ld-drift 9s ease-in-out infinite alternate}
.ld-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3.4vh,36px);width:min(520px,82vw);margin-top:-2vh}
.ld-logo-wrap{position:relative;width:clamp(200px,26vw,320px);aspect-ratio:1;animation:ld-float 4.2s ease-in-out infinite}
.ld-logo{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;animation:ld-in 1s cubic-bezier(.2,.8,.2,1) both,ld-glow 2.6s ease-in-out infinite 1s}
.ld-halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(184,101,255,.22),rgba(92,242,255,.08) 55%,transparent 72%);animation:ld-pulse 2.6s ease-in-out infinite}
.ld-ring{position:absolute;inset:-9%;border-radius:50%;border:1px solid transparent;background:conic-gradient(from 0deg,transparent 0 62%,rgba(92,242,255,.9) 78%,rgba(184,101,255,.9) 90%,transparent) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ld-spin 2.2s linear infinite;opacity:.85}
.ld-meta{width:100%;display:flex;justify-content:space-between;align-items:baseline;font-size:14px;letter-spacing:.04em;color:rgba(238,240,255,.65);font-variant-numeric:tabular-nums}
.ld-pct{color:var(--star);font-size:15px}
.ld-track{position:relative;width:100%;height:4px;border-radius:999px;background:rgba(238,240,255,.1);margin-top:-14px}
.ld-bar{position:absolute;left:0;top:0;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--ion),#5CA7FF 45%,var(--nebula) 80%,var(--flare));box-shadow:0 0 12px rgba(92,242,255,.55),0 0 26px rgba(184,101,255,.35)}
.ld-bar::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 22px var(--nebula),0 0 40px var(--ion)}
.ld-flash{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.55),rgba(184,101,255,.18) 30%,transparent 60%);opacity:0}
.ld.is-done .ld-flash{animation:ld-flash .7s ease-out forwards}
.ld.is-done .ld-logo-wrap{animation:ld-out .6s cubic-bezier(.5,0,.2,1) forwards}
.ld.is-done .ld-meta,.ld.is-done .ld-track{transition:opacity .3s;opacity:0}
@keyframes ld-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes ld-in{from{opacity:0;transform:scale(.6);filter:blur(12px)}to{opacity:1;transform:none}}
@keyframes ld-glow{0%,100%{filter:drop-shadow(0 0 14px rgba(92,242,255,.3)) drop-shadow(0 0 36px rgba(184,101,255,.2))}50%{filter:drop-shadow(0 0 24px rgba(92,242,255,.55)) drop-shadow(0 0 60px rgba(184,101,255,.4))}}
@keyframes ld-pulse{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes ld-spin{to{transform:rotate(360deg)}}
@keyframes ld-drift{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(2%,1.5%,0) scale(1.08)}}
@keyframes ld-flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes ld-out{to{transform:scale(1.35);opacity:0;filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){.ld *,.nebula{animation:none!important}html.loaded main,html.loaded .site-header,html.loaded .site-footer{transition:none}}

/* ===== Utilities ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
section[id]{scroll-margin-top:84px}

/* ===== Navigation ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background-color .3s ease,backdrop-filter .3s ease}
.site-header.is-scrolled{background:rgba(7,10,20,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:24px;min-height:72px}
.nav-logo img{height:40px;width:auto;display:block}
@media (max-width:520px){.nav-logo img{height:44px}}
.nav-menu{margin-left:auto;display:flex;align-items:center;gap:32px}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.nav-links a{text-decoration:none;color:var(--text-2);font-weight:500;font-size:16px;padding:6px 0;transition:color .2s}
.nav-links a:hover{color:var(--star)}
.nav-cv{text-decoration:none;font-weight:600;font-size:15px;padding:9px 18px;border-radius:999px;border:1px solid rgba(92,242,255,.55);color:var(--ion);transition:background-color .2s,color .2s}
.nav-cv:hover{background:var(--ion);color:var(--void)}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:rgba(14,19,36,.6);color:var(--star);cursor:pointer;position:relative}
.nav-toggle-bars,.nav-toggle-bars::before{position:absolute;left:12px;right:12px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,top .25s ease}
.nav-toggle-bars{top:17px}
.nav-toggle-bars::before{content:"";left:0;right:0;top:8px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:rotate(-90deg)}
.nav-extra,.nav-cv-pre,.nav-sub,.nav-star,.nav-const,.nav-mark{display:none}
@media (max-width:860px){
  .nav-toggle{display:block;position:relative;z-index:2;transition:border-color .3s,box-shadow .3s,transform .5s cubic-bezier(.2,.7,.2,1)}
  .nav-open .nav-toggle{border-color:var(--ion);box-shadow:0 0 18px -2px rgba(92,242,255,.7);transform:rotate(180deg)}
  .nav-logo{position:relative;z-index:2}
  /* Full-screen menu: opens as a circle from the button while the sky jumps to hyperspace behind it. */
  .nav-menu{position:fixed;inset:0;z-index:1;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(104px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;
    background:radial-gradient(100% 55% at 100% 0%,rgba(184,101,255,.30),transparent 65%),radial-gradient(90% 50% at 0% 100%,rgba(92,242,255,.18),transparent 60%),radial-gradient(70% 60% at 50% 45%,rgba(7,10,20,.15),rgba(7,10,20,.72));
    clip-path:circle(0px at calc(100% - var(--gutter) - 22px) 36px);visibility:hidden;
    transition:clip-path .55s cubic-bezier(.7,0,.3,1),visibility 0s .55s}
  .nav-open .nav-menu{clip-path:circle(150vmax at calc(100% - var(--gutter) - 22px) 36px);visibility:visible;transition:clip-path .75s cubic-bezier(.7,0,.2,1)}
  .nav-open main,.nav-open .site-footer,.nav-open footer{visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s .25s}
  main,footer{transition:opacity .4s ease .2s}
  .nav-mark{display:block;position:absolute;right:-18%;bottom:6%;width:78%;max-width:420px;height:auto;opacity:0;transform:rotate(-14deg) scale(.9);pointer-events:none;transition:opacity 1s ease .3s,transform 1.4s cubic-bezier(.2,.7,.2,1) .2s}
  .nav-open .nav-mark{opacity:.07;transform:rotate(-8deg) scale(1)}
  .nav-const{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .nav-const path{fill:none;stroke:url(#const-grad);stroke:var(--ion);stroke-width:1.2;stroke-opacity:.55;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(92,242,255,.6))}
  .nav-links{position:relative;flex-direction:column;gap:6px;margin:auto 0;padding-left:34px}
  .nav-links li{position:relative;margin-left:var(--x,0);opacity:0;transform:translateY(22px);filter:blur(6px);
    transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),filter .5s ease;transition-delay:calc(.25s + var(--i) * .07s)}
  .nav-links li:nth-child(1){--x:0px}.nav-links li:nth-child(2){--x:38px}.nav-links li:nth-child(3){--x:10px}.nav-links li:nth-child(4){--x:50px}.nav-links li:nth-child(5){--x:20px}
  .nav-open .nav-links li{opacity:1;transform:none;filter:none}
  .nav-star{display:block;position:absolute;left:-30px;top:clamp(19px,5.6vw,29px);width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--star);box-shadow:0 0 8px 1px rgba(238,240,255,.6);transition:background-color .25s,box-shadow .25s,transform .25s}
  .nav-star::before,.nav-star::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,currentColor,transparent);color:var(--ion);opacity:0;transition:opacity .25s}
  .nav-star::before{width:34px;height:1px;transform:translate(-50%,-50%)}
  .nav-star::after{width:1px;height:34px;transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,currentColor,transparent)}
  .nav-links a{display:block;padding:4px 0;text-decoration:none;font-family:var(--display);font-weight:800;font-size:clamp(36px,11vw,58px);line-height:1.05;letter-spacing:-.02em;color:var(--star)}
  .nav-label{display:block;background:linear-gradient(90deg,var(--ion),var(--nebula) 55%,var(--flare)) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;transition:color .3s,background-position .6s}
  .nav-sub{display:block;margin-top:4px;font-family:var(--sans,"Instrument Sans"),system-ui,sans-serif;font-weight:500;font-size:14px;letter-spacing:.01em;color:var(--dust);transition:color .3s}
  .nav-links li:hover .nav-label,.nav-links a:focus-visible .nav-label{color:transparent;background-position:100% 0}
  .nav-links li:hover .nav-sub,.nav-links a:focus-visible .nav-sub{color:var(--text-2)}
  .nav-links li:hover .nav-star,.nav-links li:focus-within .nav-star{background:var(--ion);transform:scale(1.3);box-shadow:0 0 14px 4px rgba(92,242,255,.8)}
  .nav-links li:hover .nav-star::before,.nav-links li:hover .nav-star::after,.nav-links li:focus-within .nav-star::before,.nav-links li:focus-within .nav-star::after{opacity:1}
  .nav-links a:focus-visible{outline:none}
  .nav-cv{position:relative;overflow:hidden;display:block;text-align:center;margin-top:40px;padding:17px;font-size:17px;background:var(--ion);color:var(--void);border-color:var(--ion);box-shadow:0 10px 40px -10px rgba(92,242,255,.75)}
  .nav-cv::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:cv-shine 3.2s ease-in-out 1.2s infinite}
  @keyframes cv-shine{0%,60%{left:-60%}100%{left:130%}}
  .nav-cv-pre{display:inline}
  .nav-extra{display:flex;justify-content:center;gap:28px;margin-top:20px}
  .nav-extra a{color:var(--text-2);font-weight:500;text-decoration:none;padding:8px 2px;border-bottom:1px solid var(--line)}
  .nav-extra a:hover{color:var(--star)}
  .nav-cv,.nav-extra{opacity:0;transform:translateY(16px);transition:opacity .5s ease .65s,transform .6s cubic-bezier(.2,.7,.2,1) .65s}
  .nav-open .nav-cv,.nav-open .nav-extra{opacity:1;transform:none}
  html.nav-lock,html.nav-lock body{overflow:hidden}
  .nav-open .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;box-shadow:none} /* a filter would trap the fixed menu inside the header */
}
@media (max-width:860px) and (max-height:600px){.nav-menu{padding-top:84px}.nav-links a{font-size:28px}.nav-sub{display:none}.nav-star{top:17px}.nav-cv{margin-top:18px}}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.nav-menu,.nav-open .nav-menu,.nav-links li,.nav-cv,.nav-extra,.nav-mark,.nav-toggle{transition:none}.nav-links li{filter:none}.nav-cv::after{animation:none;display:none}.nav-open .nav-toggle{transform:none}}

/* ===== Hero ===== */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 80px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,96px);width:100%}
.hero h1{font-size:clamp(44px,6.2vw,100px);line-height:.92;letter-spacing:-.02em}
.hero-line{display:block}
.hero-role{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,22px);color:var(--ion);margin-top:28px;line-height:1.35}
.hero-intro{font-size:clamp(17px,1.4vw,20px);color:var(--text-2);max-width:34em;margin-top:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:17px;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.btn-solid{background:var(--star);color:var(--void)}
.btn-solid:hover{background:var(--ion);box-shadow:0 0 28px rgba(92,242,255,.35)}
.btn-ghost{border:1px solid rgba(238,240,255,.35);color:var(--star)}
.btn-ghost:hover{border-color:var(--ion);color:var(--ion)}
.hero-portrait{position:relative;justify-self:center;width:min(340px,calc(100% - 120px));aspect-ratio:1;isolation:isolate}
/* Planet: atmospheric glow, sun-lit rim, terminator shadow */
.planet{position:absolute;inset:0;z-index:2;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(92,242,255,.55),0 0 28px 4px rgba(92,242,255,.35),0 0 90px 24px rgba(184,101,255,.30),0 0 160px 50px rgba(92,242,255,.08)}
.planet::before{content:"";position:absolute;inset:-9%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,transparent 55%,rgba(92,242,255,.22) 60%,rgba(184,101,255,.16) 66%,transparent 72%)}
.planet img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.planet::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.22),transparent 42%),radial-gradient(circle at 78% 82%,rgba(7,10,20,.6),transparent 58%);
  box-shadow:inset -22px -28px 46px rgba(7,10,20,.55),inset 8px 10px 22px rgba(92,242,255,.28)}
/* Tilted ring: back half behind the planet, front half over it */
.ring,.orbit{position:absolute;left:50%;top:66%;width:150%;height:150%;margin:-75% 0 0 -75%;transform:rotate(-12deg) scaleY(.22);pointer-events:none}
.ring span{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(92,242,255,.55);box-shadow:0 0 18px rgba(92,242,255,.35),inset 0 0 18px rgba(184,101,255,.3)}
.ring--back{z-index:1}
.ring--front{z-index:3}
.ring--front span{clip-path:inset(50% 0 0 0);opacity:.75}
/* Moons ride the ring; z-index flips so they pass behind the planet */
.orbit{z-index:4;animation:orbit-z 26s linear infinite}
.orbit--b{animation-duration:38s;animation-delay:-21s}
.orbit .arm{position:absolute;inset:0;animation:spin 26s linear infinite}
.orbit--b .arm{animation-duration:38s;animation-delay:-21s}
.moon{position:absolute;right:-6px;top:calc(50% - 6px);width:12px;height:12px;border-radius:50%;animation:counter 26s linear infinite}
.orbit--b .moon{width:8px;height:8px;right:-4px;top:calc(50% - 4px);animation-duration:38s;animation-delay:-21s}
.moon--ion{background:var(--ion);box-shadow:0 0 14px var(--ion)}
.moon--nebula{background:var(--nebula);box-shadow:0 0 12px var(--nebula)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes counter{from{transform:rotate(0) scaleY(4.5455)}to{transform:rotate(-360deg) scaleY(4.5455)}}
@keyframes orbit-z{0%,49.99%{z-index:4}50%,100%{z-index:1}}
@media (prefers-reduced-motion:reduce){
  .orbit,.orbit .arm,.moon{animation:none}
  .orbit--a .arm{transform:rotate(40deg)}.orbit--a .moon{transform:rotate(-40deg) scaleY(4.5455)}
  .orbit--b .arm{transform:rotate(150deg)}.orbit--b .moon{transform:rotate(-150deg) scaleY(4.5455)}
}
@media (max-width:767px){
  .hero{padding-top:104px;align-items:flex-start}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-portrait{order:-1;justify-self:start;width:180px;margin:28px 0 8px 52px}
  .hero h1{font-size:clamp(36px,12.4vw,72px)}
  .hero-actions .btn{flex:1 1 220px}
}

/* ===== Section headings ===== */
.section-title{font-size:clamp(36px,5vw,64px);line-height:1}
section.about,section.career,section.work,section.skills,section.contact{padding:clamp(80px,11vw,160px) 0 0}

/* ===== About ===== */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,5vw,80px);align-items:start}
.about-bio{display:grid;gap:18px;max-width:38em;color:var(--text-2);font-size:clamp(17px,1.35vw,19px)}
.about-bio p:first-child{color:var(--star)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}

/* ===== Interest panels (glide right on scroll) ===== */
/* Interests: a compact carousel. Swipe on phones (next card peeks in), arrows and dots everywhere. */
.int-pin{position:relative;margin-top:clamp(48px,6vw,80px)}
/* Scroll mode: the carousel holds in place while page scroll slides the cards; it lets go after the last card. */
.int-pin.is-pinned .int-stage{position:sticky}
.int-pin.is-pinned .int-scroller{overflow-x:hidden;scroll-snap-type:none;touch-action:pan-y}
.int-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.int-title{font-family:var(--display);font-weight:600;font-size:17px;color:var(--star)}
.int-arrows{display:none;gap:10px}
html.js .int-arrows{display:flex}
.int-arrows button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(92,242,255,.45);background:rgba(14,19,36,.7);color:var(--ion);cursor:pointer;transition:background-color .2s,color .2s,opacity .2s,border-color .2s}
.int-arrows svg{width:20px;height:20px}
.int-arrows button:hover:not(:disabled){background:var(--ion);color:var(--void)}
.int-arrows button:focus-visible{outline:2px solid var(--ion);outline-offset:3px}
.int-arrows button:disabled{opacity:.3;cursor:default;border-color:var(--line)}
.int-scroller{--pad:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scroll-behavior:smooth;
  margin-top:20px;padding:6px 0 10px;scrollbar-width:none;outline-offset:-2px;overscroll-behavior-x:contain}
.int-scroller::-webkit-scrollbar{display:none}
.int-track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;padding:0 var(--pad)}
.int-panel{scroll-snap-align:start;flex:none;width:min(380px,calc(100vw - 2 * var(--gutter) - 44px));display:flex;flex-direction:column;border-radius:24px;overflow:hidden;
  border:1px solid transparent;background:linear-gradient(var(--orbit),var(--orbit)) padding-box,linear-gradient(135deg,rgba(184,101,255,.65),rgba(92,242,255,.35) 60%,rgba(238,240,255,.08)) border-box}
.int-media{aspect-ratio:3/2;overflow:hidden}
.int-media img{width:100%;height:100%;object-fit:cover}
.int-media--travel img{object-position:50% 62%}
.int-media--partner img{object-position:58% 50%}
.int-text{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px}
.int-text h3{font-size:clamp(22px,2vw,28px);line-height:1}
.int-text h3 span{display:block}
.stroke{color:transparent;-webkit-text-stroke:1.2px var(--star)}
.int-text p{color:var(--text-2);font-size:15.5px;line-height:1.5}
.int-dots{display:none;justify-content:center;gap:10px;margin-top:14px}
html.js .int-dots{display:flex}
.int-dots button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.int-dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--dust);opacity:.5;transition:width .3s ease,background-color .3s,opacity .3s}
.int-dots button[aria-current="true"]::before{width:24px;background:var(--ion);opacity:1;box-shadow:0 0 10px rgba(92,242,255,.6)}
.int-dots button:focus-visible{outline:2px solid var(--ion);outline-offset:1px;border-radius:999px}
@media (max-width:639px){.int-arrows button{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.int-scroller{scroll-behavior:auto}.int-dots button::before,.int-arrows button{transition:none}}

/* ===== Career constellation ===== */
.career-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.const-legend{list-style:none;margin:0;padding:0;display:flex;gap:24px;color:var(--dust);font-size:15px}
.const-legend li{display:flex;align-items:center;gap:10px}
.key-star{display:block;border-radius:50%;flex:none}
.key-star--work{width:12px;height:12px;background:var(--star);box-shadow:0 0 8px 2px rgba(238,240,255,.5)}
.key-star--edu{width:9px;height:9px;background:var(--nebula);box-shadow:0 0 8px 2px rgba(184,101,255,.55)}
.const{position:relative;margin-top:clamp(48px,6vw,88px)}
.const-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.const-track{fill:none;stroke:rgba(238,240,255,.12);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.const-line{fill:none;stroke:url(#const-grad);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(92,242,255,.45));transition:stroke-dashoffset .12s linear}
.const-list{list-style:none;margin:0;padding:0;position:relative}
.entry{display:grid;grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);align-items:center;min-height:150px}
.entry .star{grid-column:2;grid-row:1;justify-self:center}
.entry--r .star{transform:translateX(28px)}
.entry--l .star{transform:translateX(-28px)}
.entry--r .entry-body{grid-column:3;grid-row:1}
.entry--l .entry-body{grid-column:1;grid-row:1;text-align:right}
.entry-org{font-size:clamp(20px,1.9vw,26px);line-height:1.15}
.entry-dates{color:var(--ion);font-size:15px;margin-top:8px;font-variant-numeric:tabular-nums}
.entry-role{color:var(--text-2);margin-top:4px}

.star{position:relative;display:block;width:16px;height:16px;border-radius:50%;flex:none;background:var(--star);opacity:.35;box-shadow:0 0 0 rgba(0,0,0,0);transition:opacity .4s ease,box-shadow .4s ease}
.star::before,.star::after{content:"";position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,currentColor,transparent);color:inherit;opacity:0;transition:opacity .4s ease}
.star::before{width:300%;height:1px;transform:translate(-50%,-50%)}
.star::after{width:1px;height:300%;transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,currentColor,transparent)}
.star--work{color:var(--star)}
.star--edu{width:11px;height:11px;background:var(--nebula);color:var(--nebula)}
.star.lit{opacity:1;box-shadow:0 0 10px 2px rgba(238,240,255,.55),0 0 26px 6px rgba(92,242,255,.25)}
.star--edu.lit{box-shadow:0 0 10px 2px rgba(184,101,255,.6),0 0 22px 6px rgba(184,101,255,.25)}
.star.lit::before,.star.lit::after{opacity:.8}
.star--current{width:20px;height:20px;background:var(--ion);color:var(--ion)}
.star--current.lit{box-shadow:0 0 12px 3px rgba(92,242,255,.75),0 0 34px 10px rgba(92,242,255,.3);animation:star-pulse 2.4s ease-in-out infinite}
@keyframes star-pulse{0%,100%{box-shadow:0 0 12px 3px rgba(92,242,255,.75),0 0 34px 10px rgba(92,242,255,.3)}50%{box-shadow:0 0 18px 5px rgba(92,242,255,.95),0 0 54px 18px rgba(92,242,255,.38)}}
@media (prefers-reduced-motion:reduce){.star--current.lit{animation:none}.const-line,.star,.star::before,.star::after{transition:none}}

@media (max-width:767px){
  .entry{grid-template-columns:32px minmax(0,1fr);min-height:0;padding:0 0 40px;align-items:start}
  .entry .star,.entry--r .star,.entry--l .star{grid-column:1;justify-self:start;transform:none;margin:6px 0 0 4px}
  .entry .star--edu{margin-left:6px;margin-top:8px}
  .entry .star--current{margin-left:2px;margin-top:4px}
  .entry--r .entry-body,.entry--l .entry-body{grid-column:2;text-align:left}
}

/* ===== Work: floating dashboard "screens" ===== */
.work-intro{color:var(--text-2);margin-top:18px;max-width:38em}
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(24px,3vw,40px);margin-top:clamp(40px,5vw,64px)}
.screen{display:flex;flex-direction:column;align-items:flex-start}
.screen-link{display:block;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(0,0,0,.8);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.screen-art{width:100%;height:auto;aspect-ratio:16/10}
.screen:hover .screen-link,.screen:focus-within .screen-link{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 36px -4px var(--c);transform:translateY(-4px)}
.screen-title{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.5vw,21px);margin-top:20px;line-height:1.25}
.screen-open{margin-top:8px;color:var(--c);font-weight:500;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.screen-open:hover{border-bottom-color:currentColor}
@media (max-width:1023px){.screens{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.screens{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.screen-link{transition:none}.screen:hover .screen-link,.screen:focus-within .screen-link{transform:none}}

/* ===== Skills: quiet icon lists, separated by thin rules ===== */
.skill-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.skill-group{padding:32px clamp(16px,2vw,32px) 8px;border-left:1px solid var(--line)}
.skill-group:first-child{border-left:0;padding-left:0}
.skill-group h3{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3;color:var(--star);min-height:2.6em}
.skill-group ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px}
.skill-group li{display:flex;align-items:center;gap:14px;color:var(--text-2)}
.skill-ico{width:22px;height:22px;flex:none;color:var(--ion);opacity:.9}
.skill-text{display:flex;flex-direction:column;line-height:1.3}
.skill-text small{font-size:14px;color:var(--dust);margin-top:2px}
@media (max-width:1099px){.skill-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-group:nth-child(3){border-left:0;padding-left:0}.skill-group:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:639px){.skill-groups{grid-template-columns:1fr}.skill-group{border-left:0;padding-left:0;padding-right:0}.skill-group+.skill-group{border-top:1px solid var(--line)}.skill-group h3{min-height:0}}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:end;padding-bottom:clamp(64px,8vw,112px)}
.contact-title{font-size:clamp(44px,7vw,104px);line-height:.95;letter-spacing:-.02em}
.contact-sub{color:var(--text-2);font-size:clamp(17px,1.4vw,20px);margin-top:24px;max-width:30em}
.contact-rows{display:grid;gap:12px}
.contact-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:18px;background:rgba(14,19,36,.72);border:1px solid var(--line);text-decoration:none;color:var(--star);transition:border-color .2s,background-color .2s;min-width:0}
.contact-row:hover{border-color:rgba(92,242,255,.6);background:rgba(14,19,36,.92)}
.contact-ico{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(92,242,255,.08);color:var(--ion);font-size:20px}
.contact-text{display:flex;flex-direction:column;min-width:0}
.contact-label{font-size:14px;color:var(--dust)}
.contact-value{font-size:17px;overflow-wrap:anywhere}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;align-items:start}}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line)}
.footer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;padding-top:28px;padding-bottom:32px}
.footer-logo img{height:48px;width:auto}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.site-footer nav a{color:var(--text-2);text-decoration:none;font-size:16px}
.site-footer nav a:hover{color:var(--star)}
.footer-copy{margin-left:auto;color:var(--dust);font-size:15px}
.to-top{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(238,240,255,.25);color:var(--star);font-size:18px;transition:background-color .2s,color .2s,border-color .2s}
.to-top:hover{background:var(--ion);color:var(--void);border-color:var(--ion)}
@media (max-width:640px){.footer-copy{margin-left:0;order:4;width:100%}.to-top{margin-left:auto;order:2}.site-footer nav{order:3;width:100%}}
@media (max-width:480px){.contact-row{padding:14px 14px;gap:12px}.contact-ico{width:38px;height:38px;font-size:18px}.contact-value{font-size:clamp(13.5px,4.1vw,16px)}}

/* ===== Skills hover ===== */
.skill-group{position:relative;border-radius:0 0 18px 18px;transition:background-color .3s ease,box-shadow .3s ease}
.skill-group:hover{background-color:rgba(92,242,255,.045);box-shadow:inset 0 2px 0 var(--ion),0 24px 60px -30px rgba(92,242,255,.35)}
.skill-group:first-child{padding-left:16px}
@media (max-width:1099px){.skill-group:nth-child(3){padding-left:16px}}
@media (max-width:639px){.skill-group{padding-left:12px;padding-right:12px}}
.skill-group li{border-radius:10px;transition:color .2s ease}
.skill-ico{transition:transform .25s ease,filter .25s ease,color .25s ease}
.skill-group li:hover{color:var(--star)}
.skill-group li:hover .skill-ico{transform:scale(1.22);color:var(--star);filter:drop-shadow(0 0 6px rgba(92,242,255,.9))}
.skill-group:hover h3{color:var(--ion)}
.skill-group h3{transition:color .3s ease}
@media (prefers-reduced-motion:reduce){.skill-group,.skill-ico,.skill-group li{transition:none}}
.hero{overflow-x:hidden;overflow-x:clip}

/* ===== Loader constellation: lines draw, stars light, bright star ignites at 100% ===== */
.ld-const line{stroke:var(--star);stroke-width:11;stroke-linecap:round;fill:none}
.ld-node{fill:var(--star);opacity:.18;transform-box:fill-box;transform-origin:center;transform:scale(.55);transition:opacity .35s ease,transform .35s cubic-bezier(.3,1.6,.5,1)}
.ld-node.on{opacity:1;transform:scale(1)}
.ld-spark{fill:var(--ion);opacity:.15;transform-box:fill-box;transform-origin:center;transform:scale(.5) rotate(-45deg);transition:opacity .4s ease,transform .6s cubic-bezier(.3,1.6,.5,1),filter .4s ease}
.ld-spark.on{opacity:1;transform:none;filter:drop-shadow(0 0 10px rgba(92,242,255,.9)) drop-shadow(0 0 26px rgba(92,242,255,.6))}
@media (prefers-reduced-motion:reduce){.ld-node,.ld-spark{transition:none}}

/* ===== Spaceman mascot (footer easter egg) ===== */
.spaceman-wrap{position:relative;margin-left:auto}
.spaceman{display:block;width:58px;height:58px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;animation:spaceman-float 6s ease-in-out infinite}
.spaceman img{width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);filter:drop-shadow(0 0 10px rgba(184,101,255,.35))}
.spaceman:hover img,.spaceman[aria-expanded="true"] img{filter:drop-shadow(0 0 14px rgba(92,242,255,.6))}
.spaceman[aria-expanded="true"]{animation:spaceman-spin 1.2s cubic-bezier(.3,1.2,.5,1) 1,spaceman-float 6s ease-in-out 1.2s infinite}
.spaceman-say{position:absolute;right:0;bottom:calc(100% + 10px);white-space:nowrap;margin:0;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--star);color:var(--void);font-weight:600;font-size:14px;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
.spaceman[aria-expanded="true"]+.spaceman-say{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .25s ease}
@keyframes spaceman-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-6px) rotate(6deg)}}
@keyframes spaceman-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spaceman,.spaceman[aria-expanded="true"]{animation:none}.spaceman-say{transition:none}}
.footer-copy{margin-left:0}
@media (max-width:640px){.spaceman-wrap{order:2;margin-left:auto}.to-top{margin-left:12px}}

/* ---------- v0.5: career details, skill links, certifications, repeat visits ---------- */
html.seen .ld{display:none}

/* Career star details */
.entry-toggle{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;display:inline-flex;align-items:center;gap:12px;border-radius:6px}
.entry-toggle::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(var(--ion),var(--ion)) center/10px 1.5px no-repeat,linear-gradient(var(--ion),var(--ion)) center/1.5px 10px no-repeat;transition:transform .3s ease,border-color .3s ease,background-color .3s ease}
.entry--l .entry-toggle{flex-direction:row-reverse}
.entry-toggle:hover::after,.entry-toggle:focus-visible::after{border-color:var(--ion);background-color:rgba(92,242,255,.1)}
.entry-toggle[aria-expanded="true"]::after{transform:rotate(45deg);border-color:var(--ion)}
.entry-toggle:hover,.entry-toggle[aria-expanded="true"]{color:var(--ion)}
.entry-toggle:focus-visible{outline:2px solid var(--ion);outline-offset:4px}
.entry .star{cursor:default}
.entry:has(.entry-toggle) .star{cursor:pointer}
.entry{transition:opacity .35s ease}
.entry.is-dimmed{opacity:.38}
.entry.is-open .star{opacity:1;box-shadow:0 0 14px 4px rgba(92,242,255,.75),0 0 40px 12px rgba(92,242,255,.28)}
.entry.is-open .star::before,.entry.is-open .star::after{opacity:1}
.entry-more{margin-top:18px;padding:20px 22px;max-width:480px;border:1px solid var(--line);border-radius:16px;background:rgba(14,19,36,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:left;animation:more-in .35s ease both}
.entry--l .entry-more{margin-left:auto}
.more-about{color:var(--star);font-size:16px;line-height:1.5}
.more-duration{display:inline-block;margin-top:12px;font-size:14px;color:var(--ion);font-variant-numeric:tabular-nums;border:1px solid rgba(92,242,255,.35);border-radius:999px;padding:3px 12px}
.more-duration:empty{display:none}
.more-highlights{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.more-highlights li{position:relative;padding-left:20px;color:var(--text-2);font-size:15px;line-height:1.5}
.more-highlights li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--nebula);box-shadow:0 0 8px rgba(184,101,255,.8)}
.more-tools{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.more-tools li{font-size:13px;color:var(--star);background:rgba(238,240,255,.06);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
@keyframes more-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html:not(.js) .entry-more[hidden]{display:block;animation:none}
html:not(.js) .entry-toggle{cursor:default}
html:not(.js) .entry-toggle::after{display:none}
@media (min-width:768px){.entry.is-open{align-items:start;padding-top:28px}.entry.is-open .star{margin-top:7px}.entry.is-open .star--current{margin-top:5px}}
@media (max-width:767px){.entry--l .entry-toggle{flex-direction:row}.entry--l .entry-more{margin-left:0}.entry-more{padding:16px 16px}}

/* Skills light up the stars where they were used */
#skills li[data-used]{position:relative;cursor:default}
.skill-used{position:absolute;left:0;top:calc(100% + 6px);z-index:5;width:max-content;max-width:100%;font-size:13px;line-height:1.35;color:var(--star);background:var(--orbit);border:1px solid rgba(92,242,255,.4);border-radius:8px;padding:5px 10px;box-shadow:0 10px 30px -12px rgba(0,0,0,.8);opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
#skills li[data-used]:hover .skill-used{opacity:1;transform:none}
.const.has-match .entry:not(.is-match){opacity:.38}
.entry.is-match .star{opacity:1;background:var(--ion);color:var(--ion);box-shadow:0 0 14px 4px rgba(92,242,255,.8),0 0 40px 12px rgba(92,242,255,.3)}
.entry.is-match .star::before,.entry.is-match .star::after{opacity:1}
.entry.is-match .entry-org{color:var(--ion)}

/* Certifications: full-width mission patches under their own heading */
.certs{margin-top:clamp(40px,5vw,64px);padding-top:32px;border-top:1px solid var(--line)}
.certs h3{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3;color:var(--star);padding-left:16px}
.cert-list{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:1023px){.cert-list{grid-template-columns:1fr}}
@media (min-width:1024px){.cert{flex-direction:column;align-items:flex-start;gap:16px}}
.cert{--cc:var(--ion);position:relative;overflow:hidden;display:flex;gap:22px;align-items:center;padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:20px;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--cc) 14%,transparent),transparent 55%),rgba(14,19,36,.7);transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.cert::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--cc) 35%,transparent);opacity:.6}
.cert:hover{border-color:color-mix(in srgb,var(--cc) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 30%,transparent),0 24px 60px -28px var(--cc);transform:translateY(-3px)}
.cert-patch{flex:none;width:clamp(56px,5vw,72px);height:clamp(56px,5vw,72px);color:var(--cc);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--cc) 55%,transparent))}
.cert-patch svg{width:100%;height:100%;display:block;overflow:visible}
.cert-orbit{transform-origin:28px 28px;animation:cert-spin 24s linear infinite}
.cert:hover .cert-orbit{animation-duration:6s}
@keyframes cert-spin{to{transform:rotate(360deg)}}
.cert-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.cert-issuer{font-size:14px;font-weight:600;color:var(--cc)}
.cert-name{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,21px);line-height:1.25;color:var(--star)}
.cert-date{font-size:14px;color:var(--dust)}
@media (max-width:639px){.certs h3{padding-left:12px}.cert-list{grid-template-columns:1fr}.cert{gap:16px}}
@media (prefers-reduced-motion:reduce){.cert-orbit{animation:none}.cert{transition:none}.cert:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.entry-more{animation:none}.entry,.entry-toggle::after,.skill-used,.cert{transition:none}}

/* Contact: copy the email address */
.contact-item{position:relative}
.contact-copy{position:absolute;right:14px;top:12px;font:inherit;font-size:13px;line-height:1.2;font-weight:600;color:var(--ion);background:rgba(92,242,255,.08);border:1px solid rgba(92,242,255,.35);border-radius:999px;padding:4px 12px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.contact-copy:hover{background:var(--ion);color:var(--void)}
.contact-copy:focus-visible{outline:2px solid var(--ion);outline-offset:3px}
.contact-copy.is-copied{background:var(--ion);color:var(--void);border-color:var(--ion)}

/* Soft skills */
.soft{margin-top:clamp(40px,5vw,64px);padding-top:32px;border-top:1px solid var(--line)}
.soft h3{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3;color:var(--star);padding-left:16px}
.soft-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.soft-list li{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(14,19,36,.6);color:var(--text-2);transition:border-color .25s,color .25s,background-color .25s}
.soft-star{width:7px;height:7px;border-radius:50%;background:var(--nebula);box-shadow:0 0 8px rgba(184,101,255,.8);transition:background-color .25s,box-shadow .25s,transform .25s}
.soft-list li:hover{border-color:rgba(92,242,255,.55);color:var(--star);background:rgba(92,242,255,.06)}
.soft-list li:hover .soft-star{background:var(--ion);box-shadow:0 0 10px 2px rgba(92,242,255,.85);transform:scale(1.3)}
.soft-list .skill-used{min-width:200px;max-width:260px}
section.skills{overflow-x:clip}
@media (max-width:639px){.soft h3{padding-left:12px}.soft-list{gap:10px}.soft-list li{padding:9px 14px 9px 12px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.soft-list li,.soft-star{transition:none}}

/* Certification credential links (whole card clicks through) */
.cert-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;font-weight:600;color:var(--cc);text-decoration:none;width:max-content}
.cert-link::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.cert-link:hover{text-decoration:underline}
.cert-link:focus-visible{outline:2px solid var(--cc);outline-offset:3px;border-radius:4px}
.cert-ext{width:14px;height:14px}



/* Work stars are planets carrying each company's symbol: grey until the constellation reaches them, then full colour with a ring */
.star.star--planet{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ion);opacity:.55;box-shadow:0 0 0 1px rgba(238,240,255,.18);transition:opacity .5s ease,box-shadow .5s ease}
.star--planet img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;filter:grayscale(1) brightness(.85);transition:filter .6s ease}
.star--planet::before,.star--planet::after{width:180%;height:46%;border:1.5px solid currentColor;border-radius:50%;background:none;transform:translate(-50%,-50%) rotate(-20deg);opacity:0}
.star--planet::before{z-index:0}
.star--planet::after{z-index:2;clip-path:inset(50% 0 0 0)}
.star--planet.lit{opacity:1;box-shadow:0 0 0 1px rgba(92,242,255,.35),0 0 18px 3px rgba(92,242,255,.45),0 0 44px 10px rgba(184,101,255,.22)}
.star--planet.lit img{filter:none}
.star--planet.lit::before,.star--planet.lit::after{opacity:.75}
.star--planet.star--current.lit{animation:planet-pulse 2.8s ease-in-out infinite}
@keyframes planet-pulse{0%,100%{box-shadow:0 0 0 1px rgba(92,242,255,.45),0 0 18px 3px rgba(92,242,255,.5),0 0 44px 10px rgba(184,101,255,.22)}50%{box-shadow:0 0 0 1px rgba(92,242,255,.7),0 0 26px 6px rgba(92,242,255,.7),0 0 60px 16px rgba(184,101,255,.3)}}
.entry.is-open .star--planet,.entry.is-match .star--planet{background:#fff;box-shadow:0 0 0 2px var(--ion),0 0 24px 6px rgba(92,242,255,.7)}
.entry.is-open .star--planet::before,.entry.is-open .star--planet::after,.entry.is-match .star--planet::before,.entry.is-match .star--planet::after{opacity:1}
@media (min-width:768px){.entry.is-open .star--planet{margin-top:-8px}}
@media (max-width:767px){
  .entry{grid-template-columns:52px minmax(0,1fr);column-gap:10px}
  .entry .star,.entry--r .star,.entry--l .star{justify-self:center;margin-left:0!important}
  .star.star--planet{width:40px;height:40px;margin-top:-6px}
  .star--planet::before,.star--planet::after{width:150%;height:40%}
}
@media (prefers-reduced-motion:reduce){.star--planet,.star--planet img{transition:none}.star--planet.star--current.lit{animation:none}}