/* ==========================================================================
   monchi studio — Mobile premium pass (preview, 18 Oct 2026)
   Loads AFTER styles.css. Every rule is inside a ≤809px media query, so
   desktop (≥810px) is untouched. Motion lives inside prefers-reduced-motion:
   no-preference blocks only.
   ========================================================================== */

/* ---------- 1. Layout, type and touch targets (phones) ---------- */
@media (max-width:809px){
 /* Microtype floor: nothing interactive or informative below 11px */
 .eyebrow{font-size:11px;letter-spacing:.08em}
 .placeholder-tag{font-size:10px;letter-spacing:.09em}

 /* Top navigation: one calm row, 44px targets */
 .topbar{align-items:center;padding-top:18px}
 .mobile-nav{flex-direction:row;align-items:center;gap:2px;font-size:11px;letter-spacing:.08em}
 .mobile-nav a{min-height:44px;display:flex;align-items:center;padding:0 9px;color:var(--ink)}
 .mobile-nav a:last-child{margin-right:-9px}
 .mobile-nav a:active{opacity:.6}

 /* Hero: fits small phones, no sticker tile */
 .hero-shell,.hero{height:100svh;min-height:600px}
 .hero-content{bottom:max(13%,96px)}
 .hero-intro{font-size:14px;line-height:1.55;max-width:300px;margin-bottom:30px}
 .line-three .stat-tile{display:none}
 .hero-word{scale:1}

 /* Floating dock: no box-in-a-box. One confident button, shown only between hero and contact */
 .floating-nav{left:50%;right:auto;bottom:max(16px,env(safe-area-inset-bottom));padding:0;gap:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:4px}
 .floating-nav .contact-button{min-height:52px;padding:0 20px 0 8px;gap:12px;box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 0 1px rgba(205,213,222,.12)}
 .contact-button{font-size:12px;letter-spacing:.06em;border-radius:4px}
 .contact-button img{width:36px;height:36px;border-radius:2px;object-position:center 14%}
 .contact-button svg{width:18px;height:18px;opacity:1}
 .contact-button:active{background:#d5dee8;transform:scale(.98)}

 /* What I do: statement first, then the work as a still editorial collage */
 .services-scene{height:auto;min-height:0;padding:112px 0 24px}
 .service-sticky{position:relative;top:auto;height:auto;gap:22px;align-content:start}
 .read-reveal{font-size:clamp(32px,9.2vw,38px);line-height:1.12}
 .service-small{font-size:15px;max-width:300px;margin-top:22px}
 .passing-work{position:relative;inset:auto;top:auto;margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
 .passing-card{position:relative;width:auto;top:auto!important;left:auto!important;right:auto!important;border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
 .passing-card.card-0{grid-column:1/-1}
 .passing-card.card-2{margin-top:44px}
 .passing-card.card-3,.passing-card.card-4{display:none}

 /* Featured */
 .section-heading{padding:104px 0 36px}
 .section-heading .quiet{font-size:13px}
 .featured-project{padding-bottom:88px}
 .feature-copy{gap:12px 16px;padding-top:22px}
 .feature-copy:before{transform:none!important;height:1px;background:var(--line);margin-bottom:8px}
 .feature-copy h3{font-size:clamp(24px,6.6vw,30px)}
 .feature-copy p{font-size:13px;grid-column:1/-1;grid-row:3}
 .feature-copy .placeholder-tag{grid-row:4;align-self:center}
 .feature-continue{grid-row:4!important;align-self:center}
 .feature-copy .placeholder-tag{font-size:10px;letter-spacing:.09em;color:var(--muted)}
 .feature-continue{font-size:12px;letter-spacing:.02em;color:var(--ink);gap:12px;min-height:48px}
 .feature-continue svg{width:44px;height:44px;padding:12px}
 .featured-project.mobile-in-focus .feature-continue svg{transform:none;background:#cdd5de}
 .feature-link:active .feature-continue svg{transform:scale(.94)}

 /* Approach */
 .approach{padding:104px 0 48px}
 .approach--pinned .approach-step{padding:18px 0 56px}
 .approach--pinned .step-media figcaption{font-size:12px;padding-top:12px}
 .approach--pinned .approach-step p{font-size:15px}

 /* Testimonials */
 .testimonials-scene{padding:72px 0}
 .testimonials-scene .quote-stack{gap:14px}
 .quote-card{padding:30px 26px 28px}
 .quote-card p{font-size:16px;line-height:1.55}
 .quote-person{font-size:13px}
 .quote-person div>span{font-size:12px}

 /* About: swipeable photo row instead of an endless marquee */
 .about{padding:104px 0 32px}
 .about-story p{font-size:16px}
 .photo-window{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .photo-window::-webkit-scrollbar{display:none}
 .photo-track{animation:none!important;gap:12px;padding-right:var(--gutter)}
 .photo-track>.personal-photo[aria-hidden="true"]{display:none}
 .personal-photo{width:76vw;height:76vw;max-width:340px;max-height:340px;scroll-snap-align:start;border-radius:4px}
 .personal-row p{font-size:15px}
 .experience-row p{font-size:14px}

 /* Contact: no cropped fragments, roomier buttons */
 .contact-collage{display:none}
 .contact-scene{min-height:600px;height:auto;padding:120px 0}
 .contact-actions{width:min(100%,320px);gap:12px}
 .contact-actions .contact-button{min-height:56px;padding:0 18px 0 10px}
 .outline-button{min-height:56px;font-size:11px;letter-spacing:.06em;padding:0 18px}
 .outline-button svg{width:18px;height:18px}
 .outline-button:active{background:#242d38}

 /* Footer: real tap targets, readable fine print */
 .site-footer{padding-top:56px;padding-bottom:max(48px,env(safe-area-inset-bottom))}
 .footer-contact>button{min-height:44px;font-size:15px}
 .footer-contact>.quiet{font-size:13px}
 .footer-links{gap:0}
 .footer-links>.eyebrow{margin-bottom:8px}
 .footer-links>a{min-height:44px;display:flex;align-items:center}
 .footer-links>.muted{font-size:15px}
 .footer-bottom{font-size:11px;gap:4px}
 .footer-bottom>a,.footer-bottom>a:nth-child(2){font-size:11px;min-height:44px;display:flex;align-items:center}

 /* Intro: bigger wordmark, real skip button */
 .intro-name{font-size:clamp(48px,13vw,108px)}
 .intro-skip{min-height:44px;padding:0 4px;font-size:12px;bottom:max(24px,env(safe-area-inset-bottom))}

 /* Project pages */
 .case-meta span{font-size:11px;letter-spacing:.08em}
 .case-meta p{font-size:14px}
 .case-section h2{font-size:12px}
 .case-section p{font-size:16px}
 .concept-fullpage figcaption,.concept-credit{font-size:13px}
 .concept-credit a{display:inline-flex;align-items:center;min-height:44px}
 .next-case{padding-bottom:28px}
 .back-link{font-size:12px}

 /* Archive */
 .archive-footer a,.archive-footer button{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
 .archive-footer button{padding:0 4px}
}

/* ---------- 2. Touch: no sticky hover states ---------- */
@media (max-width:809px) and (hover:none){
 .contact-button:hover{background:var(--button);transform:none}
 .contact-button:hover svg{width:18px}
 .outline-button:hover{background:#14181dcc}
 .floating-nav>a:hover,.footer-links a:hover{color:inherit}
}

/* ---------- 3. Motion: calm, one kind of movement (fade + 24px rise) ---------- */
@media (max-width:809px) and (prefers-reduced-motion:no-preference){
 /* Hero letters: a clean rise, no squash-and-stretch */
 .hero-word .char-clip>span{transform:translateY(105%)}
 .hero-ready .hero-word .char-clip>span{animation:mp-rise 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--word-delay,0s) + var(--char-index)*.035s)}

 /* Kill the scene choreography (scale/rotate/slide-in, spinning arrow, progress bar, scrubbed iframes) */
 .feature-visual:has(.showcase){transform:none}
 .feature-visual .showcase{transform:none}
 .feature-continue svg{transition:transform .2s,background .2s}
 .approach--pinned .step-media,.approach--pinned .approach-step:nth-child(even) .step-media{transform:none}
 .approach--pinned .step-text{transform:none}

 /* One reveal for every block */
 .mp-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
 .mp-reveal.mp-in{opacity:1;transform:none}
 .passing-card.mp-reveal.card-2{transition-delay:.12s}

 /* Approach rows use the site's own .reveal → .in-view hook, plus a slow settle on the image */
 .approach--pinned .approach-step.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
 .approach--pinned .approach-step.reveal.in-view{opacity:1;transform:none}
 .approach--pinned .approach-step .step-media>img{clip-path:none;transform:scale(1.04);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
 .approach--pinned .approach-step.in-view .step-media>img{transform:none;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}

 /* Dock: fades in after the hero, steps aside at the contact section */
 .floating-nav{transform:translate(-50%,0);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
 body.mp-phone:not(.mp-dock) .floating-nav{opacity:0;transform:translate(-50%,24px);pointer-events:none}
}
@media (max-width:809px) and (prefers-reduced-motion:reduce){
 body.mp-phone:not(.mp-dock) .floating-nav{visibility:hidden}
}
@keyframes mp-rise{from{transform:translateY(105%)}to{transform:translateY(0)}}

/* Mobile audit: usable logo target and no focus on the hidden dock. */
@media(max-width:809px){
 .topbar .wordmark{min-height:44px;display:inline-flex;align-items:center}
 body.mp-phone:not(.mp-dock) .floating-nav{visibility:hidden}
 body.mp-phone.mp-dock .floating-nav{visibility:visible}
}

/* Section touchups: native scroll stacks with a quiet orbital testimonial path. */
@media(max-width:809px) and (prefers-reduced-motion:no-preference){
 .services-scene .passing-work{display:block;padding-bottom:50px}
 .services-scene .passing-card:nth-child(-n+3){display:block;position:sticky;top:90px!important;width:100%;margin:0 0 90px;opacity:1;transform:none;perspective:900px}
 .passing-card .project-art{transform:rotateX(calc(var(--fold,0)*-15deg)) scale(calc(1 - var(--fold,0)*.08));transform-origin:center top;filter:brightness(calc(1 - var(--fold,0)*.24))}
 .featured-project{position:sticky;top:12px;min-height:0;height:auto;padding:12px 0 44px;opacity:1;transform:none;background:var(--bg);perspective:1100px}
 .featured-project .feature-link{transform:rotateX(calc(var(--fold,0)*-12deg)) scale(calc(1 - var(--fold,0)*.06));transform-origin:center top;filter:brightness(calc(1 - var(--fold,0)*.23))}
 .featured-project .feature-visual:has(.showcase){max-height:46svh;aspect-ratio:1;width:auto;align-self:stretch}
 .featured-project .feature-copy{padding-top:14px;gap:8px 12px}
 .featured-project .feature-copy h3{font-size:clamp(22px,6vw,28px)}
 .approach--pinned{overflow:visible}
 .approach--pinned .approach-step.reveal{position:sticky;top:16px;background:var(--bg);padding:16px 0 42px;opacity:1;transform:none;transition:none}
 .approach--pinned .step-media{max-width:100%;width:100%}
 .approach--pinned .step-media>img{max-height:43svh;width:100%;object-fit:contain}
 .approach--pinned .approach-step .step-media,.approach--pinned .approach-step:nth-child(even) .step-media{transform:translateY(calc(var(--fold,0)*-18px)) scale(calc(1 - var(--fold,0)*.08));opacity:calc(1 - var(--fold,0)*.65);transform-origin:center top}
 .approach--pinned .step-text{opacity:calc(1 - var(--fold,0)*.8);transform:translateY(calc(var(--fold,0)*-12px))}
 .testimonials-scene{overflow:clip}
 .testimonials-scene .quote-stack{gap:24px;padding:24px 20px 48px}
 .testimonials-scene .quote-card{max-width:100%;transform:none;opacity:1}
 .testimonials-scene .quote-card.mp-reveal{opacity:0;transform:translate3d(-72px,64px,0) rotate(-7deg) scale(.9);transform-origin:50% 85%;transition:opacity .65s ease-out,transform 1.15s cubic-bezier(.16,1,.3,1)}
 .testimonials-scene .quote-card.mp-reveal:nth-child(even){transform:translate3d(72px,64px,0) rotate(7deg) scale(.9)}
 .testimonials-scene .quote-card.mp-reveal.mp-in{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
}

/* Restore the original five passing images for What I do only. */
@media(max-width:809px) and (prefers-reduced-motion:no-preference){
 .services-scene{height:calc(100svh + 1400px);min-height:2200px;padding:0}
 .services-scene .service-sticky{position:sticky;top:0;height:100svh;align-content:center;gap:30px}
 .services-scene .passing-work{position:absolute;inset:85svh 0 0;margin:0;display:block;padding-bottom:0}
 .services-scene .passing-card:nth-child(n){position:absolute;display:block;width:53%;height:auto;aspect-ratio:1440/1000;margin:0;opacity:1;transform:none;transition:none;perspective:none;top:auto!important;left:auto!important;right:auto!important}
 .services-scene .passing-card.card-0{top:0!important;left:20px!important}
 .services-scene .passing-card.card-1{top:230px!important;right:20px!important}
 .services-scene .passing-card.card-2{top:480px!important;left:15%!important}
 .services-scene .passing-card.card-3{top:750px!important;left:20px!important}
 .services-scene .passing-card.card-4{top:1000px!important;right:20px!important}
 .services-scene .passing-card .project-art{transform:none;filter:none}
}
@media(max-width:809px) and (prefers-reduced-motion:reduce){
 .services-scene .passing-card:nth-child(n){display:block}
}

/* Restore the original automatic personal-photo strip on phones. */
@media(max-width:809px) and (prefers-reduced-motion:no-preference){
 .photo-window{overflow-x:hidden;scroll-snap-type:none}
 .photo-track{animation:photo-drift 50s linear infinite!important;gap:16px;padding-right:0;animation-play-state:paused!important}
 .photo-track.photos-ready{animation-play-state:running!important}
 .photo-track>.personal-photo[aria-hidden="true"]{display:block}
 .personal-photo{width:240px;height:240px;max-width:none;max-height:none;scroll-snap-align:none}
}
@media(max-width:809px) and (prefers-reduced-motion:no-preference) and (hover:hover){
 .photo-window:hover .photo-track{animation-play-state:paused!important}
}

/* Scroll-driven wheel: the centre card settles upright and takes focus. */
@media(max-width:809px) and (prefers-reduced-motion:no-preference){
 .testimonials-scene .quote-stack{gap:48px;padding:32px 28px 56px}
 .testimonials-scene .quote-card.mp-reveal,
 .testimonials-scene .quote-card.mp-reveal:nth-child(even),
 .testimonials-scene .quote-card.mp-reveal.mp-in,
 .testimonials-scene .quote-card{opacity:var(--wheel-opacity,1);transform:translate3d(var(--wheel-x,0px),0,0) rotate(var(--wheel-angle,0deg)) scale(var(--wheel-scale,1));transform-origin:50% 100%;transition:none}
 .testimonials-scene .quote-card.wheel-visible{will-change:transform,opacity}
}

/* Quiet mobile biography: clearer reading rhythm, photographs before personal copy. */
@media(max-width:809px){
 .about-introduction .about-story{gap:0}
 .about-introduction .about-story h2{margin-bottom:26px;max-width:11ch}
 .about-introduction .about-story .about-lead{font-size:22px;line-height:1.45;max-width:25ch;margin-bottom:26px;color:var(--ink)}
 .about-introduction .about-story p.muted{font-size:15px;line-height:1.75;max-width:36ch;margin-bottom:26px}
 .about-milestone{display:block;font-size:18px;line-height:1.5;color:var(--ink);margin-bottom:12px;max-width:26ch}
 .about-milestone strong{font-weight:600}
 .about-introduction .about-work-link{align-self:flex-start;margin-top:2px}
 .personal-row{display:flex;flex-direction:column;gap:0;padding:62px 0 36px}
 .personal-row>div:first-child{display:contents}
 .personal-row>div:first-child>.eyebrow{order:0;margin-bottom:22px}
 .personal-row>.photo-window{order:1;width:calc(100% + var(--gutter));margin:0 calc(-1 * var(--gutter)) 26px 0}
 .personal-row>div:first-child>p{order:2;font-size:15px;line-height:1.75;max-width:36ch;margin:0 0 18px}
 .personal-row>div:first-child>p:last-child{margin-bottom:0}
 .personal-row.mp-reveal,.personal-row.mp-reveal.mp-in{opacity:1;transform:none;transition:none}
 .about-settle{opacity:0;transform:translateY(9px);transition:opacity .55s ease-out,transform .55s ease-out}
 .about-settle.about-settled{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.about-settle{opacity:1;transform:none;transition:none}}

/* Compact boxes around the existing mobile figures; headline layout unchanged. */
@media(max-width:809px){
 .hero-mobile-stats{display:flex;gap:12px}
 .hero-mobile-stats>div{min-width:0;min-height:0;padding:8px 10px;gap:8px;border-radius:3px}
 .hero-mobile-stats strong{font-size:23px}
 .hero-mobile-stats span{font-size:9px;max-width:66px;line-height:1.3}
}

/* Let the footer painting meet the bottom edge on phones. */
@media(max-width:809px){footer.site-footer{padding-bottom:0}.site-footer .footer-landscape{margin-bottom:0}}