/* ==========================================================================
   Home
   ========================================================================== */

/* ---------- H01 Hero ---------- */
.hero { padding-block: clamp(24px, 3.4vw, 52px) clamp(8px, 1.5vw, 24px); overflow: clip; }
.hero__grid { align-items: start; row-gap: 48px; }
.hero__copy { grid-column: 1 / span 6; display: grid; gap: 28px; align-content: center; position: relative; z-index: 2; }
.hero__title { font-size: clamp(2.75rem, 1.46rem + 5.3vw, 6.25rem); font-variation-settings: "wdth" 80; }
@media (min-width: 400px) { .hero__line { display: block; } }
.hero__lead { max-width: 30em; }
.hero__actions { margin-top: 4px; }
.hero__media { grid-column: 7 / span 6; display: grid; gap: 20px; justify-items: center; }
.hero__stack { position: relative; width: 100%; display: grid; place-items: center; padding-block: 0 8px; }
.hero__main { position: relative; z-index: 2; width: min(100%, 420px); animation: settle 640ms 120ms var(--ease-out) both; }
.hero__main .player { border-radius: 12px; box-shadow: 0 30px 60px -28px rgba(23,23,22,.45), 0 2px 0 rgba(23,23,22,.04); }
.hero__rear { position: absolute; z-index: 1; width: 50%; max-width: 300px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--paper-3); }
.hero__rear img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.hero__rear--1 { left: 0; top: 4%; transform: rotate(-5deg); }
.hero__rear--2 { right: 0; bottom: 2%; transform: rotate(4deg); }
.hero__rear::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 38%, transparent); }
.hero__caption { width: min(100%, 560px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.hero__caption-text { display: grid; gap: 4px; }
.hero__caption-title { font-weight: 640; font-size: 1.0625rem; line-height: 1.3; }
.hero__caption-brand { font-family: var(--mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; margin-right: 6px; color: var(--muted); }
.hero__caption-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__caption-actions .btn .icon { width: 14px; height: 14px; }

/* short laptop screens: keep the calls to action and the piece's relationship label above the fold */
@media (min-width: 1024px) and (max-height: 860px) { .hero__main { width: min(100%, 360px); } }
@media (max-width: 1199px) { .hero__rear { width: 44%; } }
@media (max-width: 1023px) {
  .hero__copy { grid-column: 1 / -1; }
  .hero__media { grid-column: 1 / -1; }
  .hero__main { width: min(100%, 420px); }
  .hero__rear { width: 36%; }
  .hero__rear--1 { left: 4%; } .hero__rear--2 { right: 4%; }
}
@media (max-width: 767px) {
  .hero__copy { gap: 22px; }
  .hero__stack { padding-block: 0; }
  .hero__rear { display: none; }
  .hero__main { width: 100%; }
  .hero__caption { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
}
@media (max-width: 479px) { .hero__title .swipe-word { white-space: normal; } .hero__actions .btn { white-space: normal; text-align: center; line-height: 1.15; padding-block: 10px; } }
@media (prefers-reduced-motion: reduce) { .hero__main { animation: none; } }