@media (max-width:1180px) and (min-width:901px){
  .site-header{padding-inline:3vw}
  .logo{width:235px}
  .site-header nav{gap:24px}
  .button-small{padding:11px 13px}
  .hero-copy{left:5vw;width:47%}
  .hero-art{right:4vw;width:42vw}
  .page-hero{gap:5vw;padding-inline:5vw}
  .page-hero h1{font-size:clamp(62px,7.5vw,92px)}
  .detail-card h3{font-size:39px}
  .story-copy{padding-inline:5vw}
}

@media (max-width:1050px) and (min-width:901px){
  body.menu-open{overflow:hidden}
  .site-header{height:75px;padding-inline:24px}
  .site-header.scrolled{height:72px}
  .site-header nav{display:none}
  .site-header>.button{display:none}
  .menu-button{display:block}
  .menu-open .site-header nav{display:flex;position:absolute;z-index:60;top:74px;left:0;right:0;height:calc(100svh - 74px);background:var(--paper);flex-direction:column;align-items:center;justify-content:center;gap:30px;border-top:2px solid var(--ink)}
  .menu-open .site-header nav a{font-size:42px}
  .hero{height:auto;min-height:0;padding:135px 28px 105px}
  .hero-copy,.hero-copy.reveal,.hero-copy.reveal.visible{position:relative;left:auto;top:auto;width:min(100%,760px);transform:none;margin-inline:auto}
  .hero h1{font-size:clamp(76px,12vw,108px);line-height:.89;max-width:720px}
  .hero-lead{max-width:610px}
  .hero-route{display:none}
  .hero-art{position:relative;right:auto;top:auto;width:min(620px,calc(100% - 80px));height:auto;aspect-ratio:1024/1350;margin:58px auto 0}
  .hero-art .art-frame img{object-position:center 35%}
  .service-ticker{height:62px}
}

@media (max-width:900px){
  body.menu-open{overflow:hidden}
  .site-header{padding-inline:20px}
  .logo{width:215px}
  .menu-open .site-header nav{z-index:60;top:74px;height:calc(100svh - 74px);gap:28px;border-top:2px solid var(--ink)}
  .menu-open .site-header nav a{font-size:clamp(30px,9vw,48px)}
  .hero{padding-top:115px}
  .hero-art{width:calc(100% - 20px);height:auto;aspect-ratio:1024/1350;max-height:none;margin-top:62px}
  .hero-art .art-frame img{object-position:center 35%}
  .manifesto>p{font-size:clamp(39px,10vw,66px)}
  .footer-logo{width:235px}
  .inner-page{padding-top:74px}
  .page-hero{min-height:auto;gap:55px}
  .page-hero-card{width:100%;justify-self:center;transform:rotate(1deg)}
  .page-hero-card img{aspect-ratio:1/1}
  .story-panel img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .story-copy{min-height:540px}
  .detail-card{min-height:450px}
}

@media (max-width:600px){
  .site-header,.site-header.scrolled{height:68px;padding-inline:16px}
  .logo{width:185px}
  .menu-open .site-header nav{top:67px;height:calc(100svh - 67px)}
  .hero{padding:102px 18px 102px}
  .hero h1{margin-block:24px}
  .hero-lead{line-height:1.55}
  .hero-art{width:min(92%,470px);margin-top:46px;box-shadow:9px 10px 0 var(--ink)}
  .sticker-two{left:8px;bottom:7%;font-size:9px;padding:8px 10px;box-shadow:3px 3px 0 var(--ink)}
  .service-ticker{height:58px}
  .service-ticker span{font-size:10px}
  .section-pad{padding-inline:18px}
  .manifesto{min-height:480px}
  .manifesto aside{font-size:17px}
  .section-heading{margin-bottom:48px}
  .hub-card{padding:27px;min-height:335px}
  .hub-card h3{margin-top:50px}
  .contact{gap:55px}
  .contact-form{box-shadow:6px 6px var(--ink)}
  footer{padding-inline:18px}
  .footer-logo{width:220px}
  .inner-page{padding-top:68px}
  .page-hero{padding:72px 18px 58px;gap:42px}
  .page-hero h1{font-size:clamp(56px,17vw,78px);margin-block:20px}
  .page-hero-copy>p:last-child{font-size:16px}
  .page-hero-card{padding:10px;box-shadow:7px 7px var(--ink)}
  .info-section{padding:70px 18px}
  .info-intro{margin-bottom:48px}
  .info-intro h2{font-size:clamp(43px,13vw,62px)}
  .detail-card{min-height:475px;padding:26px}
  .detail-card h3{font-size:38px;margin-top:62px}
  .detail-list{grid-template-columns:1fr}
  .story-copy{padding:70px 24px;min-height:500px}
  .story-copy h2{font-size:48px}
  .principle{min-height:275px;padding:25px}
  .timeline-step{grid-template-columns:52px 1fr;gap:22px;padding-block:42px}
  .timeline-step>b{width:44px;height:44px}
  .timeline-step h3{font-size:37px}
  .page-cta{padding:60px 18px}
  .page-cta .button{width:100%}
}

@media (max-width:390px){
  .site-header,.site-header.scrolled{padding-inline:12px}
  .logo{width:165px}
  .hero{padding-inline:14px}
  .hero h1{font-size:clamp(54px,17vw,68px);letter-spacing:-.075em}
  .hero-actions{flex-direction:column;align-items:stretch;gap:18px}
  .hero-actions .button{width:100%}
  .hero-actions .text-link{align-self:flex-start}
  .hero-art{width:92%;margin-top:42px}
}