@import url('../white-desk.css');

/* Selected dotted-badge composition. Physical artwork stays raster; controls stay live. */
.white-desk-hero{--desk-unit:min(calc(100vw / 1586),1px);height:calc(100svh - 30px);min-height:830px;overflow:clip;background-image:url('design-assets/paper-clean-v2.webp')}
.desk-scene{width:min(1586px,100%);height:100%}
.desk-intro{top:33.5%;width:57%;max-width:800px}
.desk-intro h1{font-size:clamp(58px,calc(108 * var(--desk-unit)),108px);font-weight:600;letter-spacing:-.04em;line-height:1.1}
.desk-role{font-size:clamp(14px,calc(21 * var(--desk-unit)),20px);margin-top:24px;color:var(--color-text-secondary)}
.white-desk-hero .desk-connect{margin-top:30px;min-height:66px;min-width:236px}
.desk-badge{left:1%;top:58px;width:clamp(260px,calc(360 * var(--desk-unit)),360px);transform:rotate(-6deg);filter:drop-shadow(0 10px 14px #00000018)}
.badge-card{transform-origin:50% 4%;position:relative}
.white-desk-hero .desk-badge{transform:none}
.white-desk-hero .desk-badge .badge-card,.white-desk-hero .desk-badge:hover .badge-card{transform-origin:50% 0;animation:badge-reference-swing 3s ease-in-out infinite}
@keyframes badge-reference-swing{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}}
.desk-badge .badge-strap-extension{position:absolute;top:-16.4%;left:0;width:100%;height:auto;clip-path:inset(0 39% 83.5% 39%);pointer-events:none}
.badge-links{position:absolute;left:23.2%;top:24.3%;width:53.87%;height:22.8%;display:grid;grid-template-rows:repeat(3,1fr);gap:0}
.badge-links a{display:flex;align-items:center;justify-content:space-between;padding:0 3px;font-family:'Instrument Sans',Arial,sans-serif;font-size:clamp(15px,calc(19 * var(--desk-unit)),19px);font-weight:500;line-height:1.2;letter-spacing:0;color:var(--color-text-inverse);transition:color .2s,transform .2s;white-space:nowrap}
.desk-badge .badge-links img{width:18px;height:18px;filter:brightness(0) invert(1);transition:transform .2s}
.badge-links a:hover{color:#fff;transform:translateX(3px)}
.badge-links a:hover img{transform:translate(2px,-2px)}
.badge-links a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.badge-portrait{position:absolute;left:28.82%;top:55.94%;width:42.36%;aspect-ratio:1;display:block;border-radius:50%;overflow:hidden;background:var(--neutral-600);border:3px solid var(--neutral-500)}
.badge-portrait-sprite{display:block;width:100%;height:100%;background:var(--neutral-600) url('design-assets/yuliia-badge-wave-v2.webp') 0 0 / 200% 200% no-repeat}
@keyframes badge-hand-wave{0%,100%{background-position:100% 0}25%,75%{background-position:0 100%}50%{background-position:100% 100%}}
.desk-badge:focus-within .badge-portrait-sprite{animation:badge-hand-wave .9s steps(1,end) infinite}
.desk-plant{width:clamp(350px,calc(490 * var(--desk-unit)),490px);right:-5.5%;top:-170px;z-index:1}
.desk-terminal-background-plant{position:absolute;left:-160px;bottom:-100px;width:520px;max-width:none;height:auto;z-index:3;filter:blur(3.5px);opacity:.9;pointer-events:none}
.desk-mini-plant{position:absolute;z-index:6;left:calc(3% + clamp(350px,calc(482 * var(--desk-unit)),482px) - 32px);bottom:8px;width:160px;height:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 5px 7px #00000012)}
.white-desk-hero{--desk-surface:var(--color-surface);--desk-border:var(--color-border);--desk-shadow-large:#0000001a;--desk-shadow-small:#0000000c}
.desk-terminal{background:var(--desk-surface);border-color:var(--desk-border);box-shadow:0 18px 30px var(--desk-shadow-large),0 4px 8px var(--desk-shadow-small)}
.desk-availability{right:6%;top:calc(12% + 36px);width:clamp(285px,calc(340 * var(--desk-unit)),340px);transform:none;z-index:2}
.desk-availability>img{filter:sepia(.04) brightness(1.01) drop-shadow(1px 0 0 var(--desk-border)) drop-shadow(-1px 0 0 var(--desk-border)) drop-shadow(0 1px 0 var(--desk-border)) drop-shadow(0 -1px 0 var(--desk-border)) drop-shadow(0 18px 15px var(--desk-shadow-large)) drop-shadow(0 4px 4px var(--desk-shadow-small))}
.availability-label{position:absolute;left:12%;right:8%;top:52%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font-family:'Instrument Sans',Arial,sans-serif;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--color-text);white-space:nowrap}
.availability-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--color-accent);animation:availability-pulse 2.4s ease-in-out infinite}
@keyframes availability-pulse{0%,100%{transform:scale(.95);box-shadow:0 0 0 0 #6387ff28}50%{transform:scale(1.08);box-shadow:0 0 0 5px #6387ff00}}
.desk-foreground{left:auto;right:-17%;bottom:-22%;width:clamp(320px,calc(620 * var(--desk-unit)),620px);opacity:.95;transform:scaleX(-1) rotate(12deg);z-index:2}
.desk-music{position:absolute;z-index:5;right:1%;top:26.5%;width:clamp(280px,calc(340 * var(--desk-unit)),340px);height:320px}
.desk-vinyl{position:relative;left:auto;bottom:auto;width:clamp(215px,calc(242 * var(--desk-unit)),242px);transform:rotate(-2deg);filter:drop-shadow(0 8px 14px #00000010);z-index:2}
.vinyl-card{padding:26px 18px 24px;border-radius:19px;border-color:var(--color-border);box-shadow:0 5px 13px #00000007;overflow:visible}
.vinyl-record-wrap{width:72%;aspect-ratio:1;position:relative;margin:auto;transform-origin:50% 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease;pointer-events:none}
.desk-vinyl .vinyl-record{animation:vinyl-spin 12s linear infinite;animation-play-state:paused;will-change:transform}
.vinyl-copy{margin-top:19px}
.vinyl-eyebrow{font-size:10px;letter-spacing:.13em;margin-bottom:6px}
.white-desk-hero .vinyl-copy h2{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.vinyl-copy .playlist-link{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:8px;font-family:'Instrument Sans',Arial,sans-serif;font-size:14px;font-weight:400;color:var(--color-text-secondary)}
.desk-vinyl .playlist-link img{width:14px;height:14px}
.desk-vinyl:focus-visible .vinyl-record-wrap{transform:translate(-14px,-34px) scale(1.65)}
.desk-vinyl:focus-visible .vinyl-record{animation-play-state:running}
.desk-coffee{position:absolute;z-index:3;top:75px;right:-12px;width:clamp(154px,calc(180 * var(--desk-unit)),180px);aspect-ratio:1;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 8px 7px #36210f20);transition:transform .3s}
.desk-coffee .coffee-state{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s ease;pointer-events:none}
.coffee-full{opacity:1}.coffee-empty{opacity:0}
.desk-coffee.is-empty .coffee-full{opacity:0}.desk-coffee.is-empty .coffee-empty{opacity:1}
.desk-coffee:focus-visible{outline:2px solid var(--color-focus);outline-offset:-12px;border-radius:50%}
.desk-coffee.coffee-by-badge{left:16.4%;right:auto;top:41%;width:clamp(136px,calc(156 * var(--desk-unit)),156px);z-index:4}
.desk-terminal{left:3%;right:auto;bottom:-48px;width:clamp(350px,calc(482 * var(--desk-unit)),482px);transform:rotate(-.7deg);border-radius:17px;z-index:4}
.terminal-bar{height:38px}
.terminal-body{height:300px;padding:25px 23px;font-size:14px;line-height:1.7;color:var(--color-text)}
.terminal-answer{margin-top:5px;margin-bottom:23px;color:var(--color-text-secondary)}
.terminal-interests{max-width:32ch;margin-bottom:0}
.terminal-body p{max-width:calc(100% - 135px)}
.terminal-body .terminal-answer{max-width:100%;white-space:nowrap}
.desk-terminal .terminal-cat{--cat-size:146px;position:absolute;left:auto;right:12px;top:64px;bottom:auto;width:var(--cat-size);height:var(--cat-size);display:block;opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;mix-blend-mode:multiply;transition:opacity .2s ease,transform .2s ease}
.desk-terminal.is-cat-active .terminal-cat{opacity:1;visibility:visible;transform:none}
.desk-terminal .terminal-cat img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:opacity .18s ease}
.desk-terminal .cat-idle{opacity:1}.desk-terminal .cat-dance{opacity:0}
.desk-terminal.is-cat-active .cat-idle{opacity:0}.desk-terminal.is-cat-active .cat-dance{opacity:1}
.desk-tools{--folder-width:clamp(290px,calc(442 * var(--desk-unit)),442px);--tool-size:calc(var(--folder-width) * .225);left:1%;bottom:0;width:var(--folder-width);padding-top:0;transform:rotate(-1deg);filter:drop-shadow(0 10px 12px #00000014)}
.tools-icons{z-index:1}
.desk-tools .tools-icon{opacity:1;visibility:visible;left:var(--tool-x);top:calc(var(--folder-width) * .08);transform:translateX(-50%) rotate(var(--tool-angle));filter:drop-shadow(2px 6px 4px #0000001e);transition:top .45s cubic-bezier(.2,.8,.2,1),transform .45s ease}
.desk-tools .tool-figma{--tool-x:24%;--tool-angle:-7deg}
.desk-tools .tool-notion{--tool-x:42%;--tool-angle:-3deg}
.desk-tools .tool-claude{--tool-x:62%;--tool-angle:3deg}
.desk-tools .tool-gpt{--tool-x:80%;--tool-angle:7deg}
.desk-tools.is-tools-visible .tools-icon{left:var(--tool-x);top:calc(var(--folder-width) * -.015);transform:translateX(-50%) translateY(-5px) rotate(var(--tool-angle)) scale(1.09)}
.desk-tools.toolkit-lying{--folder-width:clamp(300px,calc(430 * var(--desk-unit)),430px);width:var(--folder-width);left:1.5%;bottom:15px;transform:rotate(-3deg);padding:0;filter:drop-shadow(0 12px 11px #00000013)}
.desk-tools.toolkit-lying.is-tools-visible{transform:translateY(-9px) rotate(-1deg)}
.desk-tools.toolkit-upright{--folder-width:clamp(300px,calc(360 * var(--desk-unit)),360px);--folder-pose:rotate(-10deg);--tools-nudge:calc(var(--folder-width) * -.50);width:var(--folder-width);height:var(--folder-width);left:auto;right:calc(var(--folder-width) * -.20);bottom:-110px;transform:none;padding:0;cursor:default;filter:none;animation:folder-arrive .75s cubic-bezier(.22,1,.36,1) .3s backwards}
@keyframes folder-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.desk-tools.toolkit-upright{--tool-size:calc(var(--folder-width) * .30);isolation:isolate}
.toolkit-folder-shell{position:absolute;inset:0;z-index:0;transform:var(--folder-pose);transform-origin:center bottom}
.toolkit-upright .tools-folder-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;transform:none;pointer-events:none}
.toolkit-upright .tools-folder-back{position:relative;display:block;width:100%;height:auto;z-index:0;pointer-events:none}
.toolkit-upright .tools-icons{transform:translate(var(--tools-nudge),calc(var(--folder-width) * .12))}
body .desk-tools.toolkit-upright .tools-icon{display:block;left:var(--tool-x);top:calc(var(--folder-width) * var(--tool-top));width:var(--tool-size);height:var(--tool-size);background:url('design-assets/tool-logos-only-v6.webp') var(--tile-position) / 180% 180% no-repeat;opacity:1;visibility:visible;transform:translate(-50%,-50%) rotate(var(--tool-angle));filter:none;animation:none}
@keyframes tool-arrive{from{opacity:0;transform:translate(-50%,-50%) translateY(14px) scale(.94) rotate(var(--tool-angle))}to{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1) rotate(var(--tool-angle))}}
.desk-tools.toolkit-upright .tool-figma{--tool-x:5.6%;--tool-top:.319;--tool-angle:-22deg;--tile-position:0 0;--tool-delay:0ms;clip-path:inset(0 10% 5% 0)}
.desk-tools.toolkit-upright .tool-notion{--tool-x:15.7%;--tool-top:-.003;--tool-angle:-26deg;--tile-position:100% 0;--tool-delay:40ms;clip-path:inset(0 0 5% 4%)}
.desk-tools.toolkit-upright .tool-claude{--tool-x:42.5%;--tool-top:-.145;--tool-angle:-8deg;--tile-position:0 100%;--tool-delay:80ms;clip-path:inset(14% 10% 0 0)}
.desk-tools.toolkit-upright .tool-gpt{--tool-x:74.7%;--tool-top:-.13;--tool-angle:8deg;--tile-position:100% 100%;--tool-delay:120ms;clip-path:inset(11% 0 0 10%)}
.desk-tools.toolkit-upright:focus-visible{outline:2px solid var(--color-focus);outline-offset:-48px;border-radius:30px}
.site-header .nav{gap:14px;height:64px;min-height:64px;padding:8px 12px}
.site-header .nav-links a{font-size:16px}
.contact-channel-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.contact-channel-links a{border:1px solid #ffffff40;padding:14px 24px;border-radius:32px;font-size:18px;transition:background .2s}
.contact-channel-links a:hover{background:#ffffff18}
@media(hover:hover) and (pointer:fine){
 .desk-vinyl:hover{transform:translateY(-14px) rotate(2deg) scale(1.04);z-index:5}
 .desk-vinyl:hover .vinyl-record-wrap{transform:translate(-18px,-44px) scale(1.9);filter:drop-shadow(0 12px 24px #00000035)}
 .desk-vinyl:hover .vinyl-record{animation-play-state:running}
 .desk-vinyl:hover .vinyl-card{border-color:var(--accent-border);box-shadow:0 10px 30px #6387ff18}
 .desk-coffee:hover{transform:translateY(-3px)}
 .desk-terminal:hover{transform:rotate(0) translateY(-3px)}
 .desk-badge:hover .badge-portrait-sprite{animation:badge-hand-wave .9s steps(1,end) infinite}
}
@media(min-width:810px) and (max-width:979px){
 .white-desk-hero{min-height:1070px}
 .desk-badge{width:300px;left:-20px;top:4px}
 .desk-intro{top:34%;left:48%;width:56%}
 .desk-intro h1{font-size:clamp(58px,6.3vw,76px)}
 .desk-role{font-size:14px}
 .desk-music{right:-1%;top:37.5%;width:270px}
 .desk-vinyl{width:214px}
 .vinyl-card{padding:20px 13px}
 .white-desk-hero .vinyl-copy h2{font-size:20px}
 .desk-coffee{width:142px;right:-10px;top:68px}
 .desk-coffee.coffee-by-badge{left:18%;right:auto;top:49%;width:136px}
 .desk-terminal{width:345px;left:3%;right:auto;bottom:22px}
 .desk-mini-plant{left:calc(3% + 319px);bottom:18px;width:125px}
 .terminal-body{height:243px;font-size:13px;padding:20px}
 .terminal-body p{max-width:calc(100% - 90px)}
 .desk-terminal .terminal-cat{--cat-size:105px;right:4px;top:78px}
 .desk-tools{--folder-width:320px;left:0;bottom:10px}
 .desk-tools.toolkit-lying{--folder-width:320px;left:1%;bottom:22px}
 .desk-tools.toolkit-upright{--folder-width:320px;left:auto;bottom:-95px}
 .desk-plant{width:380px;right:-78px;top:-118px}
 .desk-terminal-background-plant{width:390px;left:-135px;bottom:-75px}
 .desk-availability{width:300px;right:6%;top:calc(8% + 20px)}
 .availability-label{font-size:16px;gap:9px}
}
@media(max-width:809px){
 .white-desk-hero{height:auto;min-height:0;background-size:auto 1400px}
 .desk-scene{height:1550px;max-width:600px;width:100%}
 .desk-badge{width:242px;left:-33px;top:4px;transform:rotate(-5deg)}
 .desk-badge .badge-strap-extension{display:none}
 .badge-links a{font-size:15px}.desk-badge .badge-links img{width:15px;height:15px}
 .desk-plant{width:290px;right:-90px;top:-50px}
 .desk-terminal-background-plant{width:280px;left:-90px;bottom:260px;filter:blur(3px);opacity:.8}
 .desk-mini-plant{left:auto;right:0;bottom:270px;width:112px}
 .desk-availability{width:240px;right:-5px;top:146px;transform:none}
 .availability-label{font-size:12.5px;gap:7px}.availability-dot{width:7px;height:7px}
 .desk-intro{top:383px;left:50%;width:calc(100% - 32px);max-width:none}
 .desk-intro h1{font-size:clamp(40px,10.7vw,64px);line-height:1.12;letter-spacing:-.04em}
 .desk-role{font-size:13px;line-height:1.4;margin-top:18px}
 .white-desk-hero .desk-connect{min-width:214px;min-height:58px;margin-top:24px}
 .desk-music{top:558px;right:16px;width:calc(100% - 32px);max-width:380px;height:320px}
 .desk-vinyl{width:240px;left:calc(50% - 104px);right:auto;transform:rotate(-3deg)}
 .vinyl-card{padding:22px 16px 23px}.vinyl-record-wrap{width:73%;height:auto}
 .white-desk-hero .vinyl-copy h2{font-size:23px}.vinyl-copy .playlist-link{font-size:14px}
 .desk-coffee{width:180px;right:-12px;top:71px}
 .desk-coffee.coffee-by-badge{left:130px;right:auto;top:218px;width:134px}
 .desk-terminal{top:911px;bottom:auto;left:20px;right:20px;width:auto;transform:rotate(-1deg)}
 .terminal-body{height:250px;font-size:13px;padding:22px 20px}
 .terminal-body p{max-width:calc(100% - 96px)}
 .desk-terminal .terminal-cat{--cat-size:112px;right:4px;top:75px}
 .terminal-bar{height:36px}
 .desk-tools{--folder-width:260px;left:16px;bottom:13px;width:var(--folder-width);padding:0;transform:rotate(-2deg)}
 .desk-tools.toolkit-lying{--folder-width:290px;left:12px;bottom:14px}
 .desk-tools.toolkit-upright{--folder-width:300px;left:auto;bottom:-95px}
 .desk-foreground{display:none}
 .site-header .nav,.site-header .nav.open{height:60px;min-height:60px;padding:7px 9px;gap:12px}
}
@media(max-width:359px){
 .desk-scene{height:1500px}
 .desk-badge{width:221px;left:-33px}
 .badge-links a{font-size:14px}
 .desk-availability{width:214px;right:-9px}
 .availability-label{font-size:11.5px;gap:6px}
 .desk-plant{width:260px;right:-94px}
 .desk-mini-plant{right:-2px;bottom:270px;width:96px}
 .desk-intro{top:356px}.desk-intro h1{font-size:38px}.desk-role{font-size:11px}
 .desk-music{top:530px;right:8px;width:calc(100% - 16px)}
 .desk-vinyl{width:211px;left:calc(50% - 93.5px)}.desk-coffee{width:160px;right:-8px;top:65px}
 .desk-coffee.coffee-by-badge{left:110px;right:auto;top:211px;width:116px}
 .white-desk-hero .vinyl-copy h2{font-size:21px}
 .desk-terminal{top:865px;left:16px;right:16px}
 .terminal-body{font-size:12px;padding:20px 17px}
 .terminal-body p{max-width:calc(100% - 82px)}
 .desk-terminal .terminal-cat{--cat-size:96px;right:1px;top:93px}
 .desk-tools{--folder-width:236px;left:8px}
 .desk-tools.toolkit-lying{--folder-width:265px;left:8px}
 .desk-tools.toolkit-upright{--folder-width:280px;left:auto;bottom:-90px}
}
@media(prefers-reduced-motion:reduce){
 .desk-tools.toolkit-upright .tools-icon{transition:none}
 .availability-dot{animation:none}
 .desk-coffee,.coffee-state,.badge-links a,.badge-links img,.desk-vinyl,.vinyl-record-wrap,.desk-tools .tools-icon,.toolkit-upright .tools-folder-base{transition:none}
 .desk-badge:hover .badge-card,.desk-vinyl .vinyl-record,.desk-badge:hover .badge-portrait-sprite,.desk-badge:focus-within .badge-portrait-sprite{animation:none}
 .desk-vinyl:hover,.desk-vinyl:focus-visible{transform:rotate(-2deg)}
 .desk-vinyl:hover .vinyl-record-wrap,.desk-vinyl:focus-visible .vinyl-record-wrap{transform:none;filter:none}
 .desk-coffee:hover,.desk-terminal:hover{transform:none}
 .desk-tools.toolkit-lying.is-tools-visible{transform:rotate(-3deg)}
 .desk-tools.toolkit-upright{animation:none;transform:none}
 .desk-tools.toolkit-upright .tools-icon{animation:none}
 .white-desk-hero .desk-badge .badge-card,.white-desk-hero .desk-badge:hover .badge-card{animation:none;transform:none}
 .desk-terminal.is-cat-active .cat-idle{opacity:1}.desk-terminal.is-cat-active .cat-dance{opacity:0}
 .desk-terminal .terminal-cat img{transition:none}
}

@media(max-width:580px){.desk-tools.toolkit-upright{--tools-nudge:calc(var(--folder-width) * -.40)}}

/* Small playful interactions; the folder and plant artwork keep their pose. */
.toolkit-folder-shell{padding:0;border:0;background:transparent;cursor:pointer}
.toolkit-folder-shell:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px;border-radius:22px}
body .desk-tools.toolkit-upright .tools-icon{pointer-events:auto;cursor:pointer}
.desk-tools.toolkit-upright.is-tools-jiggling .tools-icon,.desk-tools.toolkit-upright .tools-icon.is-tool-jiggling{opacity:1;visibility:visible;animation:tool-jiggle .58s ease-in-out var(--tool-delay) infinite}
@keyframes tool-jiggle{
  0%,100%{transform:translate(-50%,-50%) rotate(var(--tool-angle))}
  18%{transform:translate(-50%,calc(-50% - 12px)) rotate(calc(var(--tool-angle) + 16deg))}
  36%{transform:translate(calc(-50% - 5px),-50%) rotate(calc(var(--tool-angle) - 15deg))}
  54%{transform:translate(calc(-50% + 5px),calc(-50% - 6px)) rotate(calc(var(--tool-angle) + 10deg))}
  72%{transform:translate(-50%,-50%) rotate(calc(var(--tool-angle) - 6deg))}
}
button.desk-plant{padding:0;border:0;background:transparent;aspect-ratio:1374/1145;pointer-events:auto;cursor:pointer;--water-reach:clamp(108px,calc(180 * var(--desk-unit)),180px)}
.desk-plant .plant-art{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.desk-plant:focus-visible{outline:2px solid var(--color-focus);outline-offset:-18px;border-radius:40%}
.plant-mist{position:absolute;left:19%;top:76%;pointer-events:none;z-index:2}
.water-droplet{position:absolute;left:0;top:0;width:5px;height:9px;border-radius:70% 70% 55% 55%;background:#83c8dfb3;border:1px solid #ffffffad;box-shadow:0 0 3px #91cce53d;opacity:0;transform:scale(.3);pointer-events:none}
.desk-plant.is-misting .water-droplet{animation:plant-spritz 1.7s ease-out var(--spray-delay) infinite}
@keyframes plant-spritz{
  0%{opacity:0;transform:translate(0,0) rotate(-40deg) scale(.45)}
  4%{opacity:.85}
  25%{opacity:.65}
  40%,100%{opacity:0;transform:translate(calc(var(--spray-x) * var(--water-reach)),calc(var(--spray-y) * var(--water-reach))) rotate(-35deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){
 .desk-tools.toolkit-upright.is-tools-jiggling .tools-icon,.desk-tools.toolkit-upright .tools-icon.is-tool-jiggling{animation:none}
 .desk-plant.is-misting .water-droplet{animation:none}
}

.water-puff{position:absolute;left:-25px;top:-15px;width:60px;height:36px;border-radius:50%;background:radial-gradient(ellipse,#92cfdc50, #b4e5ec26 45%,transparent 73%);filter:blur(2px);opacity:0;pointer-events:none}
.desk-plant.is-misting .water-puff{animation:plant-mist-puff 1.7s ease-out var(--spray-delay) infinite}
@keyframes plant-mist-puff{0%{opacity:0;transform:scale(.2)}5%{opacity:.7}35%,100%{opacity:0;transform:translate(calc(var(--water-reach) * .7),calc(var(--water-reach) * -.8)) scale(1.7)}}
@media(prefers-reduced-motion:reduce){.desk-plant.is-misting .water-puff{animation:none}}

/* Simplified mobile composition: contact badge, intro and terminal. */
@media(max-width:809px){
 .desk-coffee,.desk-music,.desk-tools,.desk-terminal-background-plant,.desk-mini-plant,.desk-foreground{display:none}
 .desk-scene{height:890px}
 .desk-terminal{top:586px;left:20px;right:20px}
 .terminal-body{height:240px}
}
@media(max-width:359px){
 .desk-scene{height:860px}
 .desk-terminal{top:556px;left:16px;right:16px}
}

/* Center the mobile contact badge and give every contact a thumb-sized target. */
@media(max-width:809px){
 .white-desk-hero .desk-badge{left:50%;top:38px;width:min(300px,calc(100% - 32px));transform:translateX(-50%)}
 .desk-badge .badge-links{top:19%;height:132px}
 .desk-badge .badge-links a{min-height:44px;font-size:16px;touch-action:manipulation}
 .desk-scene{height:1010px}
 .desk-intro{top:490px}
 .desk-terminal{top:706px}
}
@media(max-width:359px){
 .desk-scene{height:988px}
 .desk-intro{top:478px}
 .desk-terminal{top:684px}
}

/* Keep contact labels inside the printed panel while retaining larger tap rows. */
@media(max-width:809px){
 .desk-badge .badge-links a:first-child .badge-contact-text,
 .desk-badge .badge-links a:first-child img{transform:translateY(12px)}
 .desk-badge .badge-links a:last-child .badge-contact-text,
 .desk-badge .badge-links a:last-child img{transform:translateY(-12px)}
}

/* Finestro preview: typographic cover until the product images are supplied. */
.finestro-preview{position:relative;background:var(--color-accent-soft);color:var(--accent-ink);gap:8px}
.finestro-preview .finestro-preview-eyebrow{position:absolute;top:22px;left:24px;font-family:var(--font-ui);font-size:10px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.finestro-preview .finestro-preview-name{font-family:var(--font-heading);font-size:70px;line-height:1.1;letter-spacing:-.045em;font-weight:600}
.finestro-preview>p{font-family:var(--font-ui);font-size:15px;color:var(--color-text-muted)}
.finestro-preview>small{position:absolute;bottom:20px;right:24px;font-family:var(--font-ui);font-size:10px;letter-spacing:.02em;color:var(--color-text-muted)}
@media(max-width:809px){.finestro-preview .finestro-preview-name{font-size:58px}.finestro-preview .finestro-preview-eyebrow{top:18px;left:20px}.finestro-preview>small{right:20px;bottom:16px}}

/* Finestro card: product cover image (same image as the case cover) */
.finestro-preview.has-cover{padding:0;overflow:hidden}
.finestro-preview .project-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}

/* Mobile: blurred plant behind the terminal, as on desktop */
@media(max-width:809px){
 .desk-terminal-background-plant{display:block;position:absolute;width:380px;left:-165px;bottom:-10px;top:auto;filter:blur(3.5px);opacity:.9;z-index:3}
}

/* Iced coffee is anchored to the badge itself (all offsets are fractions of the badge width), so it never drifts when the layout scales */
@media(min-width:810px){
 .white-desk-hero{--bw:clamp(260px,calc(360 * var(--desk-unit)),360px)}
 .desk-coffee.coffee-by-badge{left:calc(1% + var(--bw) * .68);top:calc(58px + var(--bw) * .83);right:auto;width:calc(var(--bw) * .43)}
}
@media(min-width:810px) and (max-width:979px){
 .white-desk-hero{--bw:300px}
 .desk-coffee.coffee-by-badge{left:calc(-20px + var(--bw) * .68);top:calc(4px + var(--bw) * .83);width:calc(var(--bw) * .45)}
}

/* Gentler hero scaling: elements stay larger when the window gets a bit smaller */
@media(min-width:980px){
 .white-desk-hero{--desk-unit:min(calc(.42px + 100vw * .58 / 1586),1px)}
 .desk-intro h1{font-size:min(calc(108 * var(--desk-unit)),7.2vw)}
}
@media(min-width:810px) and (max-width:979px){
 .desk-intro h1{font-size:clamp(58px,calc(58px + (100vw - 820px) * .12),72px)}
 .desk-role{font-size:clamp(15px,1.5vw,18px)}
}

/* Hero intro: boxes hug their content */
.white-desk-hero .desk-intro{width:max-content;max-width:calc(100% - 32px)}
.white-desk-hero .desk-intro h1,.white-desk-hero .desk-role{width:fit-content;max-width:100%;margin-inline:auto}

/* Playlist card: on hover, a pale version of the "Connect with me" spectrum fills the background */
.white-desk-hero .vinyl-card::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(110deg,color-mix(in srgb,var(--spectrum-peach) 20%,#fff) 0%,color-mix(in srgb,var(--spectrum-pink) 18%,#fff) 28%,color-mix(in srgb,var(--spectrum-lilac) 18%,#fff) 54%,color-mix(in srgb,var(--spectrum-blue) 18%,#fff) 77%,color-mix(in srgb,var(--spectrum-teal) 20%,#fff) 100%);opacity:0;transition:opacity .3s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){
 .white-desk-hero .desk-vinyl:hover .vinyl-card::before{opacity:1}
 body .white-desk-hero .desk-vinyl:hover .vinyl-card{border-color:transparent;box-shadow:0 12px 32px #9c78ff22}
}
.white-desk-hero .desk-vinyl:focus-visible .vinyl-card::before{opacity:1}

/* Large screens: badge with the iced coffee sits a little higher */
@media(min-width:1100px){
 .white-desk-hero{--badge-top:clamp(20px,calc(58px - (100vw - 1100px) * .05),58px)}
 .white-desk-hero .desk-badge{top:var(--badge-top)}
 .desk-coffee.coffee-by-badge{top:calc(var(--badge-top) + var(--bw) * .83)}
}

/* Drink: on hover a hand-written note with an arrow appears */
.drink-note{position:absolute;left:78%;top:62%;display:flex;align-items:flex-end;gap:2px;color:var(--color-text-secondary,#505d70);pointer-events:none;opacity:0;transform:translate(-6px,6px) rotate(-4deg);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.drink-note svg{flex:none;width:clamp(56px,calc(78 * var(--desk-unit)),78px);height:auto}
.drink-note-text{font-family:Caveat,cursive;font-weight:600;font-size:clamp(20px,calc(26 * var(--desk-unit)),26px);line-height:1;white-space:nowrap;text-align:left;transform:translateY(14px)}
@media(hover:hover) and (pointer:fine){
 .desk-coffee:hover .drink-note,.desk-coffee:focus-visible .drink-note{opacity:1;transform:none}
}
@media(max-width:809px){.drink-note{display:none}}
@media(prefers-reduced-motion:reduce){.drink-note{transition:none}}

/* Growth & monetization: one horizontal card per row (image left, text right) */
.product-grid.growth-grid{grid-template-columns:minmax(0,1fr);row-gap:24px}
@media(min-width:810px){
 body .growth-grid .project{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:0}
 .growth-grid .project-media{aspect-ratio:16/10}
 body .growth-grid .project-info{padding:24px 40px;align-self:center}
}

/* Growth cards: same look as the product cards, laid out horizontally */
@media(min-width:810px){
 .growth-grid .project-media{aspect-ratio:16/10}
 body .growth-grid .project-info{padding:24px 40px}
}

/* Mobile: horizontal contact badge — portrait on the left, contacts on the right */
@media(max-width:809px){
 .white-desk-hero .desk-badge{top:104px;width:min(344px,calc(100% - 32px));filter:drop-shadow(0 12px 18px #0000002a)}
 .desk-badge .badge-frame,.desk-badge .badge-strap-extension{display:none}
 .desk-badge .badge-card{display:grid;grid-template-columns:40% 1fr;align-items:stretch;gap:10px;aspect-ratio:1.6;padding:26px 10px 10px;border-radius:22px;background:linear-gradient(160deg,#2f2d2b,#1f1d1c 55%,#181716);box-shadow:inset 0 0 0 1px #ffffff14,inset 0 1px 0 #ffffff1f}
 /* lanyard strap + clip, drawn in CSS so it matches the vertical artwork */
 .desk-badge .badge-card::before{content:"";position:absolute;left:50%;bottom:calc(100% - 14px);width:30px;height:150px;transform:translateX(-50%);z-index:-1;background:repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 3px),linear-gradient(90deg,#0c0c0c,#1b1b1b 50%,#0c0c0c)}
 .desk-badge .badge-card::after{content:"";position:absolute;left:50%;top:7px;width:46px;height:9px;transform:translateX(-50%);border-radius:5px;background:#0d0c0c;box-shadow:inset 0 1px 2px #000,0 1px 0 #ffffff1a}
 .desk-badge .badge-portrait{position:relative;left:auto;top:auto;grid-column:1;grid-row:1;align-self:center;justify-self:center;width:100%;max-width:132px;border-width:3px}
 .desk-badge .badge-links{position:static;grid-column:2;grid-row:1;width:auto;height:auto;padding:6px 14px;border-radius:12px;background:radial-gradient(circle,#ffffff38 1px,transparent 1.5px) 7px 7px/22px 22px,linear-gradient(180deg,#77716c,#4a4542)}
 .desk-badge .badge-links a{min-height:44px;font-size:16px;padding:0}
 .desk-badge .badge-links a:first-child .badge-contact-text,.desk-badge .badge-links a:first-child img,
 .desk-badge .badge-links a:last-child .badge-contact-text,.desk-badge .badge-links a:last-child img{transform:none}
 .desk-intro{top:358px}
 .desk-terminal{top:574px}
 .desk-scene{height:878px}
}
@media(max-width:359px){
 .desk-badge .badge-card{gap:8px;padding:24px 8px 8px}
 .desk-badge .badge-links{padding:4px 10px}
 .desk-badge .badge-links a{font-size:15px}
 .desk-intro{top:334px}
 .desk-terminal{top:540px}
 .desk-scene{height:844px}
}

/* Mobile badge v2: square photo, tighter spacing */
@media(max-width:809px){
 .white-desk-hero .desk-badge{--badge-row:128px}
 .desk-badge .badge-card{grid-template-columns:var(--badge-row) 1fr;aspect-ratio:auto;gap:8px;padding:22px 8px 8px;border-radius:18px}
 .desk-badge .badge-card::after{top:6px}
 .desk-badge .badge-portrait{width:var(--badge-row);height:var(--badge-row);max-width:none;aspect-ratio:1;border-radius:12px;border-width:2px;align-self:stretch}
 .desk-badge .badge-links{height:var(--badge-row);padding:2px 12px;border-radius:12px}
 .desk-badge .badge-links a{min-height:0}
 .desk-intro{top:318px}
 .desk-terminal{top:534px}
 .desk-scene{height:838px}
}
@media(max-width:359px){
 .white-desk-hero .desk-badge{--badge-row:116px}
 .desk-badge .badge-card{gap:6px;padding:20px 6px 6px}
 .desk-badge .badge-links{padding:2px 10px}
 .desk-intro{top:302px}
 .desk-terminal{top:508px}
 .desk-scene{height:812px}
}
@media(max-width:809px){
 /* the portrait art is drawn inside a circle: zoom it so the square is filled edge to edge */
 .desk-badge .badge-portrait-sprite{transform:scale(1.42);transform-origin:50% 50%}
}

/* Mobile badge v3: original outer spacing, tighter contact rows, photo at natural size */
@media(max-width:809px){
 .white-desk-hero .desk-badge{--badge-row:132px}
 .desk-badge .badge-card{gap:10px;padding:26px 10px 10px;border-radius:22px}
 .desk-badge .badge-card::after{top:7px}
 .desk-badge .badge-portrait-sprite{transform:translateY(5%)}
 .desk-badge .badge-links{display:flex;flex-direction:column;justify-content:center;padding:0 14px}
 .desk-badge .badge-links a{min-height:36px}
 .desk-intro{top:326px}
 .desk-terminal{top:542px}
 .desk-scene{height:846px}
}
@media(max-width:359px){
 .white-desk-hero .desk-badge{--badge-row:112px}
 .desk-badge .badge-card{gap:8px;padding:24px 8px 8px}
 .desk-badge .badge-links{padding:0 10px}
 .desk-badge .badge-links a{min-height:32px}
 .desk-intro{top:304px}
 .desk-terminal{top:510px}
 .desk-scene{height:814px}
}

/* Mobile badge v4: taller card, upright photo; the art's round bottom edge is pushed out of frame */
@media(max-width:809px){
 .white-desk-hero .desk-badge{--badge-row:152px;--photo-w:124px}
 .desk-badge .badge-card{grid-template-columns:var(--photo-w) 1fr}
 .desk-badge .badge-portrait{width:var(--photo-w);height:var(--badge-row);aspect-ratio:auto;overflow:hidden}
 .desk-badge .badge-portrait-sprite{position:absolute;left:50%;top:9%;width:var(--badge-row);height:var(--badge-row);transform:translateX(-50%)}
 .desk-intro{top:346px}
 .desk-terminal{top:562px}
 .desk-scene{height:866px}
}
@media(max-width:359px){
 .white-desk-hero .desk-badge{--badge-row:136px;--photo-w:108px}
 .desk-intro{top:328px}
 .desk-terminal{top:534px}
 .desk-scene{height:838px}
}

/* Mobile badge v5: photo and contacts panels share the same width */
@media(max-width:809px){
 .desk-badge .badge-card{grid-template-columns:1fr 1fr}
 .desk-badge .badge-portrait{width:100%}
 .desk-badge .badge-portrait-sprite{top:0;width:114%;height:auto;aspect-ratio:1}
}
/* Mobile: readable role line under the name */
@media(max-width:809px){.white-desk-hero .desk-role{font-size:16px}}
/* Mobile: portrait zoomed out a little; the art's round bottom edge stays below the frame */
@media(max-width:809px){.desk-badge .badge-portrait-sprite{width:104%;top:auto;bottom:-13%}}

/* Mobile badge v6: taller card; portrait uses a sheet extended slightly below the shoulders */
@media(max-width:809px){
 .white-desk-hero .desk-badge{--badge-row:180px}
 .desk-badge .badge-portrait-sprite{width:100%;height:auto;aspect-ratio:627/717;top:auto;bottom:0;background-image:url('design-assets/yuliia-badge-wave-tall.webp')}
 .desk-intro{top:374px}
 .desk-terminal{top:590px}
 .desk-scene{height:894px}
}
@media(max-width:359px){
 .white-desk-hero .desk-badge{--badge-row:151px}
 .desk-intro{top:343px}
 .desk-terminal{top:549px}
 .desk-scene{height:853px}
}

/* Mobile badge v7: chest-length portrait cropped from the loader artwork */
@media(max-width:809px){
 .desk-badge .badge-portrait-sprite,
 .desk-badge:focus-within .badge-portrait-sprite,
 .desk-badge:hover .badge-portrait-sprite{inset:0;left:0;top:0;bottom:auto;width:100%;height:100%;aspect-ratio:auto;transform:none;animation:none;background:var(--neutral-600) url('design-assets/yuliia-badge-mobile.webp') 50% 0 / cover no-repeat}
}
/* Mobile badge: 15px shorter */
@media(max-width:809px){
 .white-desk-hero .desk-badge{--badge-row:165px}
 .desk-intro{top:359px}
 .desk-terminal{top:575px}
 .desk-scene{height:879px}
}
@media(max-width:359px){
 .white-desk-hero .desk-badge{--badge-row:136px}
 .desk-intro{top:328px}
 .desk-terminal{top:534px}
 .desk-scene{height:838px}
}