/* The homepage artwork has its own layout. Captions always remain in flow. */
.hero-area{overflow:hidden}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;min-height:0;padding-top:38px;padding-bottom:28px;align-items:center}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(4.2rem,7vw,6.2rem);line-height:1.02;letter-spacing:-.045em;margin:24px 0 22px}
.hero-lead{display:block;font-size:.65em;line-height:1.15;letter-spacing:-.035em;margin-bottom:6px}
.hero h1 em{display:block;white-space:nowrap}
.hero h2{font-size:clamp(1.25rem,2vw,1.7rem)}
.hero-copy p{max-width:430px;line-height:1.6}
.hero-actions{margin-top:25px;gap:23px}
.hero-art{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;min-height:0;height:auto;margin:0;isolation:isolate}
.hero-stage{position:relative;width:100%;aspect-ratio:1.25;min-width:0}
.hero-scene{display:block;width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse closest-side,#000 88%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 88%,transparent 100%);mix-blend-mode:lighten}
.hero-caption{position:static;inset:auto;width:auto;text-align:center;font-size:15px;line-height:1.5;color:#d9ddcf;white-space:normal;padding:0 10px 5px}
.hero-caption strong{color:var(--cream);font-weight:900;white-space:nowrap}
.bubble{padding:9px 18px;font-size:22px;box-shadow:2px 3px 0 #0c100e}
.bubble-one{top:6%;left:2%;transform:rotate(-9deg)}
.bubble-two{top:17%;right:-1%;transform:rotate(8deg)}
.category-shortcuts{padding-top:12px;padding-bottom:25px}
.category-shortcuts a{padding:12px 18px;font-size:18px}
@media(min-width:1500px){.hero{gap:40px;padding-top:45px;padding-bottom:32px}}
@media(min-width:641px) and (max-width:980px){
  .hero{gap:14px;padding-top:30px;padding-bottom:26px}
  .hero h1{font-size:clamp(3.6rem,7.1vw,4.65rem);margin:19px 0}
  .hero-lead{font-size:.62em}
  .hero-actions{flex-wrap:wrap;gap:13px;margin-top:22px}
  .hero-actions .btn{padding:13px 19px;font-size:15px}
  .hero-actions .text-link{font-size:14px}
  .bubble{font-size:17px;padding:7px 12px}
  .hero-caption{font-size:13px}
}
@media(max-width:640px){
  .hero{display:flex;flex-direction:column;gap:16px;min-height:0;padding-top:25px;padding-bottom:13px}
  .hero-copy{width:100%}
  .hero h1{font-size:clamp(3.2rem,12.4vw,4.8rem);line-height:1.01;letter-spacing:-.045em;margin:17px 0 14px}
  .hero-lead{font-size:.65em;line-height:1.2;margin-bottom:5px}
  .hero h2{font-size:1.18rem;line-height:1.2}
  .hero-copy p{font-size:14px;margin-top:7px;max-width:none}
  .hero-actions{margin-top:19px}
  .hero-actions .btn{min-height:46px;padding:12px 23px}
  .hero-art{width:min(100%,410px);margin:2px auto 0;min-height:0;height:auto;gap:0}
  .hero-stage{aspect-ratio:1.3}
  .hero-scene{mask-image:radial-gradient(ellipse closest-side,#000 88%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 88%,transparent 100%)}
  .bubble{font-size:17px;padding:7px 13px;border-width:1.5px}
  .bubble::after{width:11px;height:11px;bottom:-6px;left:22px;border-width:1.5px}
  .bubble-one{top:3%;left:0}
  .bubble-two{top:14%;right:0}
  .hero-caption{position:static;font-size:13px;padding:2px 0 0;line-height:1.5}
  .category-shortcuts{padding-top:12px;padding-bottom:20px;gap:8px}
  .category-shortcuts a{padding:10px 14px;font-size:14px}
}