/* Clean artwork, independent type, landscape covers and scroll-stacked folders. */
:root{--nav-height:76px}
.hero{height:calc(100svh - var(--nav-height));min-height:620px;max-height:1000px}
.hero-art>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 54%;max-width:100%}
.hero-brand{position:absolute;left:4.3%;top:38px;display:flex;align-items:flex-start;flex-direction:column;gap:14px;z-index:2;pointer-events:none}
.hero-brand span{background:var(--lime);font:italic 800 clamp(22px,3vw,44px)/1.06 var(--display);letter-spacing:-1.5px;padding:5px 12px}
.hero-live{z-index:3;bottom:9%;left:4.3%;max-width:500px}
.hero-live h1{font-size:clamp(25px,2.5vw,40px)}
.hero-designer{position:absolute;right:4%;bottom:13%;z-index:6;background:var(--pink);color:#fff;padding:2px 5px;font:900 24px/1 var(--mono);letter-spacing:-1px;pointer-events:none}
.ticker-track{display:flex;width:max-content;animation:marquee 32s linear infinite;will-change:transform}
.ticker-group{flex:none;white-space:pre}
@media(max-width:700px){.hero-designer{right:6%;bottom:13%;font-size:19px}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.desktop-tools{z-index:6;bottom:4%;gap:10px}
.chaos{z-index:4}
.popup,.popup:nth-child(1),.popup:nth-child(2),.popup:nth-child(3){top:0;left:0;right:auto;display:block;transform:none;will-change:transform;width:clamp(175px,15.5vw,260px);animation:window-appear .25s both}
.popup .titlebar{touch-action:none;cursor:grab;user-select:none}
.popup.dragging .titlebar{cursor:grabbing}
.popup .titlebar:focus-visible{outline:3px solid #1644f3;outline-offset:3px}
.popup-image{height:auto;width:100%;aspect-ratio:16/9;object-fit:cover}
.popup .popup-body{padding:9px 11px}
.popup .popup-body p{font-size:9px}
.popup button{position:relative}
.portrait-art{height:auto;aspect-ratio:1366/1207;overflow:visible;align-self:center;width:100%;margin:0}
.portrait-art img{position:static;inset:auto;width:100%;height:auto;max-width:100%;object-fit:contain}
.about-grid{gap:35px;grid-template-columns:1.08fr .92fr}
#projectCards{isolation:isolate;position:relative;padding-bottom:35px}
.folder{position:sticky;top:calc(var(--nav-height) + 22px);margin:0 0 55px;padding-top:44px;z-index:calc(var(--index) + 1)}
.folder-tab{height:45px;left:calc(var(--index) * 24%);width:28%;display:flex;align-items:center;justify-content:center;clip-path:polygon(0 100%,16% 0,82% 0,100% 100%);font:700 11px var(--mono);padding:9px 25px;border:0}
.folder:first-child .folder-tab{left:0;clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
.folder-main{grid-template-columns:.9fr 1.1fr;min-height:0;padding:clamp(24px,3.3vw,50px);gap:clamp(25px,4vw,65px);box-shadow:0 7px 16px #26262612;align-items:center}
.folder-main:hover{transform:none;box-shadow:0 7px 16px #26262612}
.folder-copy{min-width:0}
.folder-image{display:block;width:100%;min-width:0;aspect-ratio:16/10;align-self:center}
.folder-image img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.folder h3{font-size:clamp(32px,4vw,58px);letter-spacing:-2px}
.folder-tags{margin-bottom:22px}
.folder-image:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:inset 0 0 0 3px #fff9;pointer-events:none;z-index:1}
.case-hero{grid-template-columns:.8fr 1.2fr}
.case-hero>img{width:100%;height:auto;aspect-ratio:16/10;max-height:none;object-fit:contain}
.case-gallery .gallery-item{min-width:0}
@keyframes window-appear{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@media(max-width:1050px){.popup,.popup:nth-child(1),.popup:nth-child(2),.popup:nth-child(3){width:190px}.folder-tab{font-size:9px}.about-grid{gap:15px}.portrait-art{height:auto}.hero-live{max-width:420px}}
@media(max-width:700px){
 :root{--nav-height:100px}
 .hero{height:calc(100svh - var(--nav-height));min-height:590px;max-height:850px}
 .hero-art>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
 .hero-brand{top:24px;left:6%;gap:9px}
 .hero-brand span{font-size:21px;letter-spacing:-1px;padding:5px 8px}
 .hero-live{bottom:16%;left:6%;max-width:85%}
 .hero-live h1{font-size:27px;max-width:none}
 .hero-live .eyebrow{max-width:270px}
 .desktop-tools{left:6%;right:6%;bottom:5%;gap:7px;flex-wrap:wrap}
 .desktop-tools .tiny-button{font-size:8px}
 .popup,.popup:nth-child(1){width:160px}
 .popup:nth-child(n+2){display:none}
 .popup .titlebar{font-size:7px}
 .popup .popup-body p{font-size:8px}
 .about-grid{grid-template-columns:1fr;gap:30px}
 .portrait-art{width:min(100%,430px);height:auto;aspect-ratio:1366/1207;margin:auto}
 .portrait-art img{position:static;width:100%;height:auto}
 .folder{position:relative;top:auto;margin-bottom:35px;padding-top:35px}
 .folder-tab{left:0;width:205px;height:36px;font-size:9px;clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
 .folder-main{grid-template-columns:1fr;gap:24px;padding:24px}
 .folder h3{font-size:38px}
 .folder-image{aspect-ratio:16/10}
 .folder-image img{height:100%;width:100%;aspect-ratio:auto}
 .case-hero{grid-template-columns:1fr}
 .case-hero>img{max-height:none;aspect-ratio:16/10}
}
@media(max-height:650px) and (min-width:701px){.folder{position:relative;top:auto}.folder-tab{left:0;width:240px}.hero{min-height:590px}}
@media(prefers-reduced-motion:reduce){.popup{will-change:auto}.folder{position:relative;top:auto}.folder-tab{left:0;width:240px}}
.contact-icons{grid-template-columns:repeat(3,minmax(0,1fr));max-width:930px;gap:32px;margin:45px 0 20px}
.contact-icons>a{display:block;min-width:0;background:none;border:0;box-shadow:none;padding:0;transition:transform .2s}
.contact-icons>a:hover{transform:translateY(-7px)}
.contact-icons>a>img{display:block;width:100%;height:auto;object-fit:contain}
.cv-pending{display:inline-block;font:700 10px var(--mono);padding:9px 13px;border:var(--line);background:var(--lime);margin:0 0 45px}
@media(max-width:700px){.contact-icons{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:30px}.cv-pending{margin-bottom:30px}}
@media(max-width:420px){.contact-icons{grid-template-columns:1fr;max-width:240px;margin-inline:auto;gap:24px}}

.cv-panel{margin-top:28px;padding-top:24px;border-top:var(--line)}
.cv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.cv-actions a{display:inline-block;padding:13px 18px;border:var(--line);background:var(--lime);color:var(--ink);font:700 12px var(--mono);text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.cv-actions a:last-child{background:#fff}
.cv-actions a:hover{transform:translateY(-2px)}
@media(max-width:700px){.popup:nth-child(n){display:block;width:140px}.popup-image{max-height:85px}.popup .popup-body{padding:7px}.popup .popup-body p{margin:0 0 5px}}

/* The original chrome logo moves inside the same white surface as the loader. */
.startup-logo-stage{height:190px;display:grid;place-items:center;perspective:850px;background:#fff;isolation:isolate}
.startup-logo{width:100%;transform:none;animation:none}
.startup-logo svg{display:block;width:100%;height:auto;overflow:hidden}
@keyframes startup-turn{0%,100%{transform:rotateY(-24deg) rotateZ(-3deg) translateY(3px)}50%{transform:rotateY(24deg) rotateZ(3deg) translateY(-5px)}}
.progress span{animation-duration:6s}
.boot.hidden .startup-logo{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.startup-logo{animation:none;will-change:auto}}

/* Keep all supplied cover artwork visible, including its titles. */
.popup-image,.folder-image img{object-fit:contain}

.case-gallery{grid-template-columns:1fr}
.gallery-item img{display:block;width:100%;height:auto;object-fit:contain}
.stats strong{display:flex;align-items:baseline;line-height:1.1;font-variant-numeric:tabular-nums}
.stats strong .stat-reel{display:inline-block;overflow:hidden;height:1.1em;width:.62em;position:relative;font:inherit;letter-spacing:inherit}
.stats strong .stat-strip{display:block;font:inherit;line-height:1.1;transform:translateY(0);transition:transform 2.8s cubic-bezier(.16,.65,.2,1);margin:0}
.stats strong .stat-strip.settled{transform:translateY(calc(var(--stop) * -1.1em))}
.stats strong .stat-strip>span{display:block;height:1.1em;font:inherit;line-height:1.1;margin:0}
.stats strong .stat-suffix{font:inherit;line-height:1.1;margin:0}
.about-work{padding:65px 0 75px;background:linear-gradient(#fce5f2,#fffaf4)}
.about-work h2{font-size:clamp(40px,6vw,76px);margin:12px 0 42px;max-width:900px}
.experience-folder{border:2px solid var(--ink);background:#faffbf;box-shadow:6px 6px 0 var(--ink);margin:35px 0 24px}
.experience-folder summary{position:relative;list-style:none;display:flex;align-items:center;gap:20px;padding:30px;cursor:pointer;font-weight:700;font-size:clamp(18px,2.5vw,30px)}
.experience-folder summary::-webkit-details-marker{display:none}
.experience-folder summary:focus-visible{outline:3px solid #224eff;outline-offset:5px}
.experience-tab{position:absolute;left:-2px;bottom:100%;font:700 10px var(--mono);padding:10px 30px 8px 24px;background:inherit;border:2px solid var(--ink);border-bottom:0;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,0 100%)}
.experience-tab::after{content:"";position:absolute;inset:-2px -2px 0;background:var(--ink);clip-path:polygon(calc(100% - 18px) 0,100% 100%,calc(100% - 2px) 100%,calc(100% - 20px) 0);pointer-events:none}
.experience-folder summary small{display:block;font:11px var(--mono);margin-top:12px}
.folder-toggle{margin-left:auto;flex-shrink:0;font:30px var(--mono)}
.experience-folder[open] .folder-toggle{transform:rotate(45deg)}
.experience-folder-body{padding:30px;border-top:2px solid var(--ink);background:#fffdfb}
.experience-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.experience-skills>span{border:1px solid var(--ink);padding:20px;font-size:16px;background:#fff}
.experience-skills b{color:#b9147a;font:11px var(--mono);display:block;margin-bottom:12px}
.experience-label{margin:55px 0 45px}
.macau-folder{background:#f6b8df}
.experience-folder-body h3{font:500 clamp(25px,3vw,40px) Georgia,serif;margin:18px 0 22px}
.experience-image{display:block;width:100%;border:1px solid #2223;background:transparent;padding:0;margin:0 0 24px}
.experience-image img{display:block;width:100%;height:auto}
.campaign-posters{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-bottom:45px}
.campaign-story{max-width:900px;margin:auto}
.campaign-story section{padding:24px 0;border-top:1px solid #2223}
.campaign-story p,.campaign-story li{font-size:15px;line-height:1.85}
.campaign-story li{margin-bottom:9px}
.campaign-role{font-weight:700;color:#a41465}
.campaign-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}
.campaign-metrics>div{padding:20px 12px;border:1px solid var(--ink);background:var(--lime)}
.campaign-metrics strong{display:block;font-size:clamp(25px,4vw,44px)}
.campaign-metrics span{display:block;font:10px/1.6 var(--mono);margin-top:10px}
.campaign-story .experience-image{max-width:380px;margin:30px auto 0}
@media(max-width:700px){.about-work{padding:45px 0}.experience-folder summary{padding:22px 16px;gap:10px}.experience-folder-body{padding:18px}.experience-skills,.campaign-posters{grid-template-columns:1fr}.campaign-posters{gap:10px}.campaign-metrics{gap:6px}.campaign-metrics>div{padding:14px 8px}.campaign-story p,.campaign-story li{font-size:14px}}
@media(prefers-reduced-motion:reduce){.stats strong .stat-strip{transition:none!important}}
.campaign-posters-stacked{display:block;max-width:760px;margin:0 auto 50px}
.campaign-posters-stacked .experience-image{margin-bottom:32px}
.campaign-video-story{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:40px;align-items:center;margin:45px auto;max-width:1050px}
.campaign-video-story .experience-image{max-width:360px;margin:auto}
.campaign-video-story p{font-size:15px;line-height:1.85}
.campaign-video-story .campaign-metrics strong{font-size:clamp(22px,3vw,36px)}
.campaign-video{aspect-ratio:16/9;background:#111;margin-top:35px}
.campaign-video iframe{display:block;width:100%;height:100%;border:0}
.video-credit{font-size:12px;line-height:1.8;color:#555;max-width:900px;margin:18px 0}
@media(max-width:700px){.campaign-video-story{grid-template-columns:1fr;gap:20px}.campaign-video-story .experience-image{max-width:280px}}
.campaign-video-story{grid-template-columns:minmax(280px,.85fr) minmax(0,1.3fr);max-width:none;align-items:center}
.campaign-video-story .phone-image{border:0;background:transparent;box-shadow:none;width:100%;max-width:390px}
.phone-image svg{display:block;width:100%;height:auto}
@media(max-width:700px){.campaign-video-story{grid-template-columns:1fr}.campaign-video-story .phone-image{max-width:320px}}
@media(hover:hover) and (pointer:fine){html,body,body *,body a,body button,body select,.popup .titlebar,.popup.dragging .titlebar,.experience-folder summary{cursor:url('assets/cursor.svg') 14 14,auto}body input,body textarea,[contenteditable=true]{cursor:text}}
.cursor-particle{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;user-select:none;line-height:1;font-family:Georgia,serif;color:var(--particle-color);text-shadow:1px 0 #fff,-1px 0 #fff,0 1px #fff,0 -1px #fff;animation:cursor-twinkle .85s ease-out forwards}
@keyframes cursor-twinkle{0%{opacity:0;transform:translate(0,0) scale(.35) rotate(0)}15%{opacity:.95}100%{opacity:0;transform:translate(var(--drift-x),var(--drift-y)) scale(.15) rotate(var(--turn))}}
@media(prefers-reduced-motion:reduce){.cursor-particle{display:none}}
.skills-folder-wrap{position:relative;margin-top:62px}
.skills-folder{background:#efdced;position:relative;margin-top:0}
.skills-folder summary{padding:18px 26px;font-size:clamp(24px,3vw,36px);font-family:Georgia,serif;font-weight:400}
.skills-folder .experience-folder-body{padding:24px;background:#fff9fd}
.skills-tabs{position:absolute;left:160px;right:20%;bottom:100%;display:flex;gap:4px;align-items:stretch;border-bottom:0;z-index:2}
.skills-tabs button{position:relative;flex:1;border:0;padding:11px 20px 9px 12px;background:var(--ink);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,0 100%);font:700 10px var(--mono);min-height:36px;color:var(--ink);isolation:isolate}
.skills-tabs button::before{content:"";position:absolute;inset:2px 2px 0;background:#dce9ff;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,0 100%);z-index:-1}
.skills-tabs button:nth-child(2)::before{background:#f3d9f8}.skills-tabs button:nth-child(3)::before{background:#e5dcff}
.skills-tabs button[aria-selected=true]::before{background:var(--ink)}
.skills-tabs button:nth-child(2){background:#f3d9f8}.skills-tabs button:nth-child(3){background:#e5dcff}
.skills-tabs button[aria-selected=true]{background:var(--ink);color:white}
.skills-tabs button:focus-visible{outline:3px solid #ef50b4;outline-offset:-6px}
.skills-page{padding:22px 0 6px;background:transparent;min-height:0}.skills-page[hidden]{display:none}
.skills-page>.eyebrow{display:none}
.skills-page .experience-skills{gap:12px}.skills-page .experience-skills>span{border:1px solid var(--ink);padding:18px;background:#fffdfb;line-height:1.6}
.skills-page .experience-skills>span{transition:background-color .18s ease}
@media(hover:hover){.skills-page .experience-skills>span:hover{background:var(--lime)}.skills-page .experience-skills>span:nth-child(even):hover{background:#f6b8df}}
.itzy-folder{background:#ffd2d8;margin-top:50px}
.itzy-intro,.itzy-location,.itzy-original,.itzy-live{max-width:1000px;margin:0 auto 42px}
.itzy-intro p,.itzy-location p{line-height:1.85}
.itzy-photo{max-width:620px;margin:36px auto 48px}.itzy-photo img{display:block;width:100%;height:auto}.itzy-photo figcaption{font:11px/1.8 var(--mono);padding-top:14px}
.itzy-original video{display:block;width:100%;max-height:780px;background:#161318}
.itzy-live iframe{display:block;width:min(100%,540px);height:760px;margin:auto;border:1px solid #ddd;background:#fff}
@media(max-width:700px){.skills-folder summary{padding:18px}.skills-folder .experience-folder-body{padding:12px}.skills-tabs{left:115px;right:0;gap:2px}.skills-tabs button{padding:8px 10px 8px 4px;font-size:8px;min-height:36px}.skills-page{padding:0}.itzy-live iframe{height:680px}}

/* FairyTalk interactive prototype */
.case-prototype iframe{display:block;width:100%;height:clamp(480px,78vh,850px);border:1px solid var(--ink,#282828);background:#f3dafa;margin:24px 0 20px}.prototype-link{display:inline-block;padding:12px 18px;border:1px solid currentColor;background:var(--lime,#e6ff32);color:inherit;text-decoration:none}.prototype-link:hover,.prototype-link:focus-visible{background:var(--pink,#f35aba)}
@media(max-width:600px){.case-prototype iframe{height:78svh;min-height:460px}}
/* Imaginight: fixed-order Guardian Card ritual */
.guardian-game{--card-width:clamp(102px,18%,180px);position:relative;margin:42px 0 50px;padding:34px 20px 30px;border-radius:28px;background:radial-gradient(ellipse at 50% 70%,#fff8dc 0,transparent 58%),linear-gradient(135deg,#ece3ff,#fceaf7 60%,#e2f3ff);color:#483378;text-align:center;overflow:hidden}.guardian-heading h4{font-family:Georgia,serif;font-size:clamp(26px,3vw,38px);margin:12px 0}.guardian-heading p{margin:10px auto;max-width:650px}.guardian-hint{font-size:13px;letter-spacing:.04em}.guardian-deck{height:clamp(200px,29vw,290px);position:relative;margin:40px auto 0;max-width:1000px}.guardian-card{position:absolute;top:22px;left:0;width:var(--card-width);padding:0;border:0!important;background:none!important;box-shadow:none!important;touch-action:none;user-select:none;opacity:0;transform:translateY(25px) rotate(-5deg);transition:left .75s cubic-bezier(.22,.8,.25,1),transform .3s,opacity .3s;transition-delay:calc(var(--i)*65ms);filter:drop-shadow(0 6px 5px #5a318724)}.is-dealt .guardian-card{left:calc((100% - var(--card-width))/8*var(--i));opacity:1;transform:translateY(0) rotate(0)}.guardian-card img{display:block;width:100%;height:auto;pointer-events:none}.guardian-card:hover:not(:disabled),.guardian-card:focus-visible{transform:translateY(-30px) rotate(-3deg);z-index:20;transition-delay:0s;filter:drop-shadow(0 16px 8px #754ea445)}.guardian-card:focus-visible{outline:3px solid #b57dec;outline-offset:0;border-radius:20px}.guardian-card.is-dragging{z-index:30;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(-5deg);transition:none;filter:drop-shadow(0 20px 12px #754ea455)}.guardian-card.is-chosen{visibility:hidden}.has-picked .guardian-card{opacity:.55}.guardian-stage{height:370px;position:relative;display:grid;place-items:center;margin-top:12px;perspective:1200px}.guardian-empty{font-size:68px;line-height:1.4;color:#ac90d7;opacity:.5}.has-picked .guardian-empty{display:none}.guardian-picked{position:absolute;width:270px;aspect-ratio:720/920;padding:0;border:0!important;background:none!important;box-shadow:none!important;perspective:1200px;animation:guardian-arrive .5s ease-out}.guardian-picked[hidden],.guardian-again[hidden]{display:none}.guardian-flipper{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.75,.25,1)}.guardian-picked.is-revealed .guardian-flipper{transform:rotateY(180deg)}.guardian-flipper img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;filter:drop-shadow(0 12px 10px #76579c2b);pointer-events:none}.guardian-face{transform:rotateY(180deg)}.guardian-status{min-height:30px;font-size:15px;margin:10px auto 16px!important}.guardian-again{border:1px solid #7450a3;background:#fff8;border-radius:30px;padding:12px 24px;color:inherit}.guardian-again:hover,.guardian-again:focus-visible{background:#ffdfef}.guardian-picked:focus-visible{outline:3px solid #ab6acc;outline-offset:3px;border-radius:24px}@keyframes guardian-arrive{from{opacity:0;transform:translateY(-40px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.guardian-game{padding:28px 8px;--card-width:110px}.guardian-deck{height:190px;margin-top:35px}.guardian-stage{height:340px}.guardian-picked{width:250px}.guardian-hint{font-size:11px}}@media(prefers-reduced-motion:reduce){.guardian-card,.guardian-flipper{transition:none!important}.guardian-picked{animation:none}}