*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;background:#238cf7;color:#fff}body{overflow-x:hidden}.hero{position:relative;width:100%;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:linear-gradient(#0075ff,#b4d2f0)}#sky{position:absolute;inset:0;width:100%;height:100%;z-index:0}header{position:absolute;z-index:5;top:30px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center}.wordmark{font-size:40px;letter-spacing:-3px;font-weight:900;color:white;text-decoration:none}.wordmark span{font-size:16px;vertical-align:top;display:inline-block;padding:7px 0 0 4px;letter-spacing:0}.role{text-align:right;font-size:12px;font-weight:700;letter-spacing:1.5px;line-height:1.5}.title{position:absolute;top:18%;left:0;width:100%;text-align:center;font-weight:900;font-size:clamp(100px,22vw,330px);line-height:.84;letter-spacing:-.07em;color:rgba(255,255,255,.86);z-index:1;pointer-events:none}.title i{font-family:Georgia,serif;font-weight:400}.character{position:absolute;z-index:3;bottom:-1px;left:50%;transform:translateX(-50%);width:min(112vh,1100px);height:auto;aspect-ratio:4/3;pointer-events:none}.character canvas,.character img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.character canvas{opacity:0}.character.ready canvas{opacity:1}.character.ready img{opacity:0}#stickers{position:absolute;inset:0;z-index:2;pointer-events:none}.sticker{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:clamp(105px,calc(var(--w)*1vw),310px);pointer-events:auto;will-change:transform;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 10px 10px #173e6630)}.sticker img{width:100%;height:auto;display:block;transition:scale .35s cubic-bezier(.2,.8,.2,1);-webkit-user-drag:none}.sticker:hover img{scale:1.08}.sticker.copy{opacity:.64;filter:drop-shadow(0 6px 8px #173e661c)}footer{position:absolute;z-index:5;bottom:23px;left:42px;right:42px;display:flex;justify-content:space-between;gap:20px;font-size:10px;font-weight:700;letter-spacing:1.3px;text-shadow:0 1px 8px #0008}#load{position:absolute;z-index:8;bottom:58px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.8px;background:#fff;color:#28577b;padding:9px 14px;border-radius:30px;transition:opacity .4s}#load.done{opacity:0;pointer-events:none}a:focus-visible{outline:2px solid #fff;outline-offset:7px}.sticker a{display:block}@media(min-aspect-ratio:19/10){.character{width:100vh}.title{top:16%;font-size:18vh}.sticker{max-width:230px}}@media(max-width:700px){header{top:22px;left:22px;right:22px}.wordmark{font-size:34px}.role{font-size:10px}.hero{min-height:620px}.title{top:23%;font-size:25vw;line-height:.92}.character{width:110vw;bottom:8%;}.sticker{width:calc(var(--mw)*1vw);left:calc(var(--mx)*1%);top:calc(var(--my)*1%)}footer{left:22px;right:22px;bottom:22px;font-size:9px;line-height:1.4}footer span:first-child{max-width:85px}footer span:last-child{max-width:85px;text-align:right}#hint{max-width:110px;text-align:center}#load{bottom:70px}.sticker.copy{opacity:.5}}@media(prefers-reduced-motion:reduce){.sticker img{transition:none}}

/* Visible cloud fallback remains underneath until the shader has actually drawn. */
.hero{background:#1685f3 url("assets/sky-fallback.webp") center/cover no-repeat}#sky{opacity:0}#sky.visible{opacity:1}

/* Updated portfolio name and headline. */
.wordmark{font-size:clamp(19px,2.1vw,34px);letter-spacing:-.045em;line-height:1.05;white-space:nowrap}
.title{font-size:clamp(44px,10.5vw,200px);letter-spacing:-.055em;white-space:nowrap;top:18%}
footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
footer #hint{grid-column:2;text-align:center;max-width:none}
footer span:last-child{grid-column:3;justify-self:end}
@media(min-aspect-ratio:19/10){.title{top:16%;font-size:min(10.5vw,22vh)}}
@media(max-width:700px){.wordmark{font-size:clamp(17px,4.7vw,28px)}.role{font-size:8px;letter-spacing:.8px}.title{top:23%;font-size:10.4vw}footer{grid-template-columns:1fr auto;gap:12px}footer #hint{grid-column:1;justify-self:start;text-align:left;max-width:150px}footer span:last-child{grid-column:2}}

/* Compact headline, layered in front of the portrait. */
.hero .title{left:50%;width:33.333%;transform:translateX(-50%);font-size:3.8vw;z-index:4}

/* Clickable artwork retains the original float and hover motion. */
button.sticker{border:0;padding:0;background:none;font:inherit;cursor:pointer}
button.sticker:focus-visible{outline:2px solid white;outline-offset:8px;border-radius:12px}
button.sticker:active img{scale:.96}
body.brand-open{overflow:hidden}
#brand-window{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100svh;max-height:none;margin:0;padding:0;border:0;overflow:hidden;color:white;background:#1685f3 url('assets/sky-fallback.webp') center/cover no-repeat;overscroll-behavior:contain}
#brand-window::backdrop{background:rgba(10,40,74,.12)}
#brand-sky{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
#brand-sky.visible{opacity:1}
.brand-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:24px 90px 32px}
.brand-tabs{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:clamp(12px,3vw,56px);min-height:110px;overflow-x:auto;padding:12px 10px 18px;scrollbar-width:thin}
.brand-tab{flex:0 0 clamp(74px,12vw,165px);height:92px;padding:8px;border:1px solid transparent;border-radius:18px;background:transparent;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.brand-tab img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px #173e6630)}
.brand-tab:hover{transform:translateY(-4px)}
.brand-tab[aria-pressed=true]{border-color:#ffffff90;background:#ffffff24}
.brand-tab:focus-visible,.brand-close:focus-visible{outline:3px solid white;outline-offset:4px}
.brand-close{position:absolute;right:24px;top:30px;width:48px;height:48px;border:1px solid #ffffff80;border-radius:50%;background:#ffffff26;color:white;font:300 34px/1 Arial;cursor:pointer;transition:background .2s,transform .2s}
.brand-close:hover{background:#ffffff50;transform:rotate(90deg)}
.brand-stage{flex:1;min-height:0;display:grid;place-items:center;padding:35px 12px 65px}
#brand-feature{width:min(58vw,780px);height:min(56vh,550px);object-fit:contain;filter:drop-shadow(0 20px 24px #12375b35);user-select:none;-webkit-user-drag:none}
@media(max-width:700px){.brand-content{padding:78px 12px 20px}.brand-close{top:17px;right:19px;width:44px;height:44px}.brand-tabs{gap:5px;justify-content:space-between;min-height:80px;padding:8px 0 15px}.brand-tab{flex:0 0 calc((100% - 15px)/4);height:66px;padding:3px;border-radius:12px}.brand-stage{padding:20px 5px 80px}#brand-feature{width:88vw;height:48vh}}
@media(prefers-reduced-motion:reduce){.brand-tab,.brand-close{transition:none}}

/* One glass selection surface glides between the brand buttons. */
.brand-tabs{position:relative;isolation:isolate}
.brand-tab{position:relative;z-index:1}
.brand-tab[aria-pressed=true]{border-color:transparent;background:transparent}
.brand-glass{position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:0;border:1px solid #ffffff90;border-radius:18px;background:linear-gradient(135deg,#ffffff3d,#ffffff16);box-shadow:inset 0 1px 0 #ffffff70,0 8px 24px #16548a12;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);will-change:transform,width}
.brand-glass.positioned{opacity:1}
/* Size the portrait and headline from the same responsive anchor. */
.hero{--portrait-width:min(112svh,1100px,120vw);height:100svh;min-height:0}
.hero .character{width:var(--portrait-width);bottom:-1px}
.hero .title{top:auto;bottom:calc(var(--portrait-width)*.68);width:33.333%;font-size:3.8vw;line-height:1}
@media(min-aspect-ratio:19/10){.hero{--portrait-width:100svh}}
@media(max-width:700px){.hero{--portrait-width:min(132vw,104svh)}.hero .title{width:62%;font-size:7vw;bottom:calc(var(--portrait-width)*.68)}.brand-glass{border-radius:12px}footer{bottom:max(16px,env(safe-area-inset-bottom))}}
@media(max-height:500px) and (min-aspect-ratio:1/1){.hero{--portrait-width:100svh}.hero .title{font-size:4.8svh;width:auto;bottom:68svh}header{top:16px}.wordmark{font-size:22px}.role{font-size:9px}}
/* Milanote: animated glass names, curated card galleries and dotted loading. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#mobile-portrait{display:none}.character.image-renderer #portrait{display:none}.character.image-renderer.ready #mobile-portrait{display:block;opacity:1;background:transparent}.character.image-renderer.ready #poster{opacity:0}
.brand-label{position:absolute;left:50%;top:100%;transform:translate(-50%,-8px) scale(.94);opacity:0;pointer-events:none;white-space:nowrap;color:white;font:700 11px/1.3 Arial;letter-spacing:.08em;padding:11px 16px;border:1px solid #ffffff85;border-radius:12px;background:linear-gradient(135deg,#ffffff4a,#ffffff18);box-shadow:inset 0 1px #ffffff55,0 8px 20px #17487620;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:opacity .22s,transform .35s cubic-bezier(.22,1,.36,1);z-index:8;text-shadow:0 1px 5px #28548360}
.sticker:hover,.sticker:focus-visible{z-index:8}.sticker:is(:hover,:focus-visible) .brand-label,.brand-tab:is(:hover,:focus-visible) .brand-label{opacity:1;transform:translate(-50%,6px) scale(1)}
.brand-tabs{overflow:visible;padding-bottom:24px}.brand-tab .brand-label{top:88%;font-size:9px;letter-spacing:.03em;padding:8px 11px}
.brand-content{padding:20px 90px 22px}.brand-tabs{min-height:100px}.brand-tab{height:80px}
.brand-stage{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 0 18px;gap:12px}
.work-heading{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}#brand-feature{width:160px;height:63px;filter:drop-shadow(0 6px 10px #12375b25)}#work-title{margin:0;font-size:10px;letter-spacing:.15em;font-weight:700;text-shadow:0 1px 7px #28548370}
.work-carousel{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:14px}
#work-swiper{height:min(49svh,490px);width:min(35svh,370px,66vw);overflow:visible;margin:0 auto;flex-shrink:1;min-height:120px}
#work-swiper .swiper-slide{overflow:hidden;border-radius:22px;background:#f8f8f8;box-shadow:0 16px 28px #15447524;border:1px solid #ffffff70;display:flex;align-items:center;justify-content:center}
#work-swiper img{width:100%;height:100%;object-fit:contain;user-select:none}
.work-controls{display:flex;align-items:center;gap:25px;flex:0 0 auto}.work-controls button{width:42px;height:42px;border-radius:50%;border:1px solid #ffffff85;background:#ffffff24;backdrop-filter:blur(12px);color:white;font:24px Arial;cursor:pointer;transition:background .2s,transform .2s}.work-controls button:hover{background:#ffffff50;transform:scale(1.07)}#work-count{font-size:11px;letter-spacing:.14em;min-width:65px;text-align:center}.work-hint{margin:0;font-size:8px;letter-spacing:.2em;opacity:.85}
.work-filters{position:absolute;left:0;top:45%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid #ffffff50;border-radius:20px;background:#ffffff12;backdrop-filter:blur(10px);isolation:isolate}.work-filters[hidden]{display:none}.work-filters button{position:relative;z-index:1;min-width:135px;border:0;background:none;color:white;padding:18px 22px;font:700 11px Arial;letter-spacing:.06em;cursor:pointer;border-radius:14px}.filter-glass{position:absolute;left:0;top:0;border-radius:14px;border:1px solid #ffffff90;background:linear-gradient(135deg,#ffffff40,#ffffff15);box-shadow:inset 0 1px #ffffff50;transition:transform .5s cubic-bezier(.22,1,.36,1),width .5s,height .5s;pointer-events:none}.carousel-credit{position:absolute;bottom:0;right:0;color:white;font-size:8px;opacity:.65;text-decoration:none}.work-filters button:focus-visible,.work-controls button:focus-visible{outline:2px solid white;outline-offset:3px}
#load{position:fixed;inset:0;z-index:100;transform:none;border-radius:0;padding:0;background:#1685f3 url('assets/sky-fallback.webp') center/cover no-repeat;color:white;transition:opacity .65s,visibility .65s;letter-spacing:.08em}#load.done{visibility:hidden;opacity:0}.loading-caption{position:absolute;top:36%;left:4%;font:10px monospace;letter-spacing:.06em}#loading-digits{position:absolute;width:min(44vw,700px);right:4%;top:35%;fill:#fff}.loading-arrow{position:absolute;left:4%;top:62%;width:90px;fill:#fff;animation:loading-nudge 1.2s ease-in-out infinite}@keyframes loading-nudge{50%{transform:translateX(12px)}}
@media(max-width:900px){.work-filters{left:-45px}.work-filters button{min-width:100px;padding:16px 13px}}
@media(max-width:700px){
 .hero .title{width:92%;font-size:10vw;bottom:calc(var(--portrait-width)*.66);white-space:nowrap;text-shadow:0 2px 18px #2d80c230}
 .brand-content{padding:64px 18px 20px}.brand-tabs{min-height:78px;padding:3px 0 18px}.brand-tab{height:58px}.brand-tab .brand-label{font-size:7px;max-width:110px;white-space:normal;text-align:center;padding:6px 8px}
 .brand-stage{gap:12px;padding:8px 0 16px}.work-heading{gap:3px}#brand-feature{width:120px;height:44px}#work-title{font-size:8px}
 .work-filters{position:relative;top:auto;left:auto;transform:none;flex-direction:row;flex:0 0 auto;padding:4px;border-radius:15px;gap:4px}.work-filters button{min-width:110px;padding:12px 18px;font-size:10px;border-radius:11px}.filter-glass{border-radius:11px}
 #work-swiper{height:min(43svh,420px);width:min(65vw,31svh);min-height:100px}.work-carousel{gap:12px}.work-controls button{width:38px;height:38px}.work-controls{gap:20px}.carousel-credit{font-size:7px;bottom:-4px}
 .loading-caption{top:31%;left:7%}#loading-digits{top:42%;right:7%;width:86%}.loading-arrow{top:67%;left:7%;width:64px}
}
@media(max-height:560px) and (min-width:701px){.brand-content{padding:6px 70px 10px}.brand-tabs{min-height:65px;padding-bottom:8px}.brand-tab{height:55px}.work-heading{position:absolute;right:0;top:30%}#work-swiper{height:55svh;width:39svh}.work-hint{display:none}.work-controls{gap:15px}.work-controls button{width:30px;height:30px}.brand-stage{padding:8px 0 0}.work-carousel{gap:8px}}
@media(prefers-reduced-motion:reduce){.loading-arrow{animation:none}.brand-label,.filter-glass,#load{transition:none}}
/* Give the work the space previously occupied by the duplicate brand sticker. */
.brand-stage{padding:0 0 8px;gap:8px}.work-heading{gap:0;padding:0 0 4px}#work-title{font-size:10px}
#work-swiper{height:min(68svh,calc(100svh - 220px));width:min(58vw,calc((100svh - 220px)*.9),740px);min-height:100px}.work-carousel{gap:10px}
.art-open{border:0;padding:0;margin:0;background:transparent;width:100%;height:100%;display:block;cursor:zoom-in;border-radius:inherit}.art-open:focus-visible{outline:3px solid #2785ff;outline-offset:-4px}
#art-viewer{position:fixed;inset:0;border:0;padding:48px 24px 24px;margin:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;background:transparent;overflow:hidden;outline:none;box-sizing:border-box}
#art-viewer[open]{display:flex;align-items:center;justify-content:center}#art-viewer::backdrop{background:#073957a8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#art-full{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:0;padding:0;background:transparent;border-radius:22px;box-shadow:0 20px 70px #07274240}
.art-close{position:absolute;right:22px;top:16px;width:44px;height:44px;border:1px solid #ffffff80;background:#ffffff25;color:#fff;border-radius:50%;font:30px/1 Arial;cursor:pointer;z-index:1}.art-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:700px){.brand-content{padding:58px 15px 14px}.brand-stage{padding:0 0 12px;gap:7px}.work-heading{padding:0}#work-swiper{width:min(75vw,calc((100svh - 275px)*.85));height:calc(100svh - 275px)}.work-filters{padding:3px}.work-filters button{padding:10px 16px}.work-hint{font-size:7px}.work-carousel{gap:8px}#art-viewer{padding:65px 12px 20px}#art-full{border-radius:20px}.art-close{right:15px;top:14px}}
@media(max-height:560px) and (min-width:701px){.work-heading{position:static;padding:0}#work-swiper{height:calc(100svh - 150px);width:min(50vw,calc((100svh - 150px)*1.1))}}

/* Borderless, independently implemented artwork stack. */
.identity{display:flex;flex-direction:column;gap:10px}.creative-role{font-size:10px;letter-spacing:.15em}.contact-open{background:none;border:0;color:inherit;padding:0;cursor:pointer;align-self:flex-start;font-family:inherit}header{align-items:flex-start}footer{justify-content:flex-end}
.brand-stage{padding-top:12px!important}.card-gallery{position:relative;overflow:visible;touch-action:pan-y}.card-stack{position:relative;width:100%;height:100%}.art-card{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:transparent;border:0;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s;transform-origin:center 65%}.art-card .art-open{display:flex;width:auto;height:auto;max-width:100%;max-height:100%;padding:0;align-items:center;justify-content:center;background:transparent;border:0;border-radius:22px;cursor:zoom-in}.art-card .art-open img{display:block!important;width:auto!important;height:auto!important;max-width:100%;max-height:min(72svh,calc(100svh - 250px));border:0!important;border-radius:22px;object-fit:contain;background:transparent}#work-swiper{height:calc(100svh - 250px);width:min(60vw,780px)}
#contact-window{box-sizing:border-box;width:min(620px,90vw);max-height:90svh;padding:64px 38px 32px;border-radius:36px;border:1px solid #ffffff70;color:white;background:linear-gradient(145deg,#448edfbe,#d4e7f5a8),url('assets/sky-fallback.webp') center/cover;backdrop-filter:blur(24px);box-shadow:0 30px 100px #10376160}#contact-window::backdrop{background:#12345b65;backdrop-filter:blur(8px)}#contact-title{font-size:clamp(26px,5vw,42px);margin:0 0 28px;letter-spacing:-.04em}.contact-close{position:absolute;right:20px;top:14px;border:0;background:none;color:white;font-size:36px;cursor:pointer}.contact-row{display:flex;justify-content:space-between;gap:20px;width:100%;padding:23px 4px;border:0;border-bottom:1px solid #ffffff55;background:none;color:white;font:inherit;text-align:left;cursor:pointer}.contact-row:disabled{cursor:default}.contact-row span:last-child{opacity:.8;overflow-wrap:anywhere}#contact-status{min-height:20px;font-size:12px}
@media(max-width:700px){.identity{gap:7px}.creative-role{font-size:8px}.contact-open{font-size:clamp(14px,3.4vw,24px)}.identity .wordmark{font-size:clamp(14px,3.4vw,24px)}#work-swiper{height:calc(100svh - 310px);width:76vw}.art-card .art-open img{max-height:calc(100svh - 310px)}#contact-window{padding:60px 24px 24px}.contact-row{font-size:14px}}
@media(prefers-reduced-motion:reduce){.art-card{transition:none}}

.work-filters{z-index:20} .contact-open:focus-visible{outline:2px solid white;outline-offset:6px}

/* Keep the front artwork crisp while the rest recedes into the sky. */
.card-gallery{cursor:grab;user-select:none;-webkit-user-select:none}.art-card{will-change:transform;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .25s}.art-card .art-open{cursor:grab}.art-card[data-active="false"] .art-open{filter:blur(7px);pointer-events:none}.art-card[data-active="true"] .art-open{filter:none}.card-gallery.dragging,.card-gallery.dragging .art-open{cursor:grabbing}.card-gallery.dragging .art-card{transition:none}.art-card[data-active="false"]{pointer-events:none!important}.art-card img{-webkit-user-drag:none;pointer-events:none}
.identity{align-items:stretch;gap:10px}.creative-role{font-size:clamp(13px,1.3vw,21px);font-weight:700;letter-spacing:.1em;line-height:1.1;text-align:center;text-shadow:0 2px 10px #12488745}
.brand-contact{position:absolute;left:28px;top:35px;font-size:clamp(19px,2.1vw,34px);z-index:25}.brand-tabs{max-width:740px;width:62%;margin:0 auto}.contact-open:hover{opacity:.8}
@media(max-width:1100px){.brand-contact{left:22px;top:22px;font-size:20px}.brand-tabs{width:75%}}
@media(max-width:700px){.creative-role{font-size:clamp(10px,2.3vw,16px);letter-spacing:.04em}.identity{gap:8px}.brand-contact{left:20px;top:22px;font-size:clamp(14px,3.4vw,24px)}.brand-tabs{width:100%;max-width:none}.art-card[data-active="false"] .art-open{filter:blur(5px)}}
@media(prefers-reduced-motion:reduce){.art-card{transition:none}}

.character picture{display:contents}

/* Own the gallery gesture so mobile browsers cannot cancel it as page scrolling. */
#work-swiper,#work-swiper .card-stack,#work-swiper .art-card,#work-swiper .art-open{touch-action:none;-webkit-touch-callout:none}
.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.hero-actions .contact-open{align-self:flex-end}.about-open{border:0;background:none;color:white;padding:0;font-family:inherit;cursor:pointer}.about-open:hover{opacity:.8}
#about-window{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;max-width:none;height:100dvh;max-height:none;overflow-y:auto;overflow-x:hidden;color:#fff;background:#1685f3 url('assets/sky-fallback.webp') center/cover;font-family:Arial,Helvetica,sans-serif;isolation:isolate;overscroll-behavior:contain}#about-window::backdrop{background:#12345b65;backdrop-filter:blur(8px)}#about-sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2;opacity:0}#about-sky.visible{opacity:1}.about-header{position:sticky;top:0;left:auto;right:auto;z-index:5;width:100%;padding:28px 42px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#2086ec85,transparent)}.about-close{border:1px solid #ffffff80;background:#ffffff25;color:white;border-radius:50%;width:46px;height:46px;font:34px/1 Arial;cursor:pointer}.about-copy{position:relative;z-index:2;width:min(860px,74vw);margin:30px auto 110px;font-size:clamp(22px,2.1vw,32px);line-height:1.5;letter-spacing:-.025em;text-shadow:0 2px 18px #22649e65}.about-copy h2{font-size:clamp(38px,5.3vw,80px);line-height:1.02;letter-spacing:-.055em;margin:0 0 45px;font-weight:900}.about-copy p{margin:0 0 30px}.creative-process{display:flex;flex-direction:column;gap:12px}.creative-process span{font-size:.72em}.about-stickers{position:fixed;inset:0;z-index:-1;pointer-events:none}.about-sticker{position:absolute;transform:translate(-50%,-50%) rotate(var(--rotation));width:clamp(110px,18vw,300px);padding:0;border:0;background:none;opacity:.45;pointer-events:auto;cursor:pointer;animation:about-float 6s ease-in-out infinite}.about-sticker:nth-child(even){animation-delay:-3s}.about-sticker img{width:100%;height:auto;filter:drop-shadow(0 10px 15px #17487630)}.about-sticker:hover{opacity:.8}.about-work{font:inherit;color:inherit;padding:0;border:0;background:none;text-align:left;cursor:pointer}.about-work:hover{text-decoration:underline}.about-opened{overflow:hidden}@keyframes about-float{50%{transform:translate(-50%,calc(-50% - 12px)) rotate(var(--rotation))}}
@media(max-width:700px){.hero-actions{gap:8px}.hero-actions .wordmark{font-size:clamp(14px,3.4vw,24px)}.about-header{padding:20px}.about-copy{width:auto;margin:26px 26px 80px;font-size:22px;line-height:1.5}.about-copy h2{font-size:44px;margin-bottom:34px}.about-sticker{width:130px;opacity:.18}.about-close{width:42px;height:42px}.about-copy p{margin-bottom:26px}}
@media(prefers-reduced-motion:reduce){.about-sticker{animation:none}}

/* Keep modal scrolling inside its own viewport, never on the hero beneath it. */
html.modal-open,html.modal-open body{overflow:hidden;overscroll-behavior:none}
#about-window{height:100vh;height:100dvh;overflow:hidden}
#about-window .about-header{position:absolute;inset:0 0 auto;padding:28px 42px;height:102px;z-index:5}
.about-scroll{position:absolute;inset:102px 0 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none;z-index:2;scroll-padding:24px}
.about-scroll::-webkit-scrollbar{display:none}
.about-scroll:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #ffffff80}
.about-copy{margin-top:22px;margin-bottom:max(80px,env(safe-area-inset-bottom))}
.about-socials{font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.about-socials:hover{text-decoration:underline}
.about-scrollbar{position:absolute;top:122px;bottom:max(34px,env(safe-area-inset-bottom));right:17px;width:14px;border:1px solid #ffffff60;border-radius:30px;background:linear-gradient(180deg,#ffffff18,#ffffff38);box-shadow:inset 0 1px 2px #ffffff60,0 4px 18px #17487625;backdrop-filter:blur(12px);z-index:6;touch-action:none;cursor:pointer}
.about-scrollbar[hidden]{display:none}
.about-scroll-thumb{position:absolute;inset:0 1px auto;width:10px;min-height:44px;border-radius:30px;background:linear-gradient(180deg,#fffffff2,#d7eeffd9);border:1px solid #ffffff;box-shadow:0 2px 9px #0a63bd60;will-change:transform;cursor:grab}
.about-scrollbar:active .about-scroll-thumb{cursor:grabbing}
.about-scrollbar:focus-visible{outline:2px solid white;outline-offset:5px}
.card-gallery.dragging .art-open{transition:none}
@media(max-width:700px){#about-window .about-header{padding:20px;height:82px}.about-scroll{top:82px}.about-copy{margin:22px 38px 80px 26px}.about-scrollbar{top:98px;right:10px;bottom:24px;width:12px}.about-scroll-thumb{width:8px}}

.about-scroll .about-stickers{z-index:0}