:root{
  --mobile-gutter:20px;
  --mobile-section-space:clamp(72px,20vw,88px);
  --mobile-title-xl:clamp(2.5rem,10.5vw,2.9rem);
  --mobile-title-lg:clamp(2.1rem,9vw,2.4rem);
  --mobile-title-md:clamp(1.65rem,7.2vw,1.95rem);
}

@media(max-width:620px){
  h1,h2,h3{letter-spacing:-.03em}

  .page-hero h1,
  .essay-hero h1,
  .designer-hero h1{
    max-width:12ch;
    font-size:var(--mobile-title-xl);
    line-height:1.03;
  }

  .section-title,
  .story-copy h2,
  .union h2,
  .visit-cta h2,
  .designer-cta h2,
  .designer-lead-copy h2,
  .editorial-copy h2,
  .selection-head h2,
  .guidance-intro h2,
  .partnership-title h2,
  .paths-intro h2,
  .visit-copy h2,
  .final-inner h2,
  .cc-context>h2,
  .cc-project-intro h2,
  .cc-close h2,
  .jm-light h2,
  .jm-gallery .blue-room-copy h2,
  .proof h2,
  .contact h2{
    max-width:14ch;
    font-size:var(--mobile-title-lg);
    line-height:1.04;
  }

  .cc-context>h2{font-size:clamp(2rem,8.2vw,2.2rem)}

  .editorial-intro-title,
  .lead-intro h2,
  .lead-success h2,
  .cc-exposition-title h3{
    font-size:var(--mobile-title-md);
    line-height:1.08;
  }

  .page-section,
  .designer-cta,
  .designer-lead,
  .visit-cta,
  .home-meaning,
  .home-selection,
  .home-guidance,
  .home-partnership,
  .home-visit,
  .home-final,
  .cc-context,
  .cc-project,
  .cc-exposition,
  .cc-close{
    padding-block:var(--mobile-section-space);
  }

  .site-nav,
  .nav{
    height:calc(66px + env(safe-area-inset-top));
    min-height:66px;
    padding-top:env(safe-area-inset-top);
    padding-right:max(var(--mobile-gutter),env(safe-area-inset-right));
    padding-left:max(var(--mobile-gutter),env(safe-area-inset-left));
  }

  .audience-grid>*{min-width:0}
  .jm-gallery{overflow:hidden}

  .menu-button{
    top:calc(11px + env(safe-area-inset-top));
    right:max(12px,env(safe-area-inset-right));
  }

  .mobile-menu{
    padding-top:calc(104px + env(safe-area-inset-top));
    padding-right:max(var(--mobile-gutter),env(safe-area-inset-right));
    padding-bottom:max(40px,calc(24px + env(safe-area-inset-bottom)));
    padding-left:max(var(--mobile-gutter),env(safe-area-inset-left));
  }

  .mobile-menu a{display:flex;min-height:52px;align-items:center}

  .artwork-actions,
  .cc-modal-actions,
  .lead-modal,
  .site-footer{
    padding-bottom:max(24px,calc(16px + env(safe-area-inset-bottom)));
  }

  /* Showroom: preserve the interior photography and shorten the mobile reading path. */
  .showroom-page .page-hero{
    min-height:clamp(450px,58svh,500px);
    padding:clamp(72px,18vw,90px) var(--mobile-gutter) clamp(60px,15vw,76px);
  }

  .showroom-page .page-hero h1{max-width:11ch}
  .showroom-page .page-hero p{
    max-width:34ch;
    margin-top:24px;
    font-size:15px;
    line-height:1.6;
  }

  .showroom-page .story-media{
    min-height:0;
    aspect-ratio:4/3;
  }

  .showroom-page .story:nth-of-type(2) .story-media{aspect-ratio:3/2}
  .showroom-page .story-media img{object-position:center}

  .showroom-page .story-copy{
    padding:64px var(--mobile-gutter) 72px;
  }

  .showroom-page .story-copy p{
    margin-top:24px;
    font-size:15px;
    line-height:1.68;
  }

  .showroom-page .story-copy p+p{margin-top:16px}
  .showroom-page .company-facts{margin-top:40px}
  .showroom-page .company-fact,
  .showroom-page .company-fact:nth-child(even){padding:17px 0}
  .showroom-page .company-fact strong{font-size:1.75rem}
  .showroom-page .company-fact span{
    max-width:34ch;
    margin-top:7px;
    font-size:13px;
    line-height:1.5;
  }

  .showroom-page .union{padding:72px var(--mobile-gutter)}
  .showroom-page .union-inner{gap:30px}
  .showroom-page .union h2{max-width:12ch}
  .showroom-page .union-copy p{line-height:1.65}

  .showroom-page .visit-cta{
    padding:72px var(--mobile-gutter) 80px;
  }

  .showroom-page .visit-cta-visual{aspect-ratio:4/3}
  .showroom-page .visit-cta-image{object-position:center}
  .showroom-page .visit-cta-copy{
    gap:24px;
    padding-top:30px;
  }

  .showroom-page .visit-cta h2{max-width:12ch}
  .showroom-page .visit-cta .button{
    width:100%;
    min-height:50px;
    margin-top:28px;
  }

  /* Designers: keep the magazine rhythm, bring the artworks up in scale. */
  .designer-page .designer-hero{
    padding:72px max(var(--mobile-gutter),env(safe-area-inset-right)) 44px max(var(--mobile-gutter),env(safe-area-inset-left));
    gap:26px;
  }

  .designer-page .designer-hero h1{
    max-width:none;
    font-size:clamp(1.85rem,9.4vw,2.55rem);
  }

  .designer-page .designer-kicker{margin-bottom:16px}

  .designer-page .designer-hero-copy p:not(.designer-kicker){
    max-width:36ch;
    margin-top:20px;
    font-size:15px;
    line-height:1.62;
  }

  .designer-page figcaption{
    margin-top:10px;
    color:#64676c;
    font-size:12px;
    line-height:1.45;
  }

  .designer-page .editorial-essay{
    padding:64px max(var(--mobile-gutter),env(safe-area-inset-right)) 84px max(var(--mobile-gutter),env(safe-area-inset-left));
  }

  .designer-page .editorial-intro{
    margin-bottom:68px;
    gap:20px;
  }

  .designer-page .editorial-intro>p:last-child{
    font-size:16px;
    line-height:1.7;
  }

  .designer-page .editorial-chapter,
  .designer-page .editorial-chapter-composition,
  .designer-page .editorial-chapter-character,
  .designer-page .editorial-chapter-integration{
    margin-top:72px;
    gap:20px;
  }

  .designer-page .editorial-image-painting{width:96%}
  .designer-page .editorial-image-object{width:92%}

  .designer-page .editorial-copy .editorial-number{margin-bottom:14px}
  .designer-page .editorial-copy p{
    margin-top:20px;
    line-height:1.7;
  }

  .designer-page .editorial-copy p+p{margin-top:14px}

  .designer-page .designer-lead{
    padding-inline:max(var(--mobile-gutter),env(safe-area-inset-left)) max(var(--mobile-gutter),env(safe-area-inset-right));
  }

  .designer-page .designer-lead-inner{gap:36px}

  .designer-page .designer-lead-visual{
    width:100%;
    justify-self:start;
  }

  .designer-page .designer-lead-copy>p:not(.designer-kicker):not(.designer-lead-note){
    margin-top:24px;
    line-height:1.68;
  }

  .designer-page .designer-lead-copy .cta-row{
    display:grid;
    gap:12px;
    margin-top:30px;
  }

  .designer-page .designer-lead-copy .cta-row .button{
    width:100%;
    min-height:50px;
  }
}

@media(max-width:900px){
  /* Сенсорные размеры действуют и на планшетной ширине, а не только на телефоне. */
  .site-nav .brand,
  .nav .brand{
    display:inline-flex;
    min-height:44px;
    align-items:center;
  }

  .home-event-strip{height:44px}

  .text-link,
  .cc-source-link{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    padding-top:8px;
  }

  .select{min-height:46px}
  .artwork-image-button{width:44px;height:44px}
  .artwork-work-nav button,
  .cc-work-nav button{min-height:44px}
}

@media(max-width:370px){
  :root{
    --mobile-gutter:18px;
    --mobile-title-xl:2.5rem;
    --mobile-title-lg:2.05rem;
  }
}