/* Phone layout follows the reading flow; the desktop canvas stays unchanged. */
@media(max-width:700px){
 :root{--mobile-hero-size:clamp(54px,16vw,110px);--mobile-section-size:clamp(32px,8.5vw,44px);--mobile-about-size:clamp(30px,8vw,42px);--mobile-contact-size:clamp(34px,9vw,48px);--mobile-card-size:clamp(23px,6vw,28px)}
 html,body{max-width:100%;overflow-x:clip}
 .page-circle{display:none}
 .wrap{width:calc(100% - 36px)}
 .hero.wrap,.series.wrap,#about-me.wrap,.contact-section.wrap{width:100%;padding-inline:18px}
 .hero{padding-top:24px}
 #hero-title{display:flex;align-items:baseline;justify-content:center;gap:6px;font-size:var(--mobile-hero-size);line-height:1.03;letter-spacing:-.075em;margin:28px 0 24px;min-height:0}
 #hero-title .title-word{flex:0 1 auto;min-width:0;line-height:1.03;white-space:nowrap}
 #hero-title .hero-dot{position:relative!important;left:auto!important;top:auto!important;width:.14em;height:.14em;flex:none;margin:0!important;vertical-align:baseline}
 #hero-title .hero-dot:after{animation:none}
 .hero-caption{padding:0}
 .hero-caption>p{margin-bottom:16px}
 .hero-gallery{margin-top:16px;gap:0}
 .hero-gallery .hero-main.photo-natural-frame{max-width:100%;width:100%}
 .hero-bottom{padding:0;margin-top:14px;min-height:0;gap:12px}
 .hero-bottom>span:last-child{font-size:9px;line-height:1.5;letter-spacing:.7px}
 .series{padding-top:48px;padding-bottom:48px;min-height:0}
 .section-meta{margin-bottom:20px}
 .section-heading{margin:20px 0 28px;gap:16px}
 .section-heading h2{font-size:var(--mobile-section-size);line-height:1.18;letter-spacing:-.04em}
 .project-grid{grid-template-columns:1fr;gap:36px;min-height:0}
 .project-card{width:100%;min-width:0}
 .card-image,.project-card:nth-child(4n+2) .card-image{width:100%;border-radius:16px}
 .card-index{top:14px;left:14px;font-size:10px;padding:6px 10px}
 .card-arrow{width:42px;height:42px;right:14px;bottom:14px;font-size:25px}
 .card-info{flex-direction:row;align-items:flex-start;gap:14px;padding-top:16px}
 .card-title{min-width:0;flex:1}
 .card-title h3{font-size:var(--mobile-card-size);line-height:1.25;letter-spacing:-.035em;margin-bottom:8px}
 .card-info p{font-size:10px;line-height:1.6;letter-spacing:0}
 .card-country{flex:none;font-size:10px;padding:8px 11px;min-height:32px;margin-top:2px}
 .photo-location{left:14px;bottom:14px;max-width:calc(100% - 82px);padding:6px 9px;font-size:11px;line-height:1.4;letter-spacing:0;white-space:normal;word-break:normal;overflow-wrap:break-word;text-align:left;border-radius:8px}
 .collection-bottom{margin-top:28px;padding-top:16px}
 .about{padding-block:48px}
 .about-inner{grid-template-columns:1fr;gap:32px}
 .about-photo{width:100%;margin:0}
 .about-photo.reveal{transform:none;opacity:1}
 .about-inner:before,.about-inner:after{left:auto;translate:none;border-radius:50%;z-index:2}
 .about-inner:before{width:96px;height:96px;top:-16px;right:-8px}
 .about-inner:after{width:76px;height:76px;top:-6px;right:2px}
 .about-copy h2{font-size:var(--mobile-section-size);line-height:1.2;letter-spacing:-.04em;margin:24px 0 20px}
 .about-copy>p{font-size:14px;line-height:1.85;margin:0 0 20px;max-width:100%}
 .about-copy .pill{margin-top:8px;min-height:48px}
 .about-signature{margin-top:28px}
 #about-me{min-height:280px;padding:80px 18px 48px}
 #about-me>.about-section-label{left:18px;top:28px}
 #about-me .about-trigger{gap:20px;align-items:center}
 #about-me .about-title-text{flex:1;white-space:normal;font-size:var(--mobile-about-size);line-height:1.18;letter-spacing:-.035em}
 #about-me .about-open-icon{width:44px;height:44px;font-size:25px!important;margin-left:0}
 #conversation{padding-block:56px}
 #conversation>div{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:28px}
 #conversation h2{font-size:var(--mobile-contact-size);line-height:1.15;letter-spacing:-.045em}
 #conversation .contact-orbit{width:52px;height:52px;font-size:32px;margin:0;justify-self:end}
 #conversation .contact-orbit:before{inset:-7px}
 #conversation .contact-orbit:after{inset:-14px}
 #conversation>p{font-size:12px;line-height:1.7;max-width:100%;margin-top:24px}
 .scroll-orbit{right:14px;bottom:14px;width:44px;height:44px}
}
@media(min-width:600px) and (max-width:700px){:root{--mobile-series-columns:repeat(2,minmax(0,1fr))}.project-grid{grid-template-columns:var(--mobile-series-columns);gap:32px 20px}.card-info{flex-direction:column}.photo-location{font-size:10px}}