/* Tablet */
@media (max-width:1024px){

  .work-grid .work-item[data-pos="0"]{grid-column:1 / span 6}
  .work-grid .work-item[data-pos="1"]{grid-column:8 / span 5}
  .work-grid .work-item[data-pos="2"]{grid-column:1 / span 7}
  .work-grid .work-item[data-pos="3"]{grid-column:9 / span 4}

  .project-head h1{grid-column:1 / -1}
  .project-head .label{grid-column:1 / -1;text-align:left;display:flex;gap:24px}
  .project-about__text{grid-column:1 / span 7}
  .project-meta{grid-column:9 / span 4}
  .g-single .g-item{grid-column:3 / span 8}
  .g-single.is-left .g-item{grid-column:1 / span 7}

  .about-intro .lead{grid-column:1 / -1}
  .about-image{grid-column:1 / -1}
  .about-note{grid-column:1 / span 7}
  .about-areas{grid-template-columns:repeat(2,1fr);row-gap:48px}

  .service__title{grid-column:2 / span 11}
  .service__body{grid-column:2 / span 8}
  .contact-intro{grid-column:1 / -1}
  .form{grid-column:1 / span 9}
}

/* Mobile */
@media (max-width:767px){
  :root{--header-h:56px}
  .nav{display:none}
  .menu-toggle{display:block}

  .site-footer__top{flex-direction:column;gap:32px}
  .site-footer__links{flex-wrap:wrap;gap:12px 28px}

  .hero__title{font-size:clamp(88px,30vw,200px)}
  .hero__scroll{display:none}
  .statement .lead{margin-left:0}

  /* works: one after another, full width of the phone */
  .selected{gap:72px}
  .selected .work-item:nth-child(n){width:100%;margin-left:0;margin-right:0}
  .selected .work-item__media{aspect-ratio:3/4}
  .work-item__head .work-item__title{font-size:clamp(20px,6vw,26px)}
  .work-item__view{display:none}
  .section-head{margin-bottom:32px}

  .work-grid{grid-template-columns:1fr;row-gap:64px}
  .work-grid .work-item[data-pos]{grid-column:1;margin-top:0}
  .work-grid .work-item[data-pos="0"] .work-item__media,
  .work-grid .work-item[data-pos="3"] .work-item__media{aspect-ratio:4/5}
  .work-grid .work-item[data-pos="1"] .work-item__media,
  .work-grid .work-item[data-pos="2"] .work-item__media{aspect-ratio:3/2}
  .filters{gap:4px 24px}

  /* project page: image edge to edge */
  .project-hero{aspect-ratio:3/2;max-height:none;margin-inline:calc(var(--gutter) * -1);width:calc(100% + var(--gutter) * 2)}
  .project-hero.g-item{width:calc(100% + var(--gutter) * 2);margin-inline:calc(var(--gutter) * -1)}
  .project-about{grid-template-columns:1fr;row-gap:40px}
  .project-about__text,.project-meta{grid-column:1}
  .project-meta{grid-template-columns:1fr 1fr;gap:24px}
  .project-meta > div:last-child{grid-column:1 / -1}
  .gallery{margin-inline:calc(var(--gutter) * -1);gap:36px}
  .g-block{grid-template-columns:1fr;gap:28px}
  .g-full .g-item,.g-pair .g-item,.g-offset .g-item:first-child,.g-offset .g-item:last-child,
  .g-offset.is-reverse .g-item:first-child,.g-offset.is-reverse .g-item:last-child,
  .g-single .g-item,.g-single.is-left .g-item{grid-column:1;grid-row:auto}
  /* keep a little rhythm: the small image of an offset pair steps in */
  .g-offset .g-item:last-child,.g-offset.is-reverse .g-item:first-child{width:62%;margin-left:var(--gutter)}
  .g-offset.is-reverse .g-item:first-child{margin-left:auto;margin-right:var(--gutter)}
  .g-single .g-item{width:78%;margin-left:auto}
  .g-single.is-left .g-item{margin-left:0}
  .next-project__title{flex-direction:column;align-items:flex-start;gap:8px}

  .lightbox__figure{padding:56px 0}
  .lightbox__nav{top:auto;bottom:8px;transform:none}
  .lightbox__nav--prev{left:var(--gutter)}
  .lightbox__nav--next{right:var(--gutter)}

  .about-note{grid-column:1 / -1}
  .about-areas{grid-template-columns:1fr 1fr;gap:40px var(--gap)}
  .service{row-gap:18px}
  .service__no{grid-column:1 / -1}
  .service__title,.service__body{grid-column:1 / -1}
  .form{grid-column:1 / -1}
  .contact-details{grid-template-columns:1fr;gap:28px}
  .cursor{display:none}
}
@media (max-width:420px){
  .about-areas{grid-template-columns:1fr}
}

/* header logo: mobile shows the wordmark only */
@media (max-width:767px){.logo__sep,.logo__names{display:none}}

/* brand update: tablet / mobile */
@media (max-width:1024px){
  .home-cta__title{grid-column:1 / -1}
  .home-cta__body{grid-column:1 / span 9;align-self:start}
  .about-story__zh{grid-column:1 / span 8}
  .about-story__en{grid-column:1 / span 8}
  .process__list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .hero__title{--w:clamp(180px,52vw,300px)}
  .home-cta__body,.about-story__zh,.about-story__en{grid-column:1 / -1}
  .process__list{grid-template-columns:1fr}
}

@media (max-width:420px){.work-item__facts{gap:8px;letter-spacing:.1em}.work-item__facts span{letter-spacing:.1em}}