/* Hallmark · component refinement · theme: zzz light exhibition · genre: editorial · v2.0.0 */
/* Hallmark · critique: full-width films, legible three-photo spreads, and separated touch controls preserve the original work on small screens. */
@media(max-width:700px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--space-md)}
 .container{width:calc(100% - var(--space-xl));min-width:0}
 .header-inner{height:72px}
 .nav-contact{padding-inline:var(--space-md)}
 .intro{padding-block:var(--space-xl) var(--space-lg)}
 .intro-main{gap:var(--space-lg)}
 .intro h1{font-size:clamp(34px,9.5vw,44px);line-height:1.2;letter-spacing:-.035em}
 .intro .intro-copy,.intro-description .intro-description-lead{font-size:var(--type-ui);line-height:1.9}
 .intro-description{transform:none;padding-top:var(--space-lg)}
 .intro-practice>div{grid-template-columns:64px minmax(0,1fr);gap:var(--space-sm)}
 .intro-practice dd{line-height:1.8;text-wrap:wrap}
 .section-navigation{gap:var(--space-lg);flex-wrap:wrap}
 .film-exhibition{padding-block:var(--space-xl)}
 .film-introduction{margin-bottom:var(--space-xl)}
 .film-introduction h2,.photo-gallery-heading h2,.live-photo-heading h2,.about h2{font-size:28px;line-height:1.4}
 .format-heading{margin-bottom:var(--space-lg);padding-bottom:var(--space-xs)}
 .format-heading h3{font-size:25px;line-height:1.5}
 .format-heading .collection-tabs{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:0 var(--space-xs);padding:0;margin:0}
 .format-heading .collection-tabs button{min-height:44px;padding-inline:var(--space-xs);font-size:var(--type-caption);white-space:nowrap}
 .collection-heading{margin-bottom:var(--space-md)}
 .collection-heading p{font-size:var(--type-caption)}
 .clip-stage,.clip-carousel.is-stack .clip-stage{display:block;isolation:isolate}
 .clip-stage .clip-deck{width:100%}
 .clip-stage .clip-direction,.clip-carousel.is-stack .clip-stage .clip-direction{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;margin:0}
 .clip-stage [data-step="-1"],.clip-carousel.is-stack [data-step="-1"]{left:var(--space-xs)}
 .clip-stage [data-step="1"],.clip-carousel.is-stack [data-step="1"]{right:var(--space-xs)}
 .clip-carousel:not(.is-stack) .clip-screen-row{height:auto;aspect-ratio:16/9}
 .clip-carousel:not(.is-stack) .film-screen{width:100%}
 .format-portrait .clip-carousel:not(.is-stack) .clip-screen-row{height:clamp(300px,88vw,380px);aspect-ratio:auto}
 .format-portrait .clip-carousel:not(.is-stack) .film-screen{width:min(70%,calc(clamp(300px,88vw,380px) * var(--clip-ratio)))}
 .format-portrait .clip-placeholder{min-height:0}
 .clip-carousel.is-stack{--stack-offset:clamp(44px,15vw,78px)}
 .clip-carousel.is-stack .clip-deck{padding-block:var(--space-sm)}
 .clip-carousel.is-stack .clip-screen-row{height:clamp(300px,88vw,380px)}
 .clip-carousel.is-stack .film-screen{width:min(58%,calc(clamp(300px,88vw,380px) * var(--clip-ratio)))}
 .clip-carousel.is-stack .clip-slide[data-position=previous]{transform:translate(calc(-1 * var(--stack-offset)),8px) scale(.88) rotate(-3deg)}
 .clip-carousel.is-stack .clip-slide[data-position=next]{transform:translate(var(--stack-offset),8px) scale(.88) rotate(3deg)}
 .clip-play{width:48px;height:48px}
 .clip-play svg{width:20px;height:20px}
 .clip-caption{padding:0;margin-top:var(--space-md);min-height:0}
 .clip-caption h5{font-size:var(--type-body);line-height:1.7;text-wrap:pretty}
 .clip-caption p{margin-top:var(--space-2xs)}
 .collection-controls{margin-top:var(--space-sm)}
 .photo-section{padding-block:var(--space-xl)}
 .photo-gallery-heading{margin-bottom:var(--space-lg);padding-bottom:var(--space-lg)}
 .photo-gallery-heading p{white-space:normal;font-size:var(--type-caption);line-height:1.8;text-wrap:wrap}
 .photo-wheel{--cw:clamp(208px,64vw,292px);margin-top:var(--space-lg)}
 .photo-section .photo-gallery-end{margin-top:var(--space-lg)}
 .photo-wheel-cap strong{font-size:var(--type-body)}
 .photo-section .photo-open .photo-view-label,.live-photo-section .photo-view-label{display:none}
 .live-photo-section{padding-block:var(--space-xl)}
 .live-photo-heading{display:block;padding-bottom:var(--space-md);margin-bottom:var(--space-lg)}
 .live-photo-heading p{font-size:var(--type-caption);line-height:1.9}
 .gallery-controls{margin-top:var(--space-md);gap:var(--space-xs)}
 .gallery-controls .gallery-direction{width:44px;height:44px;flex:0 0 44px}
 .gallery-pagination{flex:1;justify-content:center;max-width:none;gap:0}
 .gallery-page{width:clamp(24px,7vw,32px);height:44px;flex:none}
 .live-photo-grid.is-enhanced{gap:var(--space-lg);padding-block:var(--space-xs) var(--space-md);align-items:start;touch-action:pan-x pan-y}
 .live-photo-page{--mobile-photo-height:clamp(160px,48vw,210px);height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,auto);gap:var(--space-lg);align-content:start}
 .live-photo-page .live-photo-card{width:100%;justify-self:center;align-self:start}
 .live-photo-page .photo-open{width:fit-content;max-width:100%;margin-inline:auto}
 .live-photo-page .live-photo-card img{width:auto;height:var(--mobile-photo-height);max-width:100%;max-height:none;aspect-ratio:var(--page-ratio);object-fit:contain}
 .live-photo-page .live-photo-card figcaption{margin-top:var(--space-xs);font-size:var(--type-caption);line-height:1.7;text-align:center}
 .live-photo-section .gallery-note{margin-top:var(--space-sm)}
 .about-band .about{padding-block:var(--space-xl)}
 .about-introduction,.work-experience,.project-experience,.experience-tail .about-tools{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}
 .about-copy{min-width:0}
 .about-copy p{font-size:var(--type-ui);line-height:1.95;text-wrap:wrap}
 .selected-experience,.selected-projects{min-width:0}
 .selected-experience>.experience-row,.selected-projects>.experience-row{grid-template-columns:minmax(0,1fr);gap:var(--space-xs);padding-block:var(--space-lg)}
 .experience-toggle{width:100%;margin:0;padding:var(--space-xs) 0;gap:var(--space-md);font-size:var(--type-body);line-height:1.65;min-height:44px;justify-content:space-between}
 .selected-experience dd,.selected-projects dd,.experience-extra p{font-size:var(--type-ui);line-height:1.95;text-wrap:wrap}
 .experience-extra{padding-top:var(--space-sm)}
 .experience-tail .experience-more{margin:0;padding:var(--space-xs) 0;min-height:44px}
 .experience-tail .about-tools{padding-top:var(--space-lg)}
 .about-tools p{gap:var(--space-xs) var(--space-md)}
 .footer{padding-block:var(--space-lg) var(--space-md)}
 .footer-main.foot__top{gap:var(--space-lg);padding-top:var(--space-xl)}
 .footer-wordmark{margin-bottom:var(--space-md)}
 .footer h2{font-size:25px}
 .email-copy{font-size:clamp(16px,4.8vw,20px);margin-left:0;padding-inline:0;max-width:100%;white-space:nowrap}
 .email-copy-wrap{margin-bottom:var(--space-lg)}
 .footer-bottom.foot__bottom{margin-top:var(--space-lg);gap:var(--space-sm);padding-block:var(--space-md);padding-right:var(--space-lg)}
 .footer-explore.foot__links{gap:0;flex-wrap:wrap}
 .footer-explore a{min-height:44px}
 .photo-dialog{width:calc(100% - var(--space-lg));max-height:90svh;padding:var(--space-sm)}
 .photo-dialog-header h2{font-size:var(--type-body);line-height:1.7;min-width:0}
 .photo-dialog-header{gap:var(--space-xs)}
 .photo-close{flex:none;min-width:44px;min-height:44px}
 .photo-dialog-image img{max-height:calc(90svh - 148px);object-fit:contain}
 .photo-dialog-footer{font-size:12px}
 .section-rail{width:44px;height:64px;top:auto;bottom:max(var(--space-lg),env(safe-area-inset-bottom));transform:none}
 .section-rail .rail-toggle:not([hidden]){top:auto;bottom:0;transform:none}
 .section-rail .rail-toggle::before{left:16px}
 .section-rail .rail-toggle svg{transform:translateX(8px)}
 .section-rail .rail-toggle[aria-expanded=true]:not([hidden]){transform:translateX(100%)}
 .section-rail .rail-links{top:auto;bottom:0;max-height:calc(100svh - var(--space-2xl));overflow-y:auto}
 .section-rail.is-interactive .rail-links{transform:translateX(100%)}
 .section-rail.is-interactive .rail-toggle[aria-expanded=true]+.rail-links{transform:translateX(0)}
 .section-rail .rail-links a{min-height:44px}
}

@media(max-width:700px),(max-width:1024px) and (pointer:coarse){
 .touch-photo-wheel{height:auto;perspective:none;margin-top:var(--space-lg);cursor:auto;touch-action:auto}
 .photo-section .photo-gallery-grid.touch-photo-track{position:relative;display:flex;gap:var(--space-md);max-width:none;width:100%;margin:0;padding:var(--space-xs) 9% var(--space-sm);overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;align-items:center}
 .touch-photo-track::-webkit-scrollbar{display:none}
 .photo-gallery-grid.touch-photo-track>figure{flex:0 0 100%;width:100%;max-width:none;margin:0;scroll-snap-align:center;scroll-snap-stop:always;grid-column:auto}
 .photo-gallery-grid.touch-photo-track .photo-open{display:block;padding:var(--space-xs);background:var(--white);border-radius:var(--radius-media);box-shadow:inset 0 0 0 1px var(--line);transform:none}
 .photo-gallery-grid.touch-photo-track .photo-print{aspect-ratio:3/2;display:grid;place-items:center;overflow:clip}
 .photo-gallery-grid.touch-photo-track picture{width:100%;height:100%;min-height:0}
 .photo-gallery-grid.touch-photo-track img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
 .photo-gallery-grid.touch-photo-track figcaption{display:none}
 .touch-photo-wheel+.photo-wheel-bar{margin-top:var(--space-md)}
 .photo-wheel-direction:disabled{opacity:.45;cursor:default}
 .photo-open picture{display:block}
 .live-photo-page .photo-open picture{width:fit-content;max-width:100%}
}
@media(max-width:360px){
 .container{width:calc(100% - var(--space-lg) - var(--space-xs))}
 .intro-practice>div{display:block}
 .intro-practice dd{text-align:left;margin-top:var(--space-2xs)}
 .format-heading .collection-tabs{gap:0}
 .format-heading .collection-tabs button{padding-inline:var(--space-xs)}
}

/* Touch screens keep direct image viewing and practical controls, with no mouse-only decoration. */
@media(max-width:700px),(max-width:1024px) and (pointer:coarse){
 .section-rail,.photo-view-label,.photo-dialog-footer,.button-ripple,.glass-action::before,body::before{display:none}
 .live-photo-section .photo-open,.live-photo-section .photo-open:hover,.live-photo-section .photo-open:focus-visible{transform:none;transition:none}
 .photo-gallery-grid.wheel__ring .wheel__card{-webkit-box-reflect:unset;will-change:auto}
 .photo-dialog-image img{max-height:calc(90svh - 100px)}
}

/* One photograph at a time, using the photography carousel's touch rhythm without a white mount. */
@media(max-width:700px),(max-width:1024px) and (pointer:coarse){
 .live-photo-section>.container{position:relative}
 .live-photo-heading:has(~ .is-touch-gallery){margin-bottom:var(--space-lg)}
 .live-photo-heading:has(~ .is-touch-gallery) .gallery-controls{display:contents}
 .live-photo-heading:has(~ .is-touch-gallery) .gallery-pagination{display:none}
 .live-photo-heading:has(~ .is-touch-gallery) .gallery-direction{position:absolute;top:var(--live-control-y);transform:translateY(-50%);width:44px;height:44px;z-index:var(--z-raised);margin:0}
 .live-photo-heading:has(~ .is-touch-gallery) [data-photo-step="-1"]{left:0}
 .live-photo-heading:has(~ .is-touch-gallery) [data-photo-step="1"]{right:0}
 .live-photo-grid.is-enhanced.is-touch-gallery{display:flex;position:relative;width:100%;max-width:100%;min-width:0;contain:inline-size;gap:var(--space-md);padding:var(--space-xs) 9% var(--space-sm);scroll-padding-inline:9%;overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;align-items:center;touch-action:pan-x pan-y}
 .is-touch-gallery .live-photo-page{flex:0 0 100%;width:100%;height:auto;display:block;min-width:0;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
 .is-touch-gallery .live-photo-card{display:block;width:100%;min-width:0;margin:0}
 .is-touch-gallery .live-photo-card .photo-open{display:block;width:100%;max-width:none;aspect-ratio:3/2;padding:0;margin:0;border:0;background:var(--transparent);box-shadow:none;border-radius:0;transform:none}
 .is-touch-gallery .live-photo-card .photo-open picture{display:block;width:100%;height:100%;max-width:none}
 .is-touch-gallery .live-photo-card img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;border-radius:0}
 .is-touch-gallery .live-photo-card figcaption{display:none}
 .live-touch-caption{text-align:center;margin-top:var(--space-md)}
 .live-touch-caption p{font-size:var(--type-body);line-height:1.7;color:var(--ink);margin:0}
 .live-touch-caption>span{display:block;margin-top:var(--space-2xs);font-size:var(--type-caption);line-height:1.8;color:var(--muted);font-variant-numeric:tabular-nums}
 .live-photo-section:has(.is-touch-gallery) .gallery-note{margin-top:var(--space-lg)}
 .clip-carousel .collection-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-md);margin-top:var(--space-sm)}
 .clip-carousel .collection-controls[hidden]{display:none}
 .collection-controls .clip-direction{position:static;translate:none;transform:none;flex:0 0 44px;width:44px;height:44px;border-radius:50%;margin:0}
 .collection-controls .clip-counter{flex:0 0 48px;min-width:48px;text-align:center}
}

/* Restore the overlapping photography composition; only the adjacent three are painted on phones. */
@media(max-width:700px),(max-width:1024px) and (pointer:coarse){
 .photo-section .photo-gallery-grid.touch-photo-stack{display:block;height:clamp(178px,54vw,300px);padding:0;overflow:visible;touch-action:pan-y;scroll-snap-type:none;perspective:none}
 .photo-gallery-grid.touch-photo-stack>figure{position:absolute;left:12%;top:var(--space-xs);width:76%;height:calc(100% - var(--space-md));margin:0;transform-origin:center;transition:transform 520ms var(--interaction-ease),opacity 400ms var(--interaction-ease);scroll-snap-align:none}
 .photo-gallery-grid.touch-photo-stack>figure[hidden]{display:none}
 .photo-gallery-grid.touch-photo-stack>figure[data-position=current]{transform:translate(0,0) scale(1);z-index:var(--z-raised);opacity:1}
 .photo-gallery-grid.touch-photo-stack>figure[data-position=previous]{transform:translate(-19%,var(--space-xs)) scale(.85) rotate(-7deg);z-index:var(--z-base);opacity:1}
 .photo-gallery-grid.touch-photo-stack>figure[data-position=next]{transform:translate(19%,var(--space-xs)) scale(.85) rotate(7deg);z-index:var(--z-base);opacity:1}
 .photo-gallery-grid.touch-photo-stack .photo-open{height:100%;padding:var(--space-xs);box-shadow:inset 0 0 0 1px var(--line),0 12px 24px -16px var(--shadow-strong)}
 .photo-gallery-grid.touch-photo-stack .photo-print{width:100%;height:100%;aspect-ratio:auto}
 .format-portrait .collection-controls{margin-top:var(--space-sm)}
}
@media(prefers-reduced-motion:reduce){.photo-gallery-grid.touch-photo-stack>figure{transition:none}}

/* Touch live photography follows the same three-layer loop, with no white mount. */
@media(max-width:700px),(max-width:1024px) and (pointer:coarse){
 .live-photo-grid.is-enhanced.is-touch-gallery{display:block;height:clamp(178px,54vw,300px);padding:0;overflow:visible;touch-action:pan-y;scroll-snap-type:none}
 .is-touch-gallery .live-photo-page{position:absolute;left:12%;top:var(--space-xs);width:76%;height:calc(100% - var(--space-md));display:block;margin:0;transform-origin:center;transition:transform 520ms var(--interaction-ease),opacity 400ms var(--interaction-ease)}
 .is-touch-gallery .live-photo-page[hidden]{display:none}
 .is-touch-gallery .live-photo-page[data-position=current]{transform:translate(0,0) scale(1);z-index:var(--z-raised);opacity:1}
 .is-touch-gallery .live-photo-page[data-position=previous]{transform:translate(-19%,var(--space-xs)) scale(.85) rotate(-7deg);z-index:var(--z-base);opacity:1}
 .is-touch-gallery .live-photo-page[data-position=next]{transform:translate(19%,var(--space-xs)) scale(.85) rotate(7deg);z-index:var(--z-base);opacity:1}
 .is-touch-gallery .live-photo-card,.is-touch-gallery .live-photo-card .photo-open{width:100%;height:100%;aspect-ratio:auto;background:var(--transparent);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.is-touch-gallery .live-photo-page{transition:none}}

/* Live photography returns to the native single-image rail; photography keeps its stack. */
@media(max-width:700px),(max-width:1024px) and (pointer:coarse){
 .live-photo-grid.is-enhanced.is-touch-gallery{display:flex;height:auto;padding:var(--space-xs) 9% var(--space-sm);overflow-x:auto;overflow-y:clip;touch-action:pan-x pan-y;scroll-snap-type:x mandatory}
 .is-touch-gallery .live-photo-page{position:relative;left:auto;top:auto;flex:0 0 100%;width:100%;height:auto;transform:none;transition:none;opacity:1;z-index:auto}
 .is-touch-gallery .live-photo-card{height:auto}
 .is-touch-gallery .live-photo-card .photo-open{height:auto;aspect-ratio:3/2}
}