/* Association homepage banner. Load after the Youth template stylesheet.
   Imagery, typography and final effective 22s motion follow the Association source. */
@font-face {
  font-family: "Association Archivo";
  src: url("/assets/fonts/archivo-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.association-hero {
  --association-hero-header-space: var(--header-h, 128px);
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: var(--association-hero-header-space) 0 0;
  overflow: hidden;
  overflow: clip;
  background: #26211d;
  color: #fff;
}
.association-hero .association-hero__motion {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform-origin: center center;
  transform: scale(1.16) translate(-4%, -3%);
  animation: associationHeroPan 22s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
.association-hero .association-hero__picture,
.association-hero .association-hero__image,
.association-hero .association-hero__shade {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.association-hero .association-hero__image {
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.association-hero .association-hero__shade { background: rgba(0, 0, 0, .1); }

/* Retain the Association's fluid-grid content footprint without Squarespace classes. */
.association-hero .association-hero__grid {
  --association-grid-gutter: calc(6vw - 11px);
  --association-cell-max: calc((2000px - 77px) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(22, minmax(24px, auto));
  grid-template-columns: minmax(var(--association-grid-gutter), 1fr) repeat(8, minmax(0, var(--association-cell-max))) minmax(var(--association-grid-gutter), 1fr);
  gap: 11px;
  width: 100%;
}
.association-hero .association-hero__copy {
  grid-area: 4 / 2 / 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 17px 0;
  text-align: center;
}
.association-hero .association-hero__title {
  margin: 0 0 32px;
  padding: 0;
  font-family: "Didot", "Bodoni Moda", serif;
  font-size: 52px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-wrap: balance; /* never strands a single word on the last line (1440px broke "…AND / INSPIRE") */
  color: #fff;
  opacity: .95;
}
.association-hero .association-hero__subtitle {
  margin: 0;
  padding: 0;
  font-family: "Association Archivo", "Archivo", Arial, sans-serif;
  font-size: min(calc(16px + .48vw), max(25.6px, 22.4px));
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
}
.association-hero .association-hero__subtitle strong { font: inherit; }

@media (min-width: 768px) {
  .association-hero .association-hero__grid {
    --association-grid-gutter: calc(4vw - 11px);
    --association-cell-max: calc((2000px - 253px) / 24);
    --association-row-height: calc(min(2000px, 92vw) * .0215);
    grid-template-rows: repeat(18, minmax(var(--association-row-height), auto));
    grid-template-columns: minmax(var(--association-grid-gutter), 1fr) repeat(24, minmax(0, var(--association-cell-max))) minmax(var(--association-grid-gutter), 1fr);
  }
  .association-hero .association-hero__copy {
    grid-area: 6 / 3 / 12 / 25;
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .association-hero .association-hero__title { font-size: 34px; line-height: 1.12; }
  .association-hero .association-hero__subtitle { font-size: calc(16px + .48 * min(1vh, 9px)); }
}
.association-hero.association-hero--paused .association-hero__motion { animation-play-state: paused; }
@keyframes associationHeroPan {
  0% { transform: scale(1.16) translate(-4%, -3%); }
  30% { transform: scale(1.16) translate(3%, -5%); }
  65% { transform: scale(1.16) translate(4%, 4%); }
  100% { transform: scale(1.16) translate(0%, 0%); }
}
@media (prefers-reduced-motion: reduce) {
  .association-hero .association-hero__motion {
    animation: none;
    transform: scale(1.16) translate(0%, 0%);
    will-change: auto;
  }
}