/* Phone layout measured from the reference's 320px mobile canvas.
   Rem units scale that composition to the phone width without disabling zoom. */
@media (max-width:767px){
 html{font-size:clamp(16px,5vw,24px)}
 :root{--pad:1.25rem;--sans:"Almarena Mobile","DM Mono",monospace}
 body{font-size:.9375rem;line-height:1.4;overflow-x:clip}
 .site-header{height:5.0625rem;padding:0 1.25rem;align-items:flex-start;background:white;color:var(--text)}
 .site-header .brand{font-size:.9375rem;line-height:1.4;width:7.8125rem;max-width:calc(100% - 3.5rem);white-space:normal;margin-top:.75rem}
 .menu-toggle{position:absolute;right:.7rem;top:.6875rem;width:2.75rem;height:2.75rem;min-width:44px;min-height:44px;font-size:0;line-height:0;display:grid;place-items:center}
 .menu-toggle::before{content:"";width:1.25rem;height:.9375rem;background:linear-gradient(currentColor,currentColor) top/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 1px no-repeat}
 body.menu-open .menu-toggle::before{height:1px;transform:rotate(45deg);background:currentColor}
 body.menu-open .menu-toggle::after{content:"";position:absolute;width:1.25rem;height:1px;transform:rotate(-45deg);background:currentColor}
 .nav-overlay{background:white}
 .nav-overlay ul{width:100%;padding:7.625rem 1.25rem 3rem;height:100dvh;overflow-y:auto;box-shadow:none;transform:translateY(-.625rem)}
 .nav-overlay a{font-family:"Almarena Logo",var(--sans);font-size:1.5rem;font-weight:400;line-height:1.4;padding:.7rem 0;text-align:center;white-space:normal}
 body.menu-open .nav-overlay ul{transform:none}
 .hero{height:auto;min-height:0;padding:9.1875rem 0 4.3125rem;display:flex;flex-direction:column;align-items:center}
 .stage{width:100%;height:15.4375rem;flex-shrink:0}
 .stage img{width:100%;height:100%;max-width:calc(100% - 6.25rem);object-fit:contain}
 .stage-arrow{width:2.75rem;height:2.75rem;min-width:44px;min-height:44px}
 .stage-arrow svg{width:.625rem;height:1.0625rem;stroke-width:1}
 .arrow-prev{left:.75rem}.arrow-next{right:.75rem}
 .stage-caption{width:100%;height:6.25rem;min-height:6.25rem;margin:0;padding:1.75rem 2.75rem 0;position:relative;display:block;text-align:center}
 .stage-caption .serif-title{font-family:Arial,sans-serif;font-size:.8125rem;font-style:italic;line-height:1.4;font-weight:400;display:block;letter-spacing:0}
 .stage-caption .counter{position:absolute;top:auto;bottom:1.0625rem;right:3.125rem;font-size:.75rem;line-height:1.4;margin:0}
 .hero-foot{display:contents;pointer-events:auto}
 .hero-foot .socials{position:absolute;top:6.6875rem;left:50%;right:auto;transform:translateX(-50%);display:flex;gap:.25rem;justify-content:center;align-items:center}
 .socials a{width:1.875rem;height:2rem;min-width:0;min-height:32px}
 .socials svg{width:1rem;height:1rem}
 .btn-outline{font-family:var(--sans);font-size:.875rem;min-width:8.125rem;min-height:2.375rem;padding:.5rem .875rem;border-radius:.8125rem;line-height:1.4}
 .hero-foot .btn-outline{position:relative;align-self:center;font-size:.775rem;min-width:6.625rem;min-height:1.625rem;padding:.25rem .625rem;line-height:1.4;border-radius:.8125rem;margin:0}
 .section{padding:3.125rem var(--pad)}
 .section-inner{width:100%;max-width:none}
 .section-title,.serif-title{font-family:"Almarena Logo",var(--sans);font-weight:400;font-size:2.1217rem;line-height:1.03;letter-spacing:normal}
 .lead{font-size:.9375rem;line-height:1.4;max-width:none}
 .label{font-size:.875rem;line-height:1.4}
 .home-about{padding-top:1.875rem;padding-bottom:0}
 .about-grid{display:flex;flex-direction:column;gap:1.875rem;align-items:stretch}
 .about-grid .section-title{margin-bottom:1.25rem}
 .home-about .about-grid img{width:calc(100% + 2.5rem);max-width:none;margin-left:-1.25rem;height:auto;max-height:none;aspect-ratio:320/400;object-fit:cover}
 .about-statement{font-size:1.086rem;line-height:1.3;margin-top:1.875rem;max-width:none}
 .about-statement+.btn-outline{margin-top:1.25rem}
 .work-section{padding-top:3.125rem;padding-bottom:1.875rem}
 .work-head .section-title,.connect-section .section-title{margin-bottom:1.25rem}
 .work-head .lead,.connect-section .lead{font-family:var(--sans);font-size:1.086rem;line-height:1.3;font-weight:400;max-width:none}
 .work-head .btn-outline,.connect-section .btn-outline{margin-top:1.25rem}
 .marquee{width:calc(100% - 2.5rem);margin:0 auto;padding:0;overflow:hidden}
 .marquee-group{gap:0;padding:0}
 .marquee-group img{height:12.8125rem;width:auto;max-width:none;object-fit:cover}
 .marquee-track{gap:0;padding:0;animation-duration:35s}
 .connect-section{padding-top:3.125rem;padding-bottom:2.5rem}
 .site-footer{margin:0 var(--pad);padding:1.25rem 0 calc(1.25rem + env(safe-area-inset-bottom,0px));gap:1rem;font-size:.875rem}
 .footer-title{font-family:"Almarena Logo",var(--sans);font-weight:400;font-size:1.184rem}
 .footer-contact{gap:1rem;align-items:center;flex-wrap:wrap;font-size:.875rem}
 .footer-contact .socials{width:100%;justify-content:flex-start;gap:.25rem}
 .footer-copy{font-size:.75rem;line-height:1.5;letter-spacing:0}
 .page-portfolio main{padding-top:5.0625rem}
 .page-portfolio .filters{padding:0 var(--pad) 1.875rem;gap:.125rem 1rem;justify-content:flex-start;flex-wrap:wrap}
 .filter{font-size:.8125rem;line-height:1.4;min-height:2.125rem;padding:.375rem 0}
 .page-portfolio .grid{display:grid;grid-template-columns:minmax(0,1fr);padding:0 var(--pad) 3.125rem;gap:3.125rem}
 .grid-item .frame{aspect-ratio:1;width:100%}
 .grid-item img{width:100%;height:100%;max-width:100%;object-fit:contain}
 .grid-caption{position:absolute;inset:0;display:flex;opacity:0;padding:1rem;background:rgba(255,255,255,.9);align-items:center;justify-content:center;text-align:center}
 .grid-caption h2{font-size:1.125rem;line-height:1.4}
 .grid-caption>span{font-size:.8125rem}
 .grid-item:focus-visible .grid-caption{opacity:1}
 .page-head{padding:7rem var(--pad) 2rem}
 .page-project .hero{padding:5.875rem 0 1.875rem;height:auto;min-height:0}
 .page-project .stage{width:calc(100% - 2.5rem);height:19.8125rem;max-width:none}
 .page-project .stage img{max-width:100%;width:100%;height:100%;object-fit:contain}
 .page-project .arrow-prev{left:-1.125rem}.page-project .arrow-next{right:-1.125rem}
 .page-project .stage-caption{height:2.5rem;min-height:2.5rem;display:block;padding:0}
 .page-project .stage-caption>.serif-title{display:none}
 .page-project .stage-caption .counter{right:1.25rem;bottom:.5rem}
 .page-project .hero-foot .socials{display:none}
 .page-project .hero-foot .btn-outline{margin-top:.5rem}
 .page-project .section{padding-top:1.3125rem;padding-bottom:3.125rem}
 .project-heading{margin-bottom:1.25rem}
 .project-heading h1{font-family:"Almarena Logo",var(--sans);font-size:1.8125rem;font-weight:400;line-height:1.2;letter-spacing:normal;overflow-wrap:anywhere}
 .page-project .project-info{display:flex;flex-direction:column;gap:1.875rem;width:100%;max-width:none}
 .page-project .meta dt{font-size:.875rem;margin-top:.9375rem;line-height:1.4}
 .page-project .meta dt:first-child{margin-top:0}
 .page-project .meta dd{font-size:1rem;margin-top:.3125rem;line-height:1.4}
 .page-project .project-info .lead{font-size:.9375rem;line-height:1.5;max-width:none!important;margin-top:0!important}
 .project-nav{margin:0 var(--pad) 2.5rem;padding:1.25rem 0 0;font-size:.8125rem;gap:1.25rem}
 .project-nav a{max-width:45%;min-height:2.5rem;display:flex;align-items:center}
 .project-nav a:nth-child(2){max-width:none;justify-content:center}
 .page-about .site-header{background:white;color:var(--text)}
 .about-hero{height:22rem;min-height:0;max-height:none;margin-top:5.0625rem}
 .about-hero>img{object-position:center 40%}
 .about-hero-title{top:1.25rem;left:var(--pad);right:var(--pad)}
 .about-hero-title h1{font-family:"Almarena Logo",var(--sans);font-size:2.467rem;line-height:1.04;font-weight:400;letter-spacing:normal}
 .about-hero-title p{font-size:1.184rem;margin-top:1.25rem}
 .page-about .section{padding-top:0;padding-bottom:3.125rem}
 .about-biography{padding-top:3.125rem}
 .about-biography .section-title{margin-bottom:1.25rem}
 .cols{grid-template-columns:1fr;gap:2rem}
 .cols li{font-size:.875rem;padding:.625rem 0}
 .links-list{margin-top:1.875rem}
 .links-list li{padding:1rem 0;gap:.625rem}
 .links-list a{font-size:.875rem;overflow-wrap:anywhere}
 .js .reveal{transform:translateY(2rem)}
 .js .reveal.is-visible{transform:none}
}
@media(max-width:767px) and (orientation:landscape){html{font-size:18px}.nav-overlay ul{padding-top:5rem}.hero{padding-top:7rem}.hero-foot .socials{top:4.7rem}.stage{height:15rem}}
@media(max-width:767px) and (prefers-reduced-motion:reduce){.marquee{overflow-x:auto}.js .reveal{opacity:1;transform:none}.marquee-track{animation:none}}