:root{color:#171713;background:#faf3e7;font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.55}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit}
a:focus-visible{outline:3px solid #152ec1;outline-offset:5px}
.hero,.lime{background:#dfeb36}
.paper{background:#faf3e7}
.blue{background:#6381e8}
.coral{background:#ff6042}
.nav,.band{width:min(100% - 64px,1160px);margin-inline:auto}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.nav a{text-decoration:none;font-weight:750}
.brand{font-size:30px;line-height:1;letter-spacing:-.065em}
.band{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(22px,5vw,74px);min-height:clamp(320px,40vw,520px);padding-block:32px}
.copy{min-width:0;container-type:inline-size}
.band img{display:block;width:100%;height:auto;border-radius:20px}
.hero .band{min-height:clamp(410px,50vw,640px);padding-block:26px 48px}
h1,h2{display:table;transform:rotate(-3deg);margin:0 0 22px;font-weight:900;letter-spacing:-.04em;line-height:1.15;border-radius:14px;padding:.2em .32em;background:#dfea34;color:#171713}
h1{font-size:min(13.6cqi,70px);background:#fffaf2;box-shadow:-8px 9px #ff6042}
h1 span{display:block;white-space:nowrap}
h2{font-size:clamp(33px,4.5vw,65px)}
.blue h2{background:#ff674c}
.coral h2,.lime h2{background:#fffaf2}
.lime h2{box-shadow:-5px 6px #ff6042}
p{margin:0;max-width:24em;font-size:clamp(17px,2vw,25px)}
.button{display:inline-block;margin-top:22px;padding:10px 18px;background:#171713;border-radius:999px;color:#fff;text-decoration:none;font-weight:750}
@media(max-width:650px){
  .nav,.band{width:calc(100% - 36px)}
  .band{grid-template-columns:1fr;gap:22px;padding-block:30px}
  .hero .band{padding-block:16px 30px}
  .band img{max-width:500px;margin-inline:auto}
  h1,h2{margin-bottom:15px}
}