/* Close-up compositions retain the established scrapbook art direction. */
.hero{min-height:0;padding-top:20px;padding-bottom:70px;overflow:clip}
.hero .photoreal-collage{width:min(900px,76vw,calc((100svh - 320px)*1.33333));max-width:none;margin-bottom:12px;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .55s cubic-bezier(.2,.7,.2,1);transform-origin:50% 55%}
.hero-scrapbook-image{animation:none}
.hero-role{font-size:30px;line-height:1.2}
.hero h1{font-size:clamp(100px,9.3vw,148px);margin-top:7px}
.hero .underlink{font-size:14px;margin-top:20px}
.about{width:calc(100% - 48px);max-width:1440px;padding-top:20px;padding-bottom:110px}
.scrapbook{max-width:1360px;padding:66px 56px 58px;gap:48px}
.scrapbook-left{min-height:680px}
.bio-paper{padding:44px 40px 120px}
.bio-paper h2{font-size:clamp(52px,5.2vw,75px)}
.bio-paper p{font-size:17px;line-height:1.55}
.id-card{padding:28px;width:95%}
.id-body{grid-template-columns:105px 1fr;gap:22px}
.id-photo{height:140px}.id-body h3{font-size:36px}.id-body p{font-size:13px}.id-signature{font-size:28px}
.memory-photo{width:250px;top:280px;left:-14px;z-index:3}
.ticket-memory{top:340px;right:-2px;width:185px}
.education-memory{top:535px;right:0;width:220px}
.handwritten-about{top:255px;left:48%}
.travel-memory{bottom:-50px;left:12px}
.proof-note{width:240px;right:10px}
.service-card{padding:40px;gap:8%;min-height:460px}
.service-copy h3{font-size:clamp(42px,4.2vw,62px)}
.service-copy>p:not(.label){font-size:17px}
.supplied-visual{height:390px}
.work-heading h2{font-size:clamp(64px,7.2vw,108px)}
.process-snapshot{width:185px}
.video-track{gap:48px}
.video-card{flex-basis:calc((100% - 96px)/3)}
.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 42px}
.project-cover{aspect-ratio:4/4.7}
.project-name{font-size:40px}.project-description{font-size:14px}.project-count{font-size:13px}
.case-result{font-size:42px}.case-story{font-size:16px;max-width:620px}
.portfolio-heading h3{font-size:56px}
.personal-content{max-width:1260px;gap:10%}
.personal-photo{max-width:490px;width:96%}
.personal-text p{font-size:17px}
/* Individual translate/rotate preserve each paper's original CSS rotation. */
.motion-drift{translate:0 var(--drift-y,0px)}
@media(hover:hover) and (pointer:fine){
 .personal-photo,.memory-photo,.process-snapshot,.contact-collage .polaroid{transition:rotate .55s cubic-bezier(.2,.7,.2,1)}
 .personal-photo:hover,.memory-photo:hover,.process-snapshot:hover,.contact-collage .polaroid:hover{rotate:2deg}
 .project-open .project-cover img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
 .project-open:hover .project-cover img{transform:scale(1.035)}
}
@media(max-width:1100px){
 .hero .photoreal-collage{width:min(800px,88vw,calc((100svh - 320px)*1.33333))}.hero-role{font-size:27px}
 .scrapbook{padding:52px 36px 48px;gap:30px}.scrapbook-left{min-height:650px}
 .bio-paper{padding:35px 27px 125px}.bio-paper h2{font-size:48px}.bio-paper p{font-size:15px}
 .id-card{padding:25px 20px}.id-body{grid-template-columns:65px 1fr;gap:12px}.id-photo{height:120px}.id-body h3{font-size:30px}.id-body p{font-size:11px}.id-signature{font-size:24px}
 .memory-photo{width:185px;top:275px;left:-10px}.ticket-memory{width:140px;top:320px;right:-2px}.education-memory{width:170px;top:500px}.travel-memory{bottom:-20px;left:-5px}.handwritten-about{top:235px;left:45%}
 .proof-note{width:190px;right:15px}.service-card{padding:30px}.service-copy h3{font-size:42px}.service-copy>p:not(.label){font-size:16px}.supplied-visual{height:340px}
 .video-track{gap:35px}.video-card{flex-basis:calc((100% - 35px)/2)}
 .portfolio-grid{gap:50px 28px}.project-name{font-size:35px}.case-result{font-size:36px}.case-story{font-size:15px}.portfolio-heading h3{font-size:48px}.process-snapshot{width:135px}
}
@media(max-width:700px){
 .hero{width:100%;padding:24px 0 48px}.hero .photoreal-collage{width:min(520px,110vw);max-width:none;margin-bottom:14px;transform:none}
 .hero-role{font-size:22px;max-width:330px;padding:0 15px}.hero h1{font-size:94px;margin-top:14px}.hero .underlink{font-size:12px;margin-top:22px}
 .about{width:calc(100% - 32px);padding-top:20px;padding-bottom:85px}
 .scrapbook{padding:28px 22px 30px;gap:40px}.scrapbook-left{height:680px;min-height:680px}
 .id-card{top:12px;left:0;width:94%;padding:22px 18px}.id-body{grid-template-columns:72px 1fr;gap:12px}.id-photo{height:115px}.id-body h3{font-size:30px}.id-body p{font-size:10px}.id-signature{font-size:23px}
 .memory-photo{width:170px;top:235px;left:-5px;z-index:2}.ticket-memory{top:280px;right:-5px;width:130px}.education-memory{top:430px;right:-5px;width:153px}.travel-memory{bottom:0;left:0;width:155px}.handwritten-about{top:209px;left:42%}
 .bio-paper{padding:33px 24px 115px}.bio-paper h2{font-size:44px}.bio-paper p{font-size:15px}.proof-note{width:155px;right:5px}
 .service-card{padding:24px 20px;gap:30px;min-height:0}.service-copy h3{font-size:40px}.service-copy>p:not(.label){font-size:16px}.supplied-visual{height:340px}
 .work-heading h2,.work-heading h2 em{font-size:45px}.process-snapshot{width:85px}.work-heading h2{padding-right:80px}
 .video-track{gap:24px}.video-card{flex-basis:78%}
 .portfolio-grid{grid-template-columns:1fr;gap:45px}.project-cover{aspect-ratio:4/5}.project-name{font-size:35px}.project-description{font-size:13px}.case-result{font-size:36px}.case-story{font-size:15px}.portfolio-heading h3{font-size:42px}
 .personal-content{gap:45px}.personal-photo{width:90%;max-width:340px}.personal-text p{font-size:16px}
}
@media(max-width:370px){
 .hero h1{font-size:85px}.hero-role{font-size:20px}.scrapbook{padding-inline:18px}.id-body{grid-template-columns:60px 1fr;gap:10px}.id-card{padding:20px 15px}.id-body h3{font-size:27px}.id-body p{font-size:9px}
 .memory-photo{width:145px;top:245px}.ticket-memory{width:107px;top:290px}.education-memory{width:137px}.travel-memory{width:130px}.bio-paper{padding:30px 20px 110px}.bio-paper h2{font-size:37px}
 .work-heading h2,.work-heading h2 em{font-size:37px}.case-result{font-size:33px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.motion-drift{translate:none!important}.hero .photoreal-collage{transform:none!important}
 .personal-photo,.memory-photo,.process-snapshot,.contact-collage .polaroid{rotate:none!important}
 .project-open:hover .project-cover img{transform:none}
}

/* Direct feedback, without moving text or changing the layout. */
.socials :is(a,button),.gallery-controls button,.project-count,.underlink,.header a{transition:color .2s ease,background-color .2s ease,translate .25s ease}
.socials :is(a,button):active,.gallery-controls button:active,.project-open:active{scale:.98}
@media(hover:hover) and (pointer:fine){
 .socials :is(a,button):hover,.gallery-controls button:hover{translate:0 -3px}
 .underlink:hover,.project-open:hover .project-count{color:#eac2cd}
 .tags>span{transition:rotate .3s ease}.tags>span:hover{rotate:-2deg}
}
@media(prefers-reduced-motion:reduce){
 .socials :is(a,button),.gallery-controls button,.tags>span{translate:none!important;rotate:none!important}
}

/* Each mask uses the same original collage; the finished artwork stays intact. */
.hero-piece,.hero-piece-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-piece{transform-origin:50% 50%}
.hero-piece-art{z-index:2;overflow:visible}
.hero-piece-notebook{z-index:0}.hero-piece-travel{z-index:1}.hero-piece-pink{z-index:2}.hero-piece-photo{z-index:3}.hero-piece-tape{z-index:4}.hero-piece-pin{z-index:5}
.hero-piece-pin{transform-origin:67% 18%}.hero-piece-tape{transform-origin:18% 83%}

.hero-underlay{opacity:0}

/* Word wrappers retain natural wrapping and the existing italic emphasis. */
.intro-word{display:inline-block}

.intro>.label{scroll-margin-top:110px}

/* Quiet service indices use the same text face as labels and navigation. */
.service-number{font:400 20px/1.2 var(--body);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;color:var(--muted)}
@media(max-width:700px){.service-number{font-size:18px}}

/* Only the JS controller prepares entrances; no scroll-linked CSS competes. */
.motion-pending{opacity:0!important}
@media(prefers-reduced-motion:reduce){.motion-pending{opacity:1!important}}

/* Equal outer columns keep the navigation at the viewport midpoint. */
@media(min-width:701px){
 .header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 .header .brand{justify-self:start}.header nav{justify-self:center}.header-contact{justify-self:end}
}

/* A disclosure keeps every section available in the narrow header. */
.mobile-menu-toggle,.mobile-menu-toggle[hidden]{display:none}
@media(max-width:700px){
 .header.mobile-nav-ready{display:grid;grid-template-columns:minmax(0,1fr) 64px auto;gap:10px}
 .header.mobile-nav-ready .brand{min-width:0;max-width:175px}
 .mobile-nav-ready .mobile-menu-toggle:not([hidden]){display:flex;align-items:center;justify-content:center;min-height:44px;width:64px;padding:0;background:none;border:0;color:var(--white);font:400 11px/1 var(--body);cursor:pointer}
 .mobile-nav-ready .mobile-menu-toggle:focus-visible{outline:1px solid var(--pink);outline-offset:-4px}
 .header.mobile-nav-ready nav{display:none;position:absolute;top:100%;left:0;right:0;gap:0;padding:12px 20px 20px;background:var(--black);border-bottom:1px solid #383835}
 .header.mobile-nav-ready.is-menu-open nav{display:flex;flex-direction:column;align-items:stretch;animation:mobile-menu-enter .2s ease-out}
 .header.mobile-nav-ready nav a,.header.mobile-nav-ready nav a:not([href="#work"]){display:flex;align-items:center;min-height:48px;padding:8px 0;font:400 17px/1.4 var(--body);text-transform:none}
 .header.mobile-nav-ready .header-contact{justify-self:end}
}
@keyframes mobile-menu-enter{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}