@layer components {
  .home-stage { --home-quote-gap: clamp(2.5rem, 2rem + 1vw, 4.25rem); position: relative; width: min(100%, var(--stage)); margin-inline: auto; padding-left: clamp(var(--page-gutter), 8.333vw, 7.5rem); }
  .shows-carousel { position: relative; width: min(67.1875rem, calc(100% - clamp(var(--page-gutter), 8.333vw, 7.5rem))); min-height: calc(29.625rem + var(--home-quote-gap)); }
  .shows-carousel__viewport, .shows-carousel__panels { position: relative; }
  .shows-carousel__panel[hidden] { display: none; }
  .shows-carousel__card { position: relative; width: min(53.5rem, 100%); min-height: 29.625rem; padding: 2rem 2.5rem 1.3125rem; background: var(--color-light-gray); }
  .shows-carousel__visual { display: block; width: 100%; overflow: hidden; }
  .shows-carousel__image { width: 100%; aspect-ratio: 776 / 393; object-fit: cover; }
  .shows-carousel__caption { position: absolute; top: 25.0625rem; left: 4.6875rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6875rem; }
  .shows-carousel__title { margin: 0; padding: 0.5625rem 1.0625rem; background: var(--color-yellow); font-family: var(--font-body); font-size: var(--text-card-title); font-weight: 400; line-height: 1.25; }
  .shows-carousel__title a { text-decoration: none; }
  .shows-carousel__meta { margin: 0; padding: 0.5625rem 1.0625rem; background: var(--color-white); font-size: var(--text-meta); font-style: italic; line-height: var(--line-height-card); }
  .shows-carousel__dots { position: absolute; z-index: 2; right: calc(100% - min(53.5rem, 100%) + 2rem); bottom: 1.3125rem; left: auto; display: flex; gap: 0; }
  .shows-carousel__dot { display: grid; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: transparent; place-items: center; cursor: pointer; }
  .shows-carousel__dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-black); }
  .shows-carousel__dot.is-active::before { background: var(--color-pink); }
  .shows-carousel__dot:focus-visible { border-radius: 0.25rem; outline-offset: 0; }
  .home-quote { position: relative; width: min(51rem, calc(100% - var(--page-gutter))); margin: 0 0 var(--home-quote-gap); padding-left: 2.1875rem; }
  .home-quote__body { position: relative; margin: 0; font-size: clamp(1.75rem, 2.64vw, 2.375rem); line-height: 1.35; }
  .home-quote__body::before, .home-quote__body::after { position: absolute; font-family: var(--font-typewriter); font-size: 2.75rem; font-weight: 100; line-height: 1; }
  .home-quote__body::before { content: "“"; top: -0.2em; left: -2.1875rem; }
  .home-quote__body::after { content: "“"; right: -0.5rem; bottom: 1.65em; }
  .home-quote__body p { margin: 0; }
  .home-quote__body cite { display: block; margin-top: 0.65em; font-size: clamp(1rem, 1.5vw, 1.25rem); font-style: normal; line-height: 1.4; }
  .home-news { display: flex; flex-direction: column; align-items: flex-start; width: min(51rem, calc(100% - var(--page-gutter))); gap: 2.875rem; margin: 0 0 8rem 2.3125rem; }
  .home-news__title { display: table; margin: 0; font-family: var(--font-display); font-size: var(--text-section-title); font-weight: 400; line-height: var(--line-height-tight); }
  .home-news__title-text { padding-inline: 0.08em; background-image: linear-gradient(transparent 68%, var(--color-green) 68%, var(--color-green) 92%, transparent 92%); background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .home-news__content { width: 100%; }
  .home-news__content > :first-child { margin-top: 0; }
  .home-news__content > :last-child { margin-bottom: 0; }
}

@media (min-width: 64.0625rem) and (max-width: 76.25rem) {
  .home-stage { padding-right: calc(var(--nav-clearance) + var(--space-m)); }
  .shows-carousel { width: 100%; }
}

@media (max-width: 64rem) {
  .home-stage { padding-inline: var(--page-gutter); }
  .shows-carousel { width: 100%; min-height: auto; padding-bottom: calc(2.25rem + var(--home-quote-gap)); }
  .shows-carousel__card { width: 100%; min-height: 0; padding: clamp(0.75rem, 3vw, 2rem); }
  .shows-carousel__caption { top: auto; left: clamp(1.5rem, 8vw, 4.6875rem); bottom: -2.25rem; max-width: calc(100% - 3rem); }
  .shows-carousel__dots { top: auto; right: calc(clamp(0.75rem, 3vw, 2rem) - 0.5rem); bottom: -1.5rem; left: auto; }
  .home-quote { width: 100%; margin-bottom: var(--home-quote-gap); padding-left: 1.5rem; }
  .home-quote__body { font-size: clamp(1.375rem, 6vw, 2rem); }
  .home-quote__body::before { left: -1.5rem; }
  .home-quote__body::after { right: 0; }
  .home-news { width: 100%; gap: var(--space-m); margin: 0 0 var(--space-l); }
}