@font-face{font-family:Pixel;src:local('Courier New');font-display:swap}*{box-sizing:border-box} :root{--ink:#45392d;--cream:#f8f3e7;--peach:#e9bea0;--terra:#a34e38;--olive:#626b43;--line:#74634e}body{margin:0;background:#f4eddd;color:var(--ink);font:16px/1.65 Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{color:inherit;font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #39677a;outline-offset:5px}header{max-width:1360px;margin:auto;min-height:102px;display:flex;align-items:center;justify-content:space-between;padding:20px 4.5%;gap:20px;border-bottom:1px solid #d5c8b2}.brand{text-decoration:none;font:bold 21px/1.3 monospace;letter-spacing:-1px;display:grid;grid-template-columns:36px auto}.brand-icon{grid-row:span 2;color:var(--terra);font-size:32px}.version{font:11px Arial;letter-spacing:1px;margin-top:5px}nav{display:flex;gap:8px}nav a{font:bold 13px monospace;text-decoration:none;padding:10px 14px;border:1px solid transparent}nav a.active{border-color:var(--ink);background:#e4e5ce;box-shadow:3px 3px 0 #b8b797}main{max-width:1180px;margin:auto;padding:0 30px}.intro{padding:38px 0 27px;text-align:center;position:relative}.eyebrow{font:11px monospace;letter-spacing:2px;margin-bottom:12px}.eyebrow i,.light{display:inline-block;width:7px;height:7px;background:var(--olive);margin-right:7px}.intro h1{font:bold clamp(34px,4.3vw,54px)/1.08 monospace;letter-spacing:-2px;margin:0 0 15px;text-shadow:2px 2px 0 #d6bf9f}.intro h1 br{display:none}.star{color:var(--terra);font-size:30px;vertical-align:top;margin-left:14px}.intro p{margin:0;font-size:15px}.welcome-actions{display:flex;gap:24px;align-items:center;justify-content:center;margin-top:19px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:10px 20px;border:2px solid var(--ink);background:#e3e5cf;box-shadow:3px 3px 0 var(--ink);font:bold 13px monospace;text-decoration:none;min-height:44px}.primary{background:#a34e38;color:#fff6e7}.button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.text-link{font:12px monospace;text-underline-offset:5px}.studio-frame{border:3px solid var(--ink);box-shadow:7px 7px 0 #d4c2a7;background:#e8d8bb}.frame-bar,.frame-bottom{display:flex;align-items:center;justify-content:space-between;font:11px monospace;padding:10px 14px;gap:10px}.frame-bar{background:#f8edda;border-bottom:3px solid var(--ink)}.frame-status{font-size:10px;color:#756550}.frame-bottom{background:#f6ebd8;border-top:3px solid var(--ink);font-size:10px}.room{position:relative;aspect-ratio:2/1;background:#e7bea1;overflow:hidden}#room-art{display:block;width:100%;height:100%}.hotspot{position:absolute;border:0;background:transparent;padding:0;transition:filter .15s;display:flex;align-items:flex-end;justify-content:center}.hotspot svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(3px 4px 0 #563b2522)}.hotspot:hover svg,.hotspot:focus-visible svg{filter:drop-shadow(0 -3px 0 #fff6da) drop-shadow(0 3px 0 #fff6da)}.object-label{position:absolute;bottom:-22px;white-space:nowrap;background:#fff3dc;border:2px solid var(--ink);padding:3px 9px;font:bold 11px monospace;box-shadow:2px 2px 0 #70543b66;z-index:2}.hotspot:hover .object-label,.hotspot:focus-visible .object-label{background:#e3e5ce;transform:translateY(-3px)}#frodo-dialog{position:absolute;bottom:27%;right:4%;background:#fff8e7;border:3px solid var(--ink);padding:15px;box-shadow:4px 4px 0 #a58468;font:12px monospace;z-index:5;max-width:250px}#frodo-dialog span{color:var(--terra);font-size:25px;margin-left:10px}.wag svg{animation:wag .24s steps(2) 5}@keyframes wag{50%{transform:rotate(5deg)}}.under-room{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:17px;font:11px/1.5 monospace;color:#716350}.under-room p{margin:0}.under-room a{white-space:nowrap;text-underline-offset:4px}footer{max-width:1300px;margin:42px auto 0;padding:20px 4%;border-top:1px solid #d5c8b2;display:flex;justify-content:space-between;gap:15px;font:10px/1.5 monospace;color:#716350;letter-spacing:.5px}.footer-separator{padding:0 10px}.panel{margin:34px auto 45px;border:3px solid var(--ink);box-shadow:8px 8px 0 #cfbda2;background:var(--cream)}.panel-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;background:#e2e3cb;border-bottom:3px solid var(--ink);padding:8px 14px;font:12px monospace}.panel-bar button{border:2px solid var(--ink);background:#fbf3e1;font:bold 24px/1 monospace;width:36px;height:32px}.panel-content{padding:34px 45px 45px;max-width:1000px;margin:auto}.panel h1{font:bold clamp(29px,4vw,44px)/1.15 monospace;letter-spacing:-1.5px;margin:8px 0 18px}.panel h2{font:bold 23px/1.3 monospace;margin:30px 0 10px}.panel h3{font:bold 16px/1.4 monospace}.lede{font-size:18px;line-height:1.65;max-width:740px}.small-label{font:11px monospace;letter-spacing:1.5px;color:var(--terra)}.back-link{font:12px monospace;text-underline-offset:4px;display:inline-block;margin-bottom:24px}.projects{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}.project{text-decoration:none;border:2px solid var(--ink);background:#fff9eb;box-shadow:4px 4px 0 #d9c8ae;overflow:hidden}.project:hover{transform:translateY(-3px)}.project-art{height:150px;padding:24px;background:#dddcc1;border-bottom:2px solid var(--ink);position:relative}.project:nth-child(2) .project-art{background:#eac1a5}.project:nth-child(3) .project-art{background:#b9cacc}.project:nth-child(4) .project-art{background:#d4c3ad}.project-copy{padding:20px}.project-copy h2{font-size:20px;margin:8px 0}.project-copy p{font-size:14px;margin:8px 0}.project-copy .open{font:bold 12px monospace;display:block;margin-top:20px}.mini-board{border:3px solid #66533e;background:#fff1db;height:100%;padding:9px;display:flex;gap:8px;box-shadow:5px 5px 0 #66533e44}.mini-board div{background:#d8b591;flex:1;padding:6px}.mini-board i{display:block;background:#fff7e4;height:10px;margin-bottom:8px}.project-art .caption{position:absolute;bottom:3px;right:9px;font:8px monospace}.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #c6b79d;padding:20px 0;margin:27px 0;gap:20px}.fact-strip strong{display:block;font:24px monospace}.fact-strip span{font-size:12px}.case-body{max-width:760px}.case-body p,.case-body li{font-size:16px;line-height:1.8}.case-body li{margin-bottom:8px}.note{border-left:4px solid var(--olive);background:#e9e8d6;padding:16px 20px;font-size:14px;margin:25px 0}.placeholder{border:2px dashed #a29177;padding:35px 22px;background:#eee6d7;text-align:center;color:#73634f;font:12px/1.8 monospace;margin:20px 0}.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:35px}.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{padding:6px 10px;background:#e5e5d1;border:1px solid #bdbb9f;font:12px monospace}.job{border-bottom:1px solid #d3c4ab;padding:20px 0}.job h2{margin:0 0 5px;font-size:19px}.job .date{font:12px monospace;color:#7c513f}.job ul{padding-left:20px}.actions{display:flex;flex-wrap:wrap;gap:15px;margin:25px 0}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gallery .placeholder{aspect-ratio:4/5;display:grid;place-content:center}.contact-email{font:bold clamp(19px,4vw,34px) monospace;text-underline-offset:7px;overflow-wrap:anywhere}.skip{position:absolute;left:15px;top:-100px;background:white;z-index:100;padding:10px}.skip:focus{top:10px}.mobile-break{display:none}[hidden]{display:none!important}@media(min-width:1500px){.intro{padding-top:55px}}@media(max-width:700px){header{padding:18px 18px 14px;display:block}.brand{font-size:19px}nav{margin-top:20px;justify-content:space-between;gap:0}nav a{padding:10px 8px;font-size:11px}main{padding:0 14px}.intro{padding:30px 0 26px}.intro h1{font-size:36px;line-height:1.12}.intro h1 br{display:block}.star{font-size:23px;margin-left:5px}.eyebrow{font-size:9px;letter-spacing:1.3px}.intro p{font-size:13px}.welcome-actions{gap:15px;flex-wrap:wrap}.button{padding:10px 13px}.text-link{font-size:11px}.frame-status{display:none}.frame-bar{padding:9px;font-size:10px}.room{aspect-ratio:1/1.13}#room-art{width:160%;max-width:none;height:auto;position:absolute;left:-30%;bottom:0}.hotspot{min-width:44px;min-height:44px}.object-label{font-size:10px;bottom:-19px;padding:3px 6px}.frame-bottom{padding:10px 7px;font-size:8px}#hint{max-width:160px;text-align:right}.under-room{display:block;font-size:10px}.under-room a{display:block;margin-top:9px}.under-room p{max-width:310px}footer{margin-top:25px;padding:20px;display:block;font-size:9px}footer>span{display:block;margin-bottom:8px}.panel{margin:18px -3px 30px;box-shadow:4px 4px 0 #cfbda2;min-height:75vh}.panel-content{padding:24px 20px}.panel h1{font-size:29px}.projects,.two-col{grid-template-columns:1fr}.project-art{height:130px}.fact-strip{gap:12px}.fact-strip strong{font-size:20px}.fact-strip span{font-size:10px}.gallery{grid-template-columns:1fr}.gallery .placeholder{aspect-ratio:4/3}.lede{font-size:16px}#frodo-dialog{right:4%;bottom:20%;max-width:200px;font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@font-face{font-family:SarahPixel;src:url('assets/sarah-pixel.ttf') format('truetype');font-display:swap}.intro h1{font-family:SarahPixel,monospace;font-weight:normal;letter-spacing:-1px;font-size:clamp(30px,4vw,48px);line-height:1.25}.brand{font-family:SarahPixel,monospace;font-size:19px;letter-spacing:0}.panel h1{font-family:SarahPixel,monospace;font-weight:normal;line-height:1.35;font-size:34px}.object-label{font-family:SarahPixel,monospace;font-weight:normal;font-size:10px}.brand-icon{font-family:monospace}.star{font-family:monospace}@media(max-width:700px){.intro h1{font-size:34px}.panel h1{font-size:27px}.brand{font-size:18px}.object-label{font-size:9px}}
header{position:sticky;top:0;z-index:20;background:#f4eddd}.panel-bar{top:102px}@media(max-width:700px){.panel-bar{top:139px}.mobile-break{display:block}.brand .version{letter-spacing:.5px}}

.portrait{display:block;width:100%;height:auto;border:3px solid var(--ink);box-shadow:5px 5px 0 #cfbda2;margin:20px 0 25px} @media(max-width:700px){.portrait{max-width:420px;margin-inline:auto}}


#coffee{position:absolute;left:60.7%;top:46.4%;width:5%;height:8%;min-width:44px;min-height:44px;border:0;background:transparent;cursor:pointer;padding:0;z-index:3}
.coffee-label{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font:11px monospace;background:#fff3dc;border:2px solid var(--ink);padding:3px 7px}#coffee:hover .coffee-label,#coffee:focus-visible .coffee-label{display:block}
.steam{pointer-events:none;position:absolute;left:28%;top:20%;width:28px;height:40px;transform:translateY(-100%)}.steam i{position:absolute;bottom:0;width:3px;height:16px;background:#fff6e2;box-shadow:3px -6px 0 #fff6e2,-3px -12px 0 #fff6e2;opacity:0}.steam i:nth-child(1){left:0}.steam i:nth-child(2){left:10px}.steam i:nth-child(3){left:20px}#coffee.brewing .steam i{animation:coffee-steam 1.6s steps(8) both}#coffee.brewing .steam i:nth-child(2){animation-delay:.2s}#coffee.brewing .steam i:nth-child(3){animation-delay:.4s}@keyframes coffee-steam{0%{opacity:0;transform:translateY(8px)}20%{opacity:.95}75%{opacity:.65}100%{opacity:0;transform:translate(3px,-35px)}}
@media(max-width:700px){#coffee{left:64.8%;top:61.6%;width:12%;height:10%}#obj-tiktok svg{width:80%;height:80%;align-self:flex-end}}
@media(prefers-reduced-motion:reduce){#coffee.brewing .steam i{opacity:.8;animation:none!important}}

#mobile-room-art{display:none}
@media(max-width:700px){
 .room{aspect-ratio:480/560}
 #room-art{display:none}
 #mobile-room-art{display:block;width:100%;height:100%;position:absolute;inset:0}
 .hotspot{min-width:0;min-height:0}
 .hotspot::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
 .hotspot svg,#obj-tiktok svg{width:100%;height:100%;align-self:auto}
 .object-label{font-size:9px;bottom:-21px;z-index:4}
 #obj-contact .object-label{bottom:-43px}
 #obj-about .object-label{left:0}
 #obj-audio .object-label{left:0}
 #coffee{left:55.7%;top:52%;width:10%;height:8%;min-width:44px;min-height:44px}
 #coffee .steam{left:35%;top:23%}
 #frodo-dialog{bottom:22%;right:5%}
}
@media(max-width:360px){#obj-about .object-label{left:-15px}}
#game-launch{left:75%;top:21%;width:7%;height:5.5%}
#frodo-game{padding:0;width:min(850px,calc(100% - 24px));max-height:92dvh;overflow:auto;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:8px 8px 0 #51403266}
#frodo-game::backdrop{background:#30271fbd}.game-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:3px solid var(--ink);background:#e2e3cb;font:12px monospace}.game-bar button{background:var(--cream);border:2px solid var(--ink);font-size:24px;width:40px;height:36px}.game-body{padding:20px}.game-body h2{font:26px/1.5 SarahPixel,monospace;margin:8px 0}.game-help{font:13px/1.5 monospace;margin:10px 0}.game-stats{display:flex;justify-content:space-between;gap:8px;font:13px monospace;margin:18px 0 10px}.game-screen{position:relative;border:3px solid var(--ink);overflow:hidden}.game-screen canvas{display:block;width:100%;image-rendering:pixelated;touch-action:none}.game-screen #game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff3d7c9;pointer-events:none;text-align:center;padding:12px}.game-screen strong{font:22px/1.4 SarahPixel,monospace}.game-screen span{font:13px/1.4 monospace}.game-buttons{display:flex;flex-wrap:wrap;gap:14px}.game-buttons button{touch-action:manipulation}.game-buttons button:disabled{opacity:.45;cursor:default}.game-footnote{font:11px/1.5 monospace;margin:20px 0 0}
@media(max-width:700px){#game-launch{left:69%;top:36%;width:12%;height:4.5%}#game-launch .object-label{bottom:-21px}.game-body{padding:14px}.game-body h2{font-size:20px}.game-screen strong{font-size:16px}.game-screen span{font-size:11px}.game-stats{font-size:11px}.game-buttons{gap:9px}.game-help{font-size:11px}}
.pet-heart{position:absolute;left:50%;top:0;width:24px;height:21px;background:#bd7050;pointer-events:none;z-index:6;clip-path:polygon(0 14%,14% 14%,14% 0,36% 0,36% 14%,50% 28%,64% 14%,64% 0,86% 0,86% 14%,100% 14%,100% 50%,86% 50%,86% 64%,72% 64%,72% 78%,58% 78%,58% 92%,42% 92%,42% 78%,28% 78%,28% 64%,14% 64%,14% 50%,0 50%);animation:pet-love 1.6s steps(16) forwards}
@keyframes pet-love{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-60px)}}
.game-celebration{min-height:40px;margin:8px 0 14px;padding:8px 10px;border:2px solid transparent;font:12px/1.5 monospace;color:#75432e}.game-celebration.earned{background:#f4dfbc;border-color:#bd7050;animation:treat-cheer .5s steps(4)}
@keyframes treat-cheer{0%{transform:translateY(4px)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@media(max-width:700px){.game-celebration{min-height:56px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.pet-heart{animation:none;opacity:1;transform:translate(-50%,-25px)}.game-celebration.earned{animation:none}}
#plant-worm-button{position:absolute;left:8%;top:51%;width:7.5%;height:23%;min-width:44px;min-height:44px;border:0;background:none;padding:0;cursor:pointer;z-index:3}
#worm-window{position:absolute;left:9%;top:43.5%;width:6%;height:20%;overflow:hidden;pointer-events:none;z-index:4}
.cowboy-worm{position:absolute;top:100%;left:15%;width:70%;height:70%;overflow:visible}
.worm-visiting .cowboy-worm{animation:worm-peek 3.6s steps(14) both}
.cowboy-hat{transform-box:fill-box;transform-origin:80% 95%}.worm-visiting .cowboy-hat{animation:hat-tip 3.6s steps(5) both}
#worm-howdy{position:absolute;left:15%;top:52%;z-index:5;pointer-events:none;font:13px/1.4 SarahPixel,monospace;color:var(--ink)}
#worm-howdy:not(:empty){padding:7px 10px;background:#fff3dc;border:2px solid var(--ink);box-shadow:3px 3px 0 #70543b66}
@keyframes worm-peek{0%{transform:translateY(0)}15%,78%{transform:translateY(-100%)}100%{transform:translateY(0)}}
@keyframes hat-tip{0%,24%,55%,100%{transform:rotate(0)}35%,43%{transform:rotate(14deg) translateY(-3px)}}
@media(max-width:700px){#plant-worm-button{left:84%;top:29%;width:10%;height:12%}#worm-window{left:84.5%;top:23%;width:10%;height:13%}#worm-howdy{left:64%;top:29%;font-size:10px}}
@media(prefers-reduced-motion:reduce){.worm-visiting .cowboy-worm{animation:none;transform:translateY(-100%)}.worm-visiting .cowboy-hat{animation:none}}
#ufo-window{position:absolute;left:7.5%;top:9%;width:20%;height:36%;border:0;background:none;cursor:pointer;padding:0;z-index:2;min-width:44px;min-height:44px}
.ufo-scene{visibility:hidden;pointer-events:none}.ufo-visiting .ufo-scene{visibility:visible}.ufo-visiting .ufo-walk{animation:ufo-flyby 5.2s linear both}
.ufo-visiting .ufo-lights{animation:ufo-glow 1.4s ease-in-out infinite alternate}
@keyframes ufo-flyby{0%{transform:translate(0,0)}25%{transform:translate(69px,-5px)}50%{transform:translate(138px,1px)}75%{transform:translate(206px,-4px)}100%{transform:translate(275px,0)}}
@keyframes ufo-glow{from{opacity:.6}to{opacity:1}}
.ufo-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){#ufo-window{left:6.5%;top:7.5%;width:30%;height:24%}}
@media(prefers-reduced-motion:reduce){.ufo-visiting .ufo-walk{animation:none;transform:translateX(100px)}.ufo-visiting .ufo-lights{animation:none}}
#turkey-frame{position:absolute;left:33.33%;top:9.17%;width:8.65%;height:21.25%;padding:0;background:transparent;border:0;cursor:pointer;z-index:2}
#turkey-greeting{position:absolute;left:29%;top:32%;z-index:6;pointer-events:none;font:11px/1.5 SarahPixel,monospace;color:var(--ink)}
#turkey-greeting:not(:empty){background:#fff3dc;border:2px solid var(--ink);padding:9px 12px;box-shadow:3px 3px 0 #70543b66}
@media(max-width:700px){#turkey-frame,#turkey-greeting{display:none}}
/* Slightly smaller room labels; object tap targets stay the same size. */
.object-label{font-size:9px;padding:2px 7px}
.coffee-label{font-size:10px;padding:2px 6px}
@media(max-width:700px){.object-label{font-size:8px;padding:2px 5px}.coffee-label{font-size:9px}}

#obj-contact .object-label{bottom:-16px}
@media(max-width:700px){#obj-contact .object-label{bottom:-37px}}

/* Keep the illustrated card bars within their board. */
.mini-board div{overflow:hidden}
@media(max-width:700px){
 #worm-window .cowboy-worm{left:25%;width:50%;height:50%}
 #worm-howdy{left:89.5%;top:auto;bottom:72%;transform:translateX(-50%);font-size:8px;white-space:nowrap}
 #worm-howdy:not(:empty){padding:2px 6px}
 #obj-resume .object-label{top:5px;bottom:auto}
}