/* Hoope — personal creative studio. Original snowfall is retained. */
:root{--ink:#0b1218;--paper:#f2f1e9;--ice:#9bdded;--muted:#a2b0b9;--line:rgba(205,228,234,.14)}
*,*::before,*::after{font-family:Inter,"Segoe UI",Arial,sans-serif!important}
body{background:var(--ink);color:var(--paper);font-size:16px;line-height:1.65}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 20%,rgba(68,117,132,.12),transparent 48%);z-index:0}
::selection{background:var(--ice);color:var(--ink)}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--ice);outline-offset:6px}
.site-header{top:20px;left:28px;right:28px;max-width:1320px;margin:auto;border:1px solid var(--line);border-radius:20px;background:rgba(11,18,24,.82);box-shadow:none}
.site-header::before{display:none}.header-scrolled{background:rgba(11,18,24,.96);box-shadow:0 10px 40px #0003}
.nav-wrapper{height:76px;padding:0 28px;max-width:1320px;margin:auto}
.nav-logo img{height:54px;filter:none}.nav-logo:hover img{filter:none}
.nav-right{order:3;margin-left:24px}.site-header nav{order:2}
nav ul{gap:8px}nav ul li a{font-size:13px;font-weight:500;color:#b0bcc4;padding:10px 18px;border-radius:999px;letter-spacing:.01em}
nav ul li a.active{color:var(--paper);background:#ffffff0c;text-shadow:none}
nav ul li a.active::after{display:none}nav ul li a:hover{color:var(--ice);background:#ffffff08}
.lang-toggle{border-color:var(--line);padding:8px 10px;color:var(--paper)}.lang-flag{font-size:15px}.lang-flag--active{transform:none}
.snowfall{z-index:2;overflow:hidden}.snowflake{opacity:.27}
.hero-section{max-width:1320px;min-height:min(940px,100svh);margin:0 auto;padding:190px 48px 96px;display:grid;grid-template-columns:1.12fr 1fr;gap:36px;text-align:left;align-items:center;overflow:hidden}
.studio-intro{position:relative;z-index:3;padding-bottom:30px}
.studio-eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.19em;font-weight:600;color:var(--ice);margin:0 0 26px;line-height:1.6}
.studio-status,.studio-location-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ice);box-shadow:0 0 13px #9bdded55;flex-shrink:0}
.studio-byline{font-size:13px;color:#b4bfc6;margin:0 0 18px}
.studio-title{font-size:clamp(60px,6.8vw,96px);line-height:1.03;font-weight:600;letter-spacing:-.065em;color:var(--paper);margin:0 0 28px}
.studio-title em,.studio-toolbox-intro h2 em{font-family:Georgia,"Times New Roman",serif!important;font-weight:400;letter-spacing:-.06em;color:var(--ice)}
.studio-description{max-width:435px;font-size:15px;line-height:1.9;color:var(--muted);margin:0 0 30px;text-wrap:pretty}
.studio-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.studio-button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:13px 20px;font-size:12px;font-weight:600;border-radius:8px;border:1px solid transparent;transition:transform .2s,background .2s,color .2s}
.studio-button span{font-size:20px;line-height:1}.studio-button-primary{color:var(--ink);background:var(--ice)}.studio-button-primary:hover{background:#c2eff9;color:var(--ink);transform:translateY(-3px)}
.studio-button-secondary{color:var(--paper);border-color:var(--line);background:transparent}.studio-button-secondary:hover{background:#ffffff08;transform:translateY(-3px)}
.hero-social-links{justify-content:flex-start;gap:9px;margin-top:28px}
.hero-social-links li a{width:36px;height:36px;border-radius:50%;border-color:transparent;background:transparent;color:#93a5b1;font-size:15px;backdrop-filter:none}
.hero-social-links li a:hover{transform:translateY(-3px);box-shadow:none}
.studio-art{position:relative;aspect-ratio:1;min-width:0;display:grid;place-items:center;isolation:isolate}
.studio-art::before{content:"";position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle at 45% 30%,#345b68 0%,#1b3541 48%,#12212b 78%);box-shadow:0 0 100px #5cb7d017;z-index:-1}
.studio-art::after{content:"";position:absolute;inset:7%;border-radius:50%;background-image:radial-gradient(#c5e6eb50 .7px,transparent .7px);background-size:17px 17px;mask-image:linear-gradient(135deg,#0006,transparent 65%);z-index:-1}
.studio-portrait{position:relative;width:65%;height:78%;align-self:end;margin-bottom:11%;border-radius:0 0 48% 48%;overflow:hidden;z-index:1}
.studio-portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 16px 20px #0003)}
.studio-orbit{position:absolute;border:1px solid #b0d6e12a;border-radius:50%;inset:4%;pointer-events:none}
.orbit-outer{transform:rotate(-23deg);border-style:dashed;border-color:#b0d6e12b;animation:studio-orbit-turn 140s linear infinite}
.orbit-outer::after{content:"";position:absolute;left:12%;top:12%;height:7px;width:7px;background:var(--ice);border-radius:50%;box-shadow:0 0 18px #9bdded88}
.orbit-inner{inset:13%;border-color:#b0d6e13b}.orbit-cross{inset:28% -3%;transform:rotate(-32deg);border-color:#b0d6e12b;z-index:2}
.studio-star{position:absolute;color:var(--ice);z-index:3;font-weight:300;line-height:1}
.star-one{font-size:67px;top:9%;right:11%;animation:studio-star-turn 40s linear infinite}.star-two{font-size:32px;bottom:15%;left:9%;color:#f2f1e9}
.studio-code{position:absolute;left:7%;top:27%;font:22px monospace!important;color:#9bdded99;transform:rotate(-12deg)}
.studio-floating-label{position:absolute;z-index:4;background:#101e28e8;border:1px solid #aacdd22e;box-shadow:0 12px 40px #0003;backdrop-filter:blur(15px);border-radius:8px;padding:12px 15px;font-size:11px;color:#dbe6ea;display:flex;align-items:center;gap:10px;white-space:nowrap}
.label-code{top:29%;right:-1%;transform:rotate(5deg)}.label-code>span{color:var(--ice);font-size:22px}.label-location{bottom:15%;left:16%;transform:rotate(-5deg)}
.studio-art-caption{position:absolute;bottom:0;color:#7a929f;font-size:8px;letter-spacing:.21em;text-align:center}
.studio-bottomline{position:absolute;bottom:27px;left:48px;right:48px;display:flex;justify-content:space-between;align-items:center;color:#718591;font-size:9px;font-weight:500;letter-spacing:.13em;border-top:1px solid var(--line);padding-top:22px;gap:12px}
.studio-explore{background:none;border:0;color:#b6c8cf;font-size:10px;cursor:pointer;display:flex;gap:14px;align-items:center;padding:0}.studio-explore span{font-size:17px;color:var(--ice);transition:transform .2s}.studio-explore:hover span{transform:translateY(4px)}
.skills-wrapper{max-width:1320px;margin:0 auto;padding:95px 48px 35px;scroll-margin-top:115px;border-top:1px solid var(--line)}
.studio-toolbox-intro{max-width:680px;margin:0 0 72px}.studio-section-kicker{color:var(--ice);font-size:10px;letter-spacing:.16em;font-weight:500;margin-bottom:25px}
.studio-toolbox-intro h2{font-size:clamp(35px,4.2vw,56px);font-weight:500;line-height:1.14;letter-spacing:-.045em;margin:0 0 22px}
.studio-toolbox-intro>p:last-child{max-width:480px;color:var(--muted);font-size:14px;line-height:1.85}
.skills-section{max-width:none;padding:0 0 62px;margin:0}.skills-category-header{justify-content:flex-start;align-items:center;gap:16px;margin:0 0 22px;padding:0}.category-icon{height:35px;width:35px;filter:none}.skills-category-header h3{font-size:13px;font-weight:500;letter-spacing:.02em;color:#d2dfe4}
.skills-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.skill-card{align-items:flex-start;text-align:left;gap:18px;border-radius:12px;padding:26px;background:#ffffff03;border-color:var(--line);min-width:0;transition:transform .3s,border-color .3s,background .3s,opacity .6s}
.skill-card::before{display:none}.skill-card:hover{transform:translateY(-4px);background:#92d4e608;border-color:#9bdded66;box-shadow:none}.skill-icon{width:42px;height:42px}.skill-card:hover .skill-icon{transform:rotate(-5deg);filter:none}
.skill-card p{text-align:left;color:#9eafb9;font-size:12px;line-height:1.85}.skill-card p strong{color:var(--paper);font-size:15px;font-weight:500;margin:0 0 10px}
.studio-footer{max-width:1224px;margin:0 auto;padding:30px 0 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);position:relative;z-index:3}
.studio-footer-brand{font-size:28px;letter-spacing:-.07em;font-weight:700}.studio-footer-brand span{color:var(--ice)}.studio-footer p,.studio-footer>a:last-child{font-size:10px;color:#8297a3}.studio-footer>a:last-child:hover{color:var(--ice)}
.ct-page,.tp-page{padding-top:150px}.ct-name,.tp-hero-title{font-weight:500;letter-spacing:-.035em}.ct-subtitle,.tp-hero-sub{font-size:15px}.tp-comp-title,.tp-proj-title{font-weight:600}.ct-info-value{font-size:13px}.ct-info-card,.ct-social-card,.tp-comp-card,.tp-proj-card{border-radius:12px;background:#ffffff03;border-color:var(--line)}.tp-comp-points li,.tp-proj-desc{font-size:13px}.tp-proj-tags .tp-tag{font-size:11px}.tp-section-label,.ct-divider-label,.ct-badge,.tp-hero-badge{font-size:10px}.tp-wip-notice{font-size:12px}.tp-wip-badge{font-size:10px}
.studio-fallback-heading{font-size:38px;font-weight:500;margin-bottom:50px}
@keyframes studio-orbit-turn{to{transform:rotate(337deg)}}@keyframes studio-star-turn{to{transform:rotate(360deg)}}
@media(min-width:1500px){.hero-section{min-height:850px}}
@media(max-width:1100px){.hero-section{padding-left:36px;padding-right:36px;gap:12px}.studio-title{font-size:70px}.studio-art{margin-left:-12px}.label-code{right:0;font-size:10px;padding:9px 11px}.studio-footer{margin:0 48px}.skills-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.skill-card{padding:22px}.studio-bottomline{left:36px;right:36px}}
@media(max-width:991px){.site-header{left:20px;right:20px;top:14px}.nav-wrapper{height:66px;padding:0 20px}.nav-right{margin-left:auto}.site-header nav{border-radius:18px;top:10px;width:300px;height:calc(100dvh - 20px);background:#101b24;max-width:calc(100vw - 30px)}nav.open{right:10px}nav ul{padding-top:78px}nav ul li a{font-size:18px}nav::before{display:none}.nav-overlay{z-index:1090}.site-header:has(nav.open){backdrop-filter:none;background:#0b1218}.hamburger{position:relative;z-index:1200}.nav-contact-label{font-size:10px}.nav-contact-value{font-size:12px}.hero-section{padding-top:150px;min-height:760px}.studio-title{font-size:clamp(55px,7.5vw,76px)}.studio-description{font-size:14px}.studio-eyebrow{font-size:8px;letter-spacing:.13em}.studio-actions{gap:10px}.studio-button{gap:16px;font-size:11px;padding:12px 15px}.studio-art-caption{font-size:6px;letter-spacing:.14em}.star-one{font-size:50px}.label-location{left:5%;bottom:12%;font-size:9px}.studio-code{font-size:17px!important}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.hero-section{grid-template-columns:1fr;padding:140px 26px 95px;min-height:auto;gap:25px}.studio-intro{padding:0}.studio-eyebrow{font-size:9px;margin-bottom:23px;letter-spacing:.12em}.studio-title{font-size:clamp(55px,11vw,78px);margin-bottom:24px}.studio-byline{font-size:12px}.studio-description{max-width:460px;font-size:14px}.studio-button{min-height:50px;font-size:12px}.hero-social-links{margin-top:22px}.studio-art{width:min(410px,100%);margin:-8px auto 18px}.studio-art-caption{font-size:7px}.label-code{font-size:10px}.label-location{font-size:10px;left:12%}.studio-bottomline{left:26px;right:26px;bottom:22px;font-size:8px;padding-top:18px}.studio-snow-note{display:none}.studio-explore{font-size:9px}.skills-wrapper{padding:65px 26px 10px}.studio-toolbox-intro{margin-bottom:44px}.studio-toolbox-intro h2{font-size:39px}.studio-toolbox-intro>p:last-child{font-size:13px}.skills-section{padding-bottom:42px}.skills-grid{gap:12px}.skill-card{padding:20px}.studio-footer{margin:0 26px;flex-wrap:wrap;padding:26px 0;gap:12px}.studio-footer p{order:3;flex-basis:100%;font-size:9px}.studio-footer-brand{font-size:26px}.studio-footer>a:last-child{margin-left:auto}.ct-page,.tp-page{padding-top:125px}.ct-hero-text{text-align:center}.ct-info-value{white-space:normal;overflow-wrap:anywhere}.tp-wip-notice{align-items:flex-start;text-align:center}.tp-section{margin-bottom:55px}.tp-hero{padding-top:25px}.ct-social-label{font-size:13px}}
@media(max-width:420px){.site-header{left:12px;right:12px;top:10px;border-radius:14px}.nav-wrapper{height:62px;padding:0 16px}.nav-logo img{height:46px}.hero-section{padding:125px 22px 90px}.studio-title{font-size:58px}.studio-actions{align-items:stretch}.studio-button{font-size:11px;padding:12px 14px;gap:16px}.studio-description{font-size:13px}.studio-art{margin-top:0}.skills-wrapper{padding-left:22px;padding-right:22px}.skills-grid{grid-template-columns:1fr}.skill-card{flex-direction:row;align-items:flex-start;gap:18px;padding:22px}.skill-card .sand-reveal-wrap{flex-shrink:0}.skill-icon{width:38px;height:38px}.studio-toolbox-intro h2{font-size:34px}.studio-bottomline{left:22px;right:22px}.studio-footer{margin:0 22px}.studio-eyebrow{font-size:8px}.label-location{left:10%}.studio-art-caption{font-size:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.studio-orbit,.studio-star,.hero-anim,.ct-avatar-ring,.ct-avatar-glow,.tp-wip-dot{animation:none!important}.card-hidden,.tp-hidden,.hero-anim{opacity:1;transform:none}*,*::before,*::after{transition:none!important}}