/* Bring the headline and transparent character into one compact spread. */
.hero {
  max-width: 1080px;
  grid-template-columns: minmax(0,1.45fr) minmax(0,1fr);
  gap: 24px;
  padding: 44px 0 52px;
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero .eyebrow { font-size: 9px; letter-spacing: .12em; margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(34px,4.65vw,52px);
  letter-spacing: .012em;
  line-height: 1.55;
  margin: 0 0 23px;
}
.hero h1>span { display: inline-block; white-space: nowrap; }
.hero .intro { font-size: 14px; line-height: 2; margin: 0 0 15px; }
.hero .hero-note { font-size: 12px; line-height: 2; margin: 0; }
.hero .hero-actions { gap: 17px; flex-wrap: wrap; margin-top: 25px; }
.hero .hero-art.oneko-art {
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 0;
  justify-self: start;
  align-self: center;
  background: transparent;
  transform: none;
}
.hero .oneko-art figcaption { color: var(--soft-cream); font-size: 12px; letter-spacing: .015em; line-height: 1.95; margin-top: 14px; }
.hero .oneko-art figcaption>span { display: block; }
@media (max-width:1050px) {
  .hero { padding-top: 37px; padding-bottom: 48px; }
  .hero .intro { font-size: 13px; }
  .hero .hero-note { font-size: 11px; }
  .hero .hero-art.oneko-art { max-width: 330px; }
  .hero .oneko-art figcaption { font-size: 11px; }
}
@media (max-width:780px) {
  .hero { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 18px; padding: 34px 0 47px; }
  .hero h1 { font-size: clamp(29px,4.5vw,37px); letter-spacing: .005em; line-height: 1.6; margin-bottom: 18px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .06em; margin-bottom: 14px; }
  .hero .intro { font-size: 12px; margin-bottom: 12px; }
  .hero .hero-note { font-size: 10px; }
  .hero .hero-art.oneko-art { max-width: 270px; }
  .hero .oneko-art figcaption { font-size: 10px; margin-top: 11px; }
  .hero .hero-actions { margin-top: 21px; }
}
@media (max-width:600px) {
  .hero { grid-template-columns: minmax(0,1fr) minmax(0,.76fr); gap: 0 16px; padding: 29px 0 45px; align-items: start; }
  .hero-copy { display: contents; }
  .hero .eyebrow { grid-column: 1/-1; grid-row: 1; margin: 0 0 12px; }
  .hero h1 { grid-column: 1/-1; grid-row: 2; font-size: clamp(25px,7.6vw,40px); letter-spacing: 0; line-height: 1.6; margin: 0 0 21px; }
  .hero .intro { grid-column: 1; grid-row: 3; font-size: 12px; line-height: 1.95; margin: 0 0 13px; }
  .hero .hero-note { grid-column: 1; grid-row: 4; font-size: 11px; line-height: 1.95; margin: 0 0 18px; }
  .hero .hero-note br { display: none; }
  .hero .hero-actions { grid-column: 1; grid-row: 5; margin: 0; }
  .hero .hero-link { width: 100%; justify-content: space-between; padding: 10px 12px; gap: 9px; min-height: 45px; font-size: 11px; }
  .hero .hero-link>span { font-size: 18px; }
  .hero .hero-art.oneko-art { grid-column: 2; grid-row: 3/span 3; max-width: 190px; }
  .hero .oneko-art figcaption { font-size: 10px; letter-spacing: 0; line-height: 1.85; margin-top: 9px; }
  .hero-edition { font-size: 7px; letter-spacing: .04em; bottom: 12px; }
}
@media (max-width:360px) {
  .hero { column-gap: 13px; }
  .hero .eyebrow { font-size: 7px; }
  .hero .intro,.hero .hero-note { font-size: 10px; }
  .hero .hero-link { font-size: 10px; padding: 10px; }
  .hero .oneko-art figcaption { font-size: 9px; }
}