/* Jun's room — homepage scene (pairs with home-room.js). Home page only; the header/nav is untouched.
   Everything inside .room-scene is in room pixels (1672×852); JS scales it into #world. */
@property --sky1{syntax:'<color>';inherits:true;initial-value:#6fa8dc}
@property --sky2{syntax:'<color>';inherits:true;initial-value:#93c1e7}
@property --sky3{syntax:'<color>';inherits:true;initial-value:#c6e1f2}
@property --day{syntax:'<number>';inherits:true;initial-value:1}

#home-room{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(#e5efeb 0 var(--fy,70%),#fcf6ec var(--fy,70%) calc(var(--fy,70%) + 8px),#e6cdb6 calc(var(--fy,70%) + 8px) var(--fy2,80%),#c49674 var(--fy2,80%) calc(var(--fy2,80%) + 5px),#e2ad86 calc(var(--fy2,80%) + 5px))}
body:not([data-page="home"]) #home-room{display:none}
.room-scene{position:absolute;left:0;top:0;transform-origin:0 0}
.room-scene>*{position:absolute}
.room-scene img{image-rendering:pixelated;user-select:none;-webkit-user-drag:none;display:block}
.room-base{left:0;top:0;width:100%;height:100%}

/* ---- the old hero pieces step aside on the home page (they stay in the DOM for other pages / screen readers) ---- */
body.has-home-room[data-page="home"] #world{height:calc(100svh - var(--header-height,112px));min-height:540px;background-color:#e5efeb}
body.has-home-room[data-page="home"] #cat{width:var(--home-cat-width,174px);height:var(--home-cat-height,158px)}
body.has-home-room[data-page="home"] #cat-bubble{bottom:82%;font-size:10px}
body.has-home-room[data-page="home"] footer,body.has-home-room[data-page="home"] .corner-label,body.has-home-room[data-page="home"] .world-bottom{display:none}
/* live intro on the wall: only the description + Explore my work show; the eyebrow is gone and the h1 is for screen readers */
body.has-home-room[data-page="home"] .intro{position:absolute;left:calc(var(--ox,0px) + var(--ix,533)*1px*var(--s,1));top:calc(var(--oy,0px) + var(--iy,232)*1px*var(--s,1));width:460px;margin:0;padding:0;max-width:none;transform:scale(var(--s,1));transform-origin:0 0;z-index:1;pointer-events:auto}
body.has-home-room[data-page="home"] .intro .eyebrow{display:none}
body.has-home-room[data-page="home"] .intro h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
body.has-home-room[data-page="home"] .intro .body{margin:0;max-width:none;font-size:19px;line-height:1.68;color:#3d5356}
body.has-home-room[data-page="home"] .intro .body br.desktop{display:none}
body.has-home-room[data-page="home"] .intro .work-link{margin-top:40px;gap:24px;font-size:14px;letter-spacing:2px;color:#223e43;border-bottom:2px solid #223e43;padding:8px 0}
/* Jun: the original sprite stands in the room (same element, same wave-on-hover from app.js) */
body.has-home-room[data-page="home"] .jun-companion{position:absolute;left:calc(var(--ox,0px) + var(--jx,907)*1px*var(--s,1));top:calc(var(--oy,0px) + var(--jy,382)*1px*var(--s,1));right:auto;bottom:auto;width:calc(var(--jw,182)*1px*var(--s,1));height:calc(var(--jh,273)*1px*var(--s,1));z-index:3;display:block}
body.has-home-room[data-page="home"] .jun-companion button{position:absolute;left:0;top:0;bottom:auto;width:100%;height:100%;transform:none;margin:0}
body.has-home-room[data-page="home"] .jun-companion>p,body.has-home-room[data-page="home"] .jun-companion>span{display:none}
body.has-home-room[data-page="home"] #house{border:0;background:none;padding:0;cursor:pointer}
body.has-home-room[data-page="home"] #house>img,body.has-home-room[data-page="home"] #house>span{display:none}
footer .hint{visibility:hidden}

/* ---- interactive objects ---- */
.obj{pointer-events:auto;background:none;border:0;padding:0;margin:0;cursor:default;color:inherit;font:inherit;display:block}
.obj:focus-visible{outline:3px solid #d05b31;outline-offset:2px}
.obj:not(:has(img)):hover{outline:2px solid #fff6e4b3;outline-offset:-2px}
.obj:has(img):hover img{filter:brightness(1.08)}
.room-tip{position:absolute;z-index:6;padding:5px 8px 4px;background:#fbfaf3;border:1px solid #223e43;color:#223e43;font:11px/1.35 var(--pixel,'Courier New',monospace);letter-spacing:.3px;white-space:nowrap;pointer-events:none}
.room-tip small{display:block;font:11px/1.35 'DM Sans',Arial,sans-serif;letter-spacing:0;color:#52696b}
.room-tip.pop{animation:tipPop .12s steps(2)}
@keyframes tipPop{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

/* ---- window ---- */
.room-window{overflow:hidden;transition:--sky1 30s linear,--sky2 30s linear,--sky3 30s linear,--day 30s linear}
.room-window>*{position:absolute;left:0;top:0;width:100%;height:100%}
.window-landscape{object-fit:cover;filter:brightness(clamp(.35,calc(.35 + var(--day)*1.4),1)) saturate(clamp(.55,calc(.55 + var(--day)),1));transition:filter 15s linear}
.window-tint{background:#101c52;mix-blend-mode:multiply;opacity:clamp(0,calc((.28 - var(--day))*2.2),.55);pointer-events:none}
.window-light{left:210px;top:500px;width:930px;height:300px;pointer-events:none;background:linear-gradient(145deg,#ffd7a326,transparent 68%);clip-path:polygon(0 0,37% 0,100% 100%,22% 100%);mix-blend-mode:screen;opacity:calc(.25 + var(--day)*.6)}
.tower-foreground{background-image:url('room4/reference-detail.png');background-size:1672px 852px;image-rendering:pixelated;pointer-events:none}
.tower-ledge{left:172px;top:379px;width:60px;height:25px;background-position:-172px -379px}
.tower-post{left:188px;top:404px;width:26px;height:87px;background-position:-188px -404px}
.sky{background:linear-gradient(var(--sky1) 0 30%,var(--sky2) 30% 60%,var(--sky3) 60%)}
.sky>div{position:absolute}
.sky-stars{inset:0;opacity:clamp(0,calc(1 - var(--day)*2.2),1);background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#ffffffaa 1px,transparent 1.5px);background-size:47px 37px,29px 53px;background-position:7px 5px,19px 17px;height:44%}
.sky-sun{left:var(--sun-x,50%);top:var(--sun-y,30%);width:30px;height:30px;transform:translate(-50%,-50%);background:#fbe3a2;box-shadow:0 0 0 4px #fbe3a244;opacity:clamp(0,calc((var(--day) - .3)*3),1)}
.sky-moon{right:16%;top:13%;width:22px;height:22px;background:#f1f0e2;box-shadow:inset -7px 0 0 #c8c9bb;opacity:clamp(0,calc(1 - var(--day)*2.6),1)}
.sky-clouds{inset:0;filter:brightness(calc(.42 + .58*var(--day)))}
.sky-clouds i{position:absolute;top:var(--y);left:-30%;width:72px;height:12px;background:#f7f4ee;box-shadow:15px -9px 0 -1px #f7f4ee,36px -4px 0 0 #f7f4ee,51px 3px 0 -3px #f7f4ee;animation:cloud var(--d) linear infinite;animation-delay:var(--o)}
@keyframes cloud{from{left:-30%}to{left:112%}}
.city{filter:brightness(calc(.42 + .62*var(--day))) saturate(calc(.75 + .25*var(--day)))}
.city-far{opacity:calc(.55 + .45*var(--day))}
.city-lights{opacity:clamp(0,calc(1 - var(--day)*1.6),1)}
.blinds{overflow:hidden;pointer-events:none}
.slats{height:100%;position:relative;background:repeating-linear-gradient(#462a1f 0 2px,#a1643f 2px 4px,#b47a4e 4px 7px,#734329 7px 9px,#4e3023 9px 11px,transparent 11px 19px);border-bottom:7px solid #58321f;box-shadow:inset 0 -2px 0 #ab754d}
.slats::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 18%,#4b302477 18% 18.5%,transparent 18.5% 48%,#4b302477 48% 48.5%,transparent 48.5% 94%,#4b302477 94% 94.5%,transparent 94.5%)}
.blind-cord i{position:absolute;right:14px;top:0;bottom:12px;width:2px;background:#4a2d1a}
.blind-cord i::after{content:"";position:absolute;left:-4px;bottom:-12px;width:10px;height:13px;background:#8a5a33;border:2px solid #3e2716}
.blind-cord:hover{outline:none}.blind-cord:hover i::after{background:#a86d3e}

/* ---- wall things ---- */
.poster img{width:100%;height:100%;object-fit:cover}
.flag.flutter img{animation:flutter 1.4s steps(7);transform-origin:0 50%}
@keyframes flutter{0%,100%{transform:none}30%{transform:skewY(1.2deg) scaleX(.99)}60%{transform:skewY(-.8deg)}}
.cat-photo:hover{outline-offset:2px}
.card:hover,.resume:hover,.note:hover{transform:translateY(-2px)}
.card,.resume,.note{transition:transform .1s steps(2)}
.note{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;background:#fbf8ef;border:2px solid #4b3b2d!important;box-shadow:3px 3px 0 #4b3b2d40;color:#223e43;text-decoration:none;font:10px var(--pixel,'Courier New',monospace);letter-spacing:0}
.note::before{content:"";position:absolute;left:50%;top:-7px;width:10px;height:10px;transform:translateX(-50%);background:#d6503c;box-shadow:inset -3px -3px 0 #8f2d22}
.note b{display:grid;place-items:center;flex:none;width:26px;height:26px;background:#2b6cb0;color:#fff;font:700 13px/1 Arial,sans-serif}
.note-email b{background:#d07a3e}
.note-linkedin{transform:rotate(-2deg)}.note-email{transform:rotate(1.5deg)}
.note-linkedin:hover{transform:rotate(-2deg) translateY(-2px)}.note-email:hover{transform:rotate(1.5deg) translateY(-2px)}

/* ---- smiski reactions (short, user-triggered) ---- */
.smiski img{transform-origin:50% 100%}
.smiski.fx-peek img{animation:smPeek .42s steps(3)}
.smiski.fx-turn img{animation:smTurn .9s steps(1)}
.smiski.fx-wave img{animation:smWave .9s steps(6)}
.smiski.fx-hop img{animation:smHop .6s steps(5)}
.smiski.fx-lean img{animation:smLean .9s steps(5)}
.smiski.fx-hide img{animation:smHide .9s steps(5)}
@keyframes smPeek{50%{transform:translateY(-2px)}}
@keyframes smTurn{0%,100%{transform:none}15%,80%{transform:scaleX(-1)}}
@keyframes smWave{0%,100%{transform:none}20%,60%{transform:rotate(-8deg)}40%,80%{transform:rotate(7deg)}}
@keyframes smHop{0%,100%{transform:none}40%{transform:translateY(-6px)}70%{transform:translateY(-1px)}}
@keyframes smLean{0%,100%{transform:none}30%,70%{transform:rotate(10deg) translateX(2px)}}
@keyframes smHide{0%,100%{transform:none;opacity:1}30%,70%{transform:translateX(-12px) scale(.92);opacity:.15}}

/* ---- record player ---- */
.vinyl{pointer-events:none}
.vinyl-disc{position:absolute;left:0;top:50%;transform-origin:50% 50%}
.vinyl-disc i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#f4efe6 0 3%,#e0643a 3% 13%,#f0a14a 13% 19%,#17181c 19% 22%,#27282e 22% 34%,#17181c 34% 36%,#2b2c33 36% 52%,#17181c 52% 54%,#26272d 54% 100%)}
.vinyl-disc i::after{content:"";position:absolute;left:50%;top:24%;width:4%;height:10%;background:#f4efe6}
#home-room.record-on .vinyl-disc i{animation:spin 1.8s steps(18) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tonearm{pointer-events:none}

/* ---- desk ---- */
.lamp-light{width:220px;height:170px;pointer-events:none;mix-blend-mode:screen;opacity:.48;background:radial-gradient(ellipse at 50% 15%,#ffd99255,transparent 68%);transition:opacity .2s}
.lamp-off{width:40px;height:12px;background:#3b3836;opacity:0;transition:opacity .2s steps(2);pointer-events:none}
#home-room.lamp-is-off .lamp-light{opacity:0!important}#home-room.lamp-is-off .lamp-off{opacity:.9}
.screen{overflow:hidden;background:none;pointer-events:auto}
.screen:hover{outline:0!important;box-shadow:0 0 18px #a2bfff42}
.screen-cursor{position:absolute;left:0;top:0;width:5px;height:8px;background:#f5f8ff;clip-path:polygon(0 0,100% 65%,55% 65%,35% 100%);filter:drop-shadow(1px 1px 0 #162442);transform:translate(90px,30px);pointer-events:none}
.screen-selection{position:absolute;left:80px;top:14px;width:29px;height:40px;border:1px solid #a7caff80;pointer-events:none;transition:top .3s,left .3s}
.fg-top{display:flex;align-items:center;gap:3px;height:9px;padding:0 4px;background:#1b1d22}
.fg-top i{width:4px;height:4px;background:#5b6270}.fg-top i:first-child{background:#e06b5a}.fg-top span{margin-left:6px;opacity:.7}
.fg-body{display:grid;grid-template-columns:30px 1fr 34px;height:calc(100% - 9px)}
.fg-layers,.fg-props{display:flex;flex-direction:column;gap:5px;padding:6px 4px;background:#2c3038}
.fg-layers i,.fg-props i{height:3px;background:#4c5463}.fg-layers i:nth-child(2){background:#5b8def;width:80%}.fg-props i:nth-child(3){width:60%}.fg-props i:nth-child(4){height:10px;background:#3a404b}
.fg-canvas{position:relative;overflow:hidden;background:#e9ebef}
.fg-pan{position:absolute;inset:0}
.fg-frame{position:absolute;width:40px;height:54px;background:#fff;border:1px solid #c5ccd6;display:flex;flex-direction:column;gap:3px;padding:4px}
.fg-frame i{height:4px;background:#d9e2ee}.fg-frame i:first-child{height:12px;background:#b9cdf0}.fg-frame b{height:8px;background:#f1c9ad}
.fg-links{position:absolute;left:0;top:0;width:150px;height:70px;overflow:visible}
.fg-link{fill:none;stroke:#5b8def;stroke-width:1.5;stroke-dasharray:30;stroke-dashoffset:0}
.fg-link.draw{animation:drawLink .9s steps(6)}
@keyframes drawLink{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
.fg-select{position:absolute;width:40px;height:54px;outline:1.5px solid #5b8def;outline-offset:1px;transition:left .2s steps(2),top .2s steps(2)}
.fg-cursor{position:absolute;left:0;top:0;width:0;height:0;border-left:5px solid #111;border-bottom:7px solid transparent;border-top:0 solid transparent;filter:drop-shadow(1px 0 0 #fff) drop-shadow(0 1px 0 #fff);transform:translate(40px,30px)}
.jun-head,.jun-arm{pointer-events:none;will-change:transform}
.jun-head{transform-origin:55% 90%}
.jun-eye{pointer-events:none;background:#f6c39d;opacity:0}
.jun-eye::after{content:"";position:absolute;left:1px;right:1px;top:6px;height:2px;background:#2b2523}
.jun-eye.shut{opacity:1}
.jun-hot:hover{outline:none!important}
.jun-bubble{padding:7px 12px 6px;background:#fff;border:3px solid #1f2a2d;border-radius:10px;color:#1f2a2d;font:19px/1.15 'DM Sans',Arial,sans-serif;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .2s steps(2),transform .2s steps(2);pointer-events:none}
.jun-bubble::after{content:"";position:absolute;left:52px;bottom:-12px;width:14px;height:14px;background:#fff;border-right:3px solid #1f2a2d;border-bottom:3px solid #1f2a2d;transform:skewX(-35deg)}
.jun-bubble.on{opacity:1;transform:none}
.laptop{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto 5px 9px;gap:3px 5px;padding:6px;background:#1e2128;color:#e7ecf3;text-align:left;font:6px/1.2 Arial,sans-serif;transform:skewX(-6deg)}
.lp-equalizer{display:flex;align-items:flex-end;gap:2px;position:absolute;right:5px;bottom:5px;height:10px;opacity:0}
.lp-equalizer i{width:2px;height:4px;background:#76cfa1;box-shadow:0 0 2px #132837}
#home-room.music-on .lp-equalizer{opacity:1}
#home-room.music-on .lp-equalizer i{animation:equalizer .8s steps(4) infinite alternate}
.lp-equalizer i:nth-child(2){animation-delay:-.3s!important}.lp-equalizer i:nth-child(3){animation-delay:-.7s!important}.lp-equalizer i:nth-child(4){animation-delay:-.5s!important}
@keyframes equalizer{to{height:10px}}
.lp-art{grid-row:1/3;width:22px;height:22px;background:linear-gradient(#f2a46b 0 40%,#d36b7b 40% 70%,#6b5aa6 70%);box-shadow:inset 0 -6px 0 #2a2f52}
.lp-info b{display:block;font-size:6.5px}.lp-info small{opacity:.65}
.lp-bar{grid-column:2;height:3px;align-self:center;background:#454b57;position:relative;overflow:hidden}
.lp-bar i{position:absolute;left:0;top:0;bottom:0;width:30%;background:#7fd3a0}
#home-room.music-on .lp-bar i{animation:progress 40s linear infinite}
@keyframes progress{from{width:30%}to{width:100%}}
.lp-btn{grid-column:1/3;justify-self:center;width:0;height:0;border-left:7px solid #e7ecf3;border-top:4px solid transparent;border-bottom:4px solid transparent}
#home-room.music-on .lp-btn{width:7px;height:8px;border:0;border-left:2px solid #e7ecf3;border-right:2px solid #e7ecf3}
.guitar.strum img{animation:strum .6s steps(12)}
@keyframes strum{0%,100%{transform:none}10%,50%,90%{transform:translateX(1px)}30%,70%{transform:translateX(-1px)}}
.purifier-light{width:4px;height:19px;background:#6fe39a;box-shadow:0 0 0 1px #6fe39a55;pointer-events:none}
#home-room.purifier-off .purifier-light{background:#5a6066;box-shadow:none}
.purifier-air{width:56px;height:24px;pointer-events:none}
.purifier-air i{position:absolute;bottom:0;width:2px;height:6px;background:#ffffffaa;opacity:0;animation:air 3.2s steps(6) infinite}
.purifier-air i:nth-child(1){left:12px}.purifier-air i:nth-child(2){left:27px;animation-delay:1.1s}.purifier-air i:nth-child(3){left:42px;animation-delay:2.2s}
@keyframes air{0%{opacity:0;transform:none}25%{opacity:.7}100%{opacity:0;transform:translateY(-16px)}}
#home-room.purifier-off .purifier-air{display:none}

/* ---- cat things ---- */
.fish:hover img{filter:brightness(1.1)}
.ball.away{opacity:0;pointer-events:none}
.bed:hover,.bowl:hover{outline-offset:2px}

/* ---- phones: swipe sideways to look around the room (home-room.js); vertical swipes still scroll ---- */
@media(max-width:800px){body.has-home-room[data-page="home"] #world{touch-action:pan-y}
  body.has-home-room[data-page="home"] #world.room-swiping{user-select:none;-webkit-user-select:none}}
@media(max-width:800px){body.has-home-room[data-page="home"] #world{min-height:520px}}

@media(prefers-reduced-motion:reduce){
  .sky-clouds i{animation:none;left:var(--y)}.purifier-air,.room-tip.pop{animation:none}
  #home-room.record-on .vinyl-disc i,.guitar.strum img,.flag.flutter img,.smiski[class*="fx-"] img,.fg-link.draw,#home-room.music-on .lp-bar i{animation:none}
  .room-window{transition:none}
  .window-landscape,.screen-selection{transition:none}
  #home-room.music-on .lp-equalizer i{animation:none}
}

/* ---- Reference 5 additions ---- */
.poster{background:#f6efe2;border:5px solid #9b6a43;box-shadow:inset 0 0 0 2px #6e4a2e,2px 2px 0 #00000014;padding:4px}
.poster img{width:100%;height:100%;object-fit:cover}
.shelf-link:hover{outline:2px solid #223e43!important;outline-offset:0}
.backpack img{width:90px;height:auto}
.purifier{position:absolute}.purifier img{display:block}
.purifier .purifier-light{position:absolute;width:4px;height:19px}
.toy img{display:block}
.room-window .sky-clouds i{width:40px;height:7px;box-shadow:8px -5px 0 -1px #f7f4ee,20px -2px 0 0 #f7f4ee,28px 2px 0 -2px #f7f4ee}
.room-window .sky-sun{width:20px;height:20px}
.room-window .sky-moon{width:14px;height:14px;box-shadow:inset -5px 0 0 #c8c9bb}
.room-window .sky-stars{background-size:31px 23px,19px 29px}
.jun-bubble{z-index:5}
@media(max-width:800px){body.has-home-room[data-page="home"] .intro{width:330px}body.has-home-room[data-page="home"] .intro .body{font-size:18px}}

/* ---- static room (Reference 6): nothing moves, no hover frames — hover only shows the annotation ---- */
.obj:hover,.obj:not(:has(img)):hover{outline:none!important;transform:none!important}
.obj:hover img{filter:none!important}
.spot{cursor:default}a.spot,button.spot,.obj[data-act]{cursor:pointer}
.prop img{width:100%;height:100%;display:block;image-rendering:pixelated}
.poster img{display:block}
.jun-bubble{opacity:1!important;transform:none!important}

/* description on a pinned paper note; the company cards replace "Explore my work" */
body.has-home-room[data-page="home"] .intro .work-link{display:none}
body.has-home-room[data-page="home"] .intro .body{position:relative;padding:24px 28px 22px;width:490px;box-sizing:border-box;
  background-color:#f8f0df!important;background-image:radial-gradient(#c9b89a2e 1px,transparent 1.3px),repeating-linear-gradient(0deg,transparent 0 5px,#d9c9ab1f 5px 6px)!important;background-size:6px 6px,auto!important;
  border:2px solid #cbb795;box-shadow:3px 4px 0 #8a755524}
body.has-home-room[data-page="home"] .intro .body::before{content:"";position:absolute;left:50%;top:-8px;width:14px;height:14px;transform:translateX(-50%);border-radius:50%;background:#d6503c;box-shadow:inset -3px -3px 0 #9b2f22,inset 2px 2px 0 #f08a74}
.logo-row{display:flex;align-items:flex-start;pointer-events:none}
.logo{pointer-events:auto;display:block}.logo img{display:block}
a.logo{cursor:pointer}
@media(max-width:800px){body.has-home-room[data-page="home"] .intro .body{width:330px}}

/* Jun's speech box uses the About page text box (pixel font, off-white, ink border, offset shadow, square tail) */
.jun-bubble{padding:14px 18px!important;font:14px/1.7 var(--pixel)!important;color:var(--ink,#223e43)!important;background:#fcfff7!important;border:2px solid var(--ink,#223e43)!important;border-radius:0!important;box-shadow:5px 5px 0 #a6bfb1!important;font-weight:400!important}
.jun-bubble::after{content:""!important;position:absolute;width:12px!important;height:12px!important;background:#fcfff7!important;border:0!important;border-right:2px solid var(--ink,#223e43)!important;border-bottom:2px solid var(--ink,#223e43)!important;bottom:-8px!important;left:calc(50% - 6px)!important;transform:rotate(45deg)!important}
.room-tip{display:none!important}
.poster{position:absolute}
.poster-caption{position:absolute;left:0;right:0;bottom:0;padding:3px 0 2px;background:#f6efe2;color:#2e2a2c;font:9px/1 var(--pixel);letter-spacing:1px;text-align:center}
.jun-bubble{translate:-50% 0;white-space:nowrap}
/* Microsoft + Allied Solutions cards: a small side-to-side swing from the pin on hover */
a.logo{transform-origin:50% 6px}
a.logo:hover,a.logo:focus-visible{animation:logoWiggle .6s ease-in-out 1}
@keyframes logoWiggle{0%,100%{rotate:0deg}25%{rotate:-4deg}55%{rotate:3deg}80%{rotate:-1.5deg}}
@media(prefers-reduced-motion:reduce){a.logo:hover,a.logo:focus-visible{animation:none}}

/* Seoul / Los Angeles / Indiana: one identical frame + caption style */
.poster-place{display:flex;flex-direction:column;box-sizing:border-box;padding:6px 6px 0;background:#f6efe2;border:5px solid #9b6a43;box-shadow:inset 0 0 0 2px #6e4a2e}
.poster-place img{flex:1;min-height:0;width:100%;height:auto;object-fit:cover;image-rendering:pixelated;border:1px solid #6e4a2e}
.poster-place .poster-caption{position:static;flex:none;padding:5px 0 4px;background:none;color:#2e2a2c;font:8px/1 var(--pixel);letter-spacing:1px;text-align:center;white-space:nowrap}

/* wallpaper outside the artwork = the Work page wall */
#home-room{background-color:#e5efeb!important;background-image:linear-gradient(#94b6b31a 1px,transparent 1px),linear-gradient(90deg,#94b6b31a 1px,transparent 1px)!important;background-size:24px 24px!important}
.room-edge{position:absolute;background-repeat:repeat-x,repeat-x;image-rendering:pixelated;pointer-events:none}
.tower-toy-art{left:173px;top:356px;width:95px;height:100px;pointer-events:none}
.tower-toy-patch{position:absolute;left:0;top:0;width:32px;height:90px}
.tower-toy-pendulum{position:absolute;left:-30px;top:0;width:100px;height:100px;overflow:visible}
.tower-toy-swing{transform-origin:0 0}
.tower-cat-swat{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.tower-cat-swat[hidden]{display:none}
#cat.is-tower-swat #cat-img{visibility:hidden}
/* LinkedIn / Email / Resume as neon signs standing on the shelf */
.neon{display:flex!important;align-items:center;justify-content:center;text-decoration:none}
.neon span{font:26px/1 'Pacifico','Brush Script MT','Segoe Script',cursive;color:#fff;letter-spacing:.5px;white-space:nowrap;transition:filter .2s}
.neon-blue span{text-shadow:0 0 2px #fff,0 0 5px #6fd3ff,0 0 10px #29a8ff,0 0 18px #1e88ff,0 0 28px #1e88ff}
.neon-pink span{text-shadow:0 0 2px #fff,0 0 5px #ff8cc6,0 0 10px #ff4fa3,0 0 18px #ff2d8f,0 0 28px #ff2d8f}
.neon-amber span{text-shadow:0 0 2px #fff,0 0 5px #ffd27a,0 0 10px #ffb22e,0 0 18px #ff9a14,0 0 28px #ff9a14}
.neon:hover span,.neon:focus-visible span{filter:brightness(1.25) saturate(1.2)}

.shelf-item img{display:block;width:100%;height:100%;image-rendering:pixelated}
.shelf-item{transition:transform .12s steps(2)}.shelf-item:hover{transform:translateY(-2px)!important}

.shelf-plant{position:absolute;image-rendering:pixelated;pointer-events:none}
.poster-place img{image-rendering:auto!important}

.shelf-plant{image-rendering:auto!important}

/* Quality pass on the restored layout. Typography stays live at every scale. */
html:has(body[data-page="home"]){scrollbar-gutter:auto}
body.has-home-room[data-page="home"] #world,#home-room{overflow:clip}
.art-viewport{display:block;width:100%;height:100%;overflow:hidden;image-rendering:pixelated}
.poster{outline:2px solid #293c3c;outline-offset:-1px}
.poster-truman{position:absolute}
.poster-truman .truman-title{position:absolute;left:14px;right:14px;top:23px;display:block;color:#b92522;text-align:center;line-height:1;transform:rotate(-4deg);font-family:'DM Sans',Arial,sans-serif;pointer-events:none}
.truman-title span{display:block;font-size:11px;font-weight:700}.truman-title span:first-child{text-align:left;padding-left:4px;font-size:10px}.truman-title strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.8px}
.purdue-lettering{left:1591px;top:337px;width:126px;text-align:center;color:#e6bb77;font:700 21px/1.3 'DM Sans',Arial,sans-serif;letter-spacing:2px;pointer-events:none}
.logo-row .logo{position:relative;width:82px;height:118px;flex:none;isolation:isolate}
.logo-row .logo::before{content:'';position:absolute;inset:28px 0 0;background:linear-gradient(115deg,#fbf4e9,#f5e8db);border:1px solid #b28d78;box-shadow:1px 1px 0 #40514b24;z-index:-1}
.logo-row .card-pin{position:absolute;left:35px;top:21px;width:12px;height:12px;background:#d5a033;border-radius:50%;box-shadow:inset -3px -3px 0 #0003,inset 2px 2px 0 #fff4,1px 2px 0 #0002}
.card-pin.allied{background:#209aca}.card-pin.keylime{background:#89aa48}.card-pin.pepsico{background:#d84d41}
.logo-row .art-viewport{position:absolute;left:22px;top:46px;width:38px;height:32px}
.company-name{position:absolute;left:4px;right:4px;top:82px;text-align:center;font:700 12px/1.03 'DM Sans',Arial,sans-serif;color:#182d48}
.microsoft-mark{position:absolute;left:21px;top:50px;width:40px;height:40px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.microsoft-mark i:nth-child(1){background:#f35325}.microsoft-mark i:nth-child(2){background:#81bc06}.microsoft-mark i:nth-child(3){background:#05a6f0}.microsoft-mark i:nth-child(4){background:#ffba08}
.poster-place .poster-caption{font:700 8px/1.1 'DM Sans',Arial,sans-serif;letter-spacing:.8px}
.obj:focus-visible{outline:3px solid #d05b31!important;outline-offset:3px}
.home-room-toy{position:absolute;z-index:5}
body:not([data-page="home"]) .home-room-toy{display:none}
.poster-place:not(:has(.poster-caption)){padding-bottom:6px}
#cat-picker-status{display:none}
.poster{cursor:default!important;pointer-events:none!important;outline:none!important}

/* One shared icon area and text baseline for every company card. */
.logo-row .company-mark{position:absolute;left:20px;top:45px;width:42px;height:35px;display:flex;align-items:center;justify-content:center}
.logo-row .company-mark>.art-viewport,.logo-row .company-mark>img{position:static;width:100%;height:100%;object-fit:contain;image-rendering:auto}
.logo-row .company-mark .microsoft-mark{position:static;width:34px;height:34px}
.logo-row .company-name{left:3px;right:3px;top:87px;min-height:26px;display:flex;justify-content:center;align-items:flex-start;font:700 11.5px/1.12 'DM Sans',Arial,sans-serif}
#jun .jun-character{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;image-rendering:auto}
#jun.jun-sprite-ready #jun-img{visibility:hidden}
#jun.jun-sprite-ready .jun-character{display:block}

/* no cat (and no cat controls) on the Playground and About pages */
body:is([data-page="playground"],[data-page="about"]) :is(#cat,#toy,#cue,#throw-ball,#wand-canvas),
body:is([data-page="playground"],[data-page="about"]) footer .controls{display:none!important}
/* About page Jun: same animated character as the home page */
#about-jun{position:relative}
#about-jun .jun-character{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none}
#about-jun.jun-sprite-ready img{visibility:hidden}
#about-jun.jun-sprite-ready .jun-character{display:block}

/* Only actionable room objects advertise a click or enter the focus order. */
#home-room .obj:not(a):not(button){pointer-events:none;cursor:default}
a.obj[href],button.obj:not(:disabled){cursor:pointer}

/* The shaker replaces the painted bottle behind the original dumbbells. */
.room-shaker{left:1690px;top:512px;width:54px;height:96px;overflow:hidden;pointer-events:none;cursor:default}
.shaker-wall{position:absolute;left:4px;top:17px;width:48px;height:78px;background:url('room5/room-base-refined.png') -988.54px -529px / 1774px 784px no-repeat}
.shaker-art{position:absolute;left:7px;top:0;width:43px;height:96px;display:block;image-rendering:auto;transform:scale(.8);transform-origin:50% 100%}
/* pixel garden (Playground): no eyebrow, no "Playground" title, no status message */
#playground .playground-content .playground-heading .eyebrow,
#playground .playground-content .playground-heading h2,
#pg-message{display:none!important}
.pg-card-body p{display:none}
.pg-card-action{display:none!important}