/* A phone-specific reading and browsing composition; desktop styles stay in styles.css. */
.mobile-swipe-note{display:none}
@media(max-width:760px){
  html{scroll-padding-top:86px}
  .header{position:sticky;top:0;z-index:30;height:68px;padding:0 20px;background:#11110f}
  .header .logo{width:91px}.header-end{gap:15px}.header-portal{min-height:37px;font-size:10px;padding:10px 11px;gap:13px}.header .primary-navigation{top:67px;padding:25px 22px 30px;gap:0}.header .primary-navigation a{font-size:22px;padding:13px 0;border-bottom:1px solid #ffffff26}.menu{min-width:28px;min-height:40px}
  .hero{height:auto;min-height:0;padding:0 22px;background:#11110f;isolation:isolate}
  .hero-media{height:clamp(230px,59vw,360px);bottom:auto}.hero-media>img,.hero-media>video{object-position:center 50%}
  .hero-shade{background:linear-gradient(0deg,#11110f,transparent 45%),linear-gradient(180deg,#0004,transparent 35%)}
  .hero-top{position:absolute;top:17px;left:22px;right:22px;font-size:6px;z-index:1}.hero-top>span:last-child{font-size:5px;max-width:90px}
  .hero-content{display:block;padding-top:calc(clamp(230px,59vw,360px) + 8px);padding-bottom:24px;margin:0}
  .hero-content .overline{font-size:8px;margin-bottom:15px}.hero h1{font-size:clamp(40px,11vw,64px);line-height:1.02;letter-spacing:-1.9px;max-width:100%}
  .hero-content>div>p:not(.overline){font-size:13px;line-height:1.65;margin-top:20px}.hero .line-link{font-size:12px;margin-top:23px;padding-bottom:11px}
  .hero-aside{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-top:28px}.hero-aside>#hero-caption{font-size:7px;line-height:1.6;margin:0}.hero-play-controls{gap:11px}.hero-play-controls button{font-size:8px;min-height:32px}.hero-play-controls button span{font-size:10px}
  .hero-index{display:flex;overflow-x:auto;min-height:67px;scroll-snap-type:x mandatory;scrollbar-width:thin;gap:0}.hero-index button{flex:0 0 110px;scroll-snap-align:start;padding:16px 12px!important;font-size:11px;gap:8px}.hero-index button span{font-size:7px}.hero-index i{font-size:15px;margin:0 0 0 auto}.hero-index button+button{border-left:1px solid #ffffff26}
  .wrap{padding-left:22px;padding-right:22px}.statement{padding-top:42px;padding-bottom:42px;gap:23px}.statement h2{font-size:31px;line-height:1.08;letter-spacing:-1px}.statement p:not(.overline){font-size:13px;line-height:1.7;max-width:none}.statement .text-arrow{display:none}
  .section-top{gap:20px}.overline{font-size:8px;letter-spacing:1.2px}h2{font-size:39px;letter-spacing:-1.7px;line-height:1.04}
  .experience{padding-top:42px;padding-bottom:40px}.section-heading{gap:22px;margin:24px 0 27px}.section-heading>p,.section-heading>div>p{font-size:13px;line-height:1.7}.exhibit-grid{gap:25px}
  .exhibition-carousel{min-height:0;aspect-ratio:4/3}.exhibition-browse{font-size:7px;top:15px;left:15px;right:15px}.exhibition-controls{bottom:15px;left:15px;right:15px;gap:10px;flex-wrap:nowrap}.exhibition-controls p{font-size:10px;line-height:1.5;margin-bottom:9px}.exhibition-controls #exhibition-count{font-size:8px}.exhibition-controls .carousel-buttons{gap:4px}.exhibition-controls .carousel-buttons button{width:32px;height:36px}.exhibition-controls #exhibition-motion{width:27px;height:36px}
  .exhibit-information{padding:0}.exhibit-information h3{font-size:43px;letter-spacing:-1.5px;margin:18px 0}.exhibit-information h3 br{display:none}.exhibit-information .exhibit-place{font-size:13px}.exhibit-information>p:not(.overline){font-size:13px;line-height:1.75}.exhibit-facts{gap:30px;margin:24px 0}.exhibit-facts strong{font-size:30px}.exhibit-facts span{font-size:10px}.exhibit-information .line-link{font-size:12px;min-height:40px}.exhibit-bottom{display:flex;flex-direction:column;gap:15px;padding-top:24px}.exhibit-bottom>p{font-size:12px;line-height:1.7}.exhibit-bottom>a{font-size:12px;align-self:start;min-height:35px}
  .zuzu{display:flex;flex-direction:column}.zuzu-copy{order:0;padding:40px 22px 28px;align-items:start}.zuzu-copy>.overline{font-size:8px}.zuzu-copy h2{font-size:49px;letter-spacing:-2px;margin:22px 0}.zuzu-copy h2 br{display:none}.zuzu-copy>.large-copy{font-size:20px;line-height:1.4;max-width:100%;margin-bottom:22px}.zuzu-copy>p:not(.overline):not(.large-copy){font-size:13px;line-height:1.75;max-width:none}.zuzu-copy .line-link{font-size:12px;margin-top:22px;min-height:40px}
  .zuzu-portrait{order:1;height:480px}.zuzu-portrait>img{padding:18px 18px 147px;object-fit:contain}.portrait-label{display:none}.portrait-form-controls{left:22px;right:22px;bottom:94px;align-items:center;gap:12px}.portrait-form-controls span{font-size:8px;margin-bottom:8px}.portrait-form-controls strong{font-size:13px;line-height:1.4}.portrait-form-controls .carousel-buttons{gap:5px}.portrait-form-controls button{width:39px;height:42px}.portrait-form-controls #zuzu-form-motion{width:32px;height:42px}.portrait-play{left:22px;right:22px;bottom:23px;min-height:47px;font-size:16px}.portrait-play>span{font-size:7px}
  .archive{padding-top:38px;padding-bottom:38px}.archive>.section-top{display:block}.small-heading{font-size:25px;letter-spacing:-.7px;line-height:1.15}.archive-filters{margin-top:20px;gap:22px;justify-content:start}.archive-filters button{font-size:12px;padding:9px 0;min-height:38px}.mobile-swipe-note{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#77776e;margin:16px 0 13px}.mobile-swipe-note span{font-size:18px}
  .archive-grid{display:flex;overflow-x:auto;gap:15px;scroll-snap-type:x mandatory;padding:0 0 15px;scrollbar-width:thin}.work-item{flex:0 0 84%;min-width:0;scroll-snap-align:start}.work-item>div{height:auto;aspect-ratio:4/5}.work-item>div>img{height:100%;width:100%;object-fit:cover}.work-item h3{font-size:17px;line-height:1.25;margin-top:14px}.work-item p{font-size:10px;line-height:1.6}.work-media-badge{font-size:7px;padding:9px}.image-credit{font-size:10px;line-height:1.7;margin-top:18px}
  .creator{padding-top:40px;padding-bottom:40px}.creator .section-top>span:last-child{max-width:120px;text-align:right;font-size:6px}.creator-heading{gap:20px;margin:25px 0}.creator-heading h2{font-size:45px;letter-spacing:-1.8px}.creator-heading>p{font-size:13px;line-height:1.7}.creator-grid{gap:24px}.tool-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tool-choice{display:flex;flex-direction:column;align-items:start;gap:12px;padding:15px 10px!important;border:1px solid #ffffff35;min-height:115px}.tool-choice[aria-selected="true"]{background:#303328;border-color:#c8b1ff}.tool-choice strong{font-size:12px;line-height:1.4;letter-spacing:0}.tool-choice .choice-number{font-size:8px;margin:0}.tool-choice small,.tool-choice i{display:none}.tool-choices>.solid-button{grid-column:1/-1;margin-top:9px;font-size:12px;min-height:49px}.tool-panel{border:1px solid #ffffff25}.tool-panel-top{font-size:6px;padding:14px 16px;gap:10px}.creator-deck{margin:20px 16px 0}.creator-card .tool-art{height:285px;padding:12px}.creator-card-caption{padding:15px;min-height:115px}.creator-card-caption span{font-size:7px}.creator-card-caption h3{font-size:18px}.creator-card-caption p{font-size:10px}.creator-card-caption .carousel-buttons button{height:40px;width:34px}.tool-panel .tool-brief{padding:20px;margin-top:21px}.tool-brief .overline{font-size:7px}.tool-brief h3{font-size:22px}.tool-brief>p{font-size:12px;line-height:1.75}.copy-link{font-size:12px;min-height:40px}.copy-status{font-size:11px}
  .community{padding-top:40px;padding-bottom:40px}.community .section-heading>p{font-size:13px;max-width:none}.brief-layout{gap:24px}.brief-feature{height:350px}.brief-feature-title{font-size:43px}.brief-feature-link{font-size:11px}.brief-list{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.brief-list>.overline{grid-column:1/-1;margin-bottom:12px}.brief-list>button{padding:22px 0;display:block;min-width:0}.brief-list>button span{font-size:7px}.brief-list>button strong{font-size:21px;line-height:1.15;letter-spacing:-.5px;margin-top:14px}.brief-list>button i{display:block;margin-top:18px;font-size:23px}.community-note{grid-column:1/-1;padding-top:25px}.community-note p{font-size:13px}.community-note .line-link{font-size:12px;min-height:40px}.return-path{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:22px;padding-bottom:12px}.return-path>div{flex:0 0 79%;scroll-snap-align:start}.return-path span{font-size:8px}.return-path p{font-size:13px;line-height:1.65}
  .product-section{padding-top:40px;padding-bottom:40px}.product-section .section-top .status-label{font-size:6px;line-height:1.5;max-width:115px;text-align:right}.product-section .section-heading{display:block}.product-section .section-heading>div{margin-top:22px}.product-section .line-link{font-size:12px;min-height:40px}.product-path{display:flex;flex-direction:column}.path-tabs{order:-1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-top:1px solid #bebeb4;scrollbar-width:thin}.path-tabs button{flex:0 0 110px;scroll-snap-align:start;font-size:11px;padding:17px 12px;gap:8px;min-height:56px}.path-tabs button span{font-size:8px}.path-stage{display:flex;flex-direction:column;min-height:0}.path-image{height:255px;min-height:0}.path-image>img,.path-image[data-path-stage]>img{padding:12px 12px 43px}.path-image>span{font-size:6px;bottom:9px;left:12px;max-width:calc(100% - 24px);padding:6px 8px}.path-stage-copy{padding:25px 22px 29px}.path-stage-copy>.overline{font-size:8px}.path-stage-copy>h3{font-size:29px;letter-spacing:-.8px;line-height:1.1;margin:19px 0}.path-stage-copy>p{font-size:13px;line-height:1.75;max-width:none}.path-stage-copy>.path-note{font-size:11px;margin-top:19px}.product-note{display:block;padding-top:23px}.product-note p{font-size:12px;line-height:1.75}.product-note .text-link{font-size:12px;min-height:40px;margin-top:18px}
  .contact{padding-top:40px;padding-bottom:40px;gap:24px}.contact h2{font-size:40px;letter-spacing:-1.5px;line-height:1.05}.contact-actions{padding-top:0;max-width:none;gap:15px}.contact-actions .solid-button{min-height:50px;font-size:13px}.contact-actions .line-link{font-size:12px;line-height:1.5;min-height:49px}.email-link{font-size:13px;min-height:32px}
  .footer{padding-top:25px;padding-bottom:25px}.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 12px;padding-bottom:24px;font-size:11px}.footer-links>a,.footer-links>button{min-height:35px;display:flex;align-items:center}.footer-links>button{grid-column:1/-1;margin-left:0;font-size:11px}.footer-brand{padding-top:0;border-top:0}.footer-reel .footer-logo{width:24%;bottom:27%;left:10px}.footer-reel button{font-size:7px;line-height:1;min-height:27px;padding:7px;gap:7px;bottom:27%;right:7px}.footer-bottom{font-size:7px;line-height:1.8;gap:15px;row-gap:12px}.footer-bottom>span:nth-child(2){display:none}.footer-bottom>a{font-size:23px}
  .partner-dialog,.portal-dialog,.brief-dialog{padding:40px 24px 25px}.partner-dialog>h2,.portal-dialog>h2,.brief-dialog>h2{font-size:34px}.partner-dialog>p:not(.overline),.portal-dialog>p:not(.overline),.brief-dialog>p:not(.overline){font-size:13px}.partner-dialog .line-link,.portal-options .line-link{font-size:12px;line-height:1.5}.portal-options .solid-button{font-size:12px;min-height:49px}.small-note{font-size:10px!important}
}
@media(max-width:360px){
  .header{padding-inline:18px}.header-portal{font-size:9px;gap:9px}.header-end{gap:12px}.wrap{padding-inline:18px}.hero{padding-inline:18px}.hero-top{left:18px;right:18px}.hero h1{font-size:39px}.hero-aside{gap:10px}.hero-play-controls{gap:9px}.hero-play-controls button{font-size:7px}.hero-index button{flex-basis:105px}.zuzu-copy{padding-inline:18px}.zuzu-copy h2{font-size:44px}.zuzu-portrait{height:460px}.zuzu-portrait>img{padding-inline:15px}.portrait-form-controls{left:18px;right:18px;gap:10px}.portrait-form-controls strong{font-size:12px}.portrait-form-controls button{width:33px;height:39px}.portrait-form-controls #zuzu-form-motion{width:29px;height:39px}.tool-choice{padding:13px 8px!important;min-height:112px}.tool-choice strong{font-size:11px}.creator-card-caption h3{font-size:16px}.creator-card-caption{padding:12px}.creator-card-caption .carousel-buttons button{width:29px}.creator-card .tool-art{height:260px}.brief-list>button strong{font-size:19px}.footer-links{font-size:10px}
}
@media(max-width:760px){
  .exhibition-carousel{height:auto;width:100%;min-width:0;aspect-ratio:4/3}
  .hero-aside{display:block;margin-top:20px}.hero-aside>#hero-caption{display:none}
  .hero-play-controls{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;margin:0}
  .hero-play-controls button,.hero-aside .film-text{font-size:10px;min-height:38px;gap:8px}
}
@media(max-width:760px){
  .hero[data-hero-state="story"] h1{font-size:clamp(39px,10.5vw,64px);line-height:1.04;letter-spacing:-1.9px}
  .story-desktop-break{display:none}
  .brand-story>div>.story-lead{font-size:17px;line-height:1.6}
  .brand-story>div>p+p{margin-top:18px}
  .brand-story h2{margin-top:27px;font-size:28px;line-height:1.18}
}
/* V9: readable story first, followed by a compact swipeable visual sequence. */
@media(max-width:760px){
  .statement.story-with-images{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding-top:40px;padding-bottom:38px}
  .brand-story.story-with-images>.story-copy>.overline{font-size:8px;margin-bottom:20px}
  .brand-story.story-with-images>.story-copy>.story-lead{font-size:19px;line-height:1.55}
  .brand-story.story-with-images>.story-copy>p:not(.overline):not(.story-lead){font-size:13px;line-height:1.75;margin-top:17px}
  .brand-story.story-with-images h2{font-size:28px;margin-top:26px;line-height:1.17;letter-spacing:-.9px}
  .story-copy>.line-link{font-size:12px;min-height:40px;margin-top:20px}
  .brand-story .story-visuals>.story-swipe-note{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:10px;line-height:1.5;margin:0 0 14px;color:#62665b}
  .story-swipe-note span{font-size:9px;white-space:nowrap}
  .story-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:13px;padding:0 0 14px;scrollbar-width:thin;overscroll-behavior-x:contain}
  .story-image,.story-image-main{flex:0 0 88%;scroll-snap-align:start;grid-column:auto}
  .story-image img{aspect-ratio:3/2;object-fit:contain}
  .story-image figcaption,.story-image-main figcaption{display:flex;flex-wrap:wrap;font-size:7px;gap:5px 10px;padding-top:10px}
  .story-image-note{font-size:9px!important;margin-top:9px!important}
  .zuzu-copy>.zuzu-story-title{font-size:24px;line-height:1.2;letter-spacing:-.5px;margin:15px 0 14px;max-width:330px}
  .zuzu-copy>p:not(.overline):not(.large-copy){font-size:13px;line-height:1.75}
  .zuzu:has(.zuzu-story-title) .zuzu-portrait{height:480px;min-height:0}
}
@media(max-width:360px){.brand-story .story-visuals>.story-swipe-note{font-size:9px;gap:8px}.story-swipe-note span{font-size:8px}.brand-story.story-with-images h2{font-size:26px}.story-image,.story-image-main{flex-basis:91%}.zuzu:has(.zuzu-story-title) .zuzu-portrait{height:460px}}
/* V10: keep the compact visual story and the closing invitation easy to browse. */
@media(max-width:760px){
 .story-gallery{max-width:none;margin-left:0;gap:13px}
 .story-image-main{width:auto;justify-self:auto}
 .story-image-note{max-width:none}
 .hero-index{display:flex;grid-template-columns:none}
 .hero-index button{flex:0 0 130px;font-size:11px;gap:9px}
 .hero-index button+button{padding-left:16px}
 .hero[data-hero-state="zuzu"] .hero-media>img{object-position:center 20%!important;object-fit:contain}
 .start-together{padding-top:45px;padding-bottom:42px}
 .start-heading{display:block;margin:22px 0 30px}
 .start-heading h2{font-size:36px;letter-spacing:-1.4px}
 .start-heading .solid-button{margin-top:28px;min-width:0;width:100%}
 .start-routes{grid-template-columns:1fr;gap:0}
 .start-routes a{font-size:12px;min-height:52px}
 .header .site-menu{max-height:calc(100dvh - 68px)}
 .header .site-menu a{font-size:20px;padding:12px 0}
 .questions-page{padding-top:28px;padding-bottom:55px}
 .back-link{margin-bottom:42px}
 .questions-page h1{font-size:43px;letter-spacing:-1.6px;margin-bottom:35px}
 .question-list summary{font-size:18px}
 .question-list p{font-size:14px}
}
/* V11: the same vertical 1-2-3 sequence, with smaller images on phones. */
@media(max-width:760px){
 .statement.story-with-images{padding-top:38px;padding-bottom:36px;gap:27px}
 .story-gallery{display:grid;grid-template-columns:minmax(0,1fr);width:230px;max-width:100%;margin-inline:auto;gap:13px;padding:0;overflow:visible;scroll-snap-type:none}
 .story-image{width:100%;flex:none;scroll-snap-align:none}
 .story-image figcaption{display:flex;flex-wrap:nowrap;font-size:7px;gap:6px;padding-top:6px}
 .story-image-note{max-width:230px;margin:12px auto 0!important;font-size:8px!important}
}
/* Layout A on phones: readable copy, then a swipeable 1–2–3 image row. */
@media(max-width:760px){
 .statement.story-with-images{display:block;padding:34px 22px 28px}
 .story-copy{display:flex;flex-direction:column;gap:0;margin-bottom:28px}
 .brand-story.story-with-images>.story-copy>.overline{font-size:10px;margin:0 0 22px}
 .brand-story.story-with-images>.story-copy>.story-lead{font-size:20px;line-height:1.55;margin:0}
 .story-support{font-size:13px;margin-top:19px}.story-support p+p{margin-top:16px}
 .brand-story.story-with-images h2{font-size:30px;line-height:1.16;letter-spacing:-1px;margin:25px 0 20px}
 .story-copy>.line-link{align-self:flex-start;min-width:235px;font-size:12px;margin:0}
 .story-gallery{display:flex;width:auto;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:12px;margin:0 -2px}
 .story-image{flex:0 0 88%;min-width:0;width:auto;scroll-snap-align:start}
 .story-image figcaption{font-size:8px;flex-wrap:wrap;padding-top:10px}
 .story-image-note{max-width:none;font-size:8px!important;margin:12px 0 0!important}
}
/* Phone refinement: softer type, consistent media frames, drawn line arrows. */
@media(max-width:760px){
 .brand-story.story-with-images #story-title{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-size:clamp(24px,6.5vw,28px);font-weight:400;line-height:1.26;letter-spacing:-.35px;margin:25px 0 22px}
 #story-title .story-statement-line{text-wrap:balance;max-width:100%}
 #story-title .story-statement-line+.story-statement-line{margin-top:9px}
 .archive-grid{align-items:flex-start}
 .archive-grid>.work-item{display:flex;flex-direction:column;align-items:stretch;text-align:left}
 .archive-grid>.work-item>div,.archive-grid>.work-item:last-child:nth-child(odd)>div{width:100%;height:auto;aspect-ratio:4/5;flex:none;position:relative}
 .archive-grid>.work-item>div>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
 .archive-grid>.work-item h3{min-height:2.5em;align-items:flex-start}
 .line-arrow{width:26px;height:26px;flex-basis:26px;stroke-width:1.35}
 .header-portal .line-arrow{width:20px;height:20px;flex-basis:20px}
 .hero-index .line-arrow{width:20px;height:20px;flex-basis:20px}
 .work-item h3>.line-arrow{width:23px;height:23px;flex-basis:23px}
 .carousel-buttons .line-arrow,.gallery-bottom .line-arrow{width:21px;height:21px;flex-basis:21px}
 .mobile-swipe-note .line-arrow{width:25px;height:25px}
 .back-link .line-arrow,.contact-page-top a .line-arrow{width:18px;height:18px;flex-basis:18px;margin-right:5px}
}
@media(max-width:760px){
 .hero-factory-link{min-height:38px;gap:8px;font-size:10px;padding:0;border-bottom:0}
 .hero-play-controls{justify-content:flex-start;column-gap:22px;row-gap:2px}
 .factory-film{margin-bottom:28px;scroll-margin-top:90px}
 .factory-film-heading{display:block;margin-bottom:12px}.factory-film-heading>span{display:block}.factory-film-heading>span+span{margin-top:6px}
 .factory-film figcaption{font-size:11px;line-height:1.6}
 .exhibition-highlights{aspect-ratio:4/3;min-height:0}.exhibition-highlight-caption{left:18px;right:18px;bottom:18px;display:block}.exhibition-highlight-caption .overline{font-size:7px}.exhibition-highlight-caption p{font-size:21px;max-width:260px}.exhibition-highlight-caption button{margin-top:18px;min-height:40px;font-size:10px}
}
@media(max-width:760px){.factory-film-play{min-height:52px;padding:13px 16px;gap:10px}.factory-film-play span{font-size:12px}.factory-film-play small{font-size:9px;margin-left:4px}.factory-film-play svg{width:19px;height:19px}}
@media(max-width:760px){.exhibition-highlights{width:100%;min-width:0;aspect-ratio:4/3}}

@media(max-width:760px){
 .experience .exhibition-carousel{width:100%;min-width:0;aspect-ratio:4/3}
 .experience-backdrop-shade{background:#0e1015d4}
 .experience .exhibit-bottom{align-items:start;gap:18px}
}
