/* Home: one woven surface, with the Pride mark reserved for the hero and trophies. */
.community-page {
  background-color: #120a0c;
  background-image:
    linear-gradient(180deg, rgba(22, 10, 13, .95), rgba(16, 9, 12, .96)),
    url('/assets/ti26-brocade.png');
  background-size: auto, 620px;
  background-attachment: scroll;
}

/* Keep the current hero composition and give its lower edge the same warm cloth as the chapters. */
.community-hero::after {
  background-image:
    linear-gradient(180deg, rgba(16, 7, 9, .83), rgba(16, 7, 9, .79) 78%, rgba(22, 8, 11, .93)),
    url('/assets/ti26-brocade.png');
}

/* Titles use the same editorial face; condensed type remains for labels and figures. */
.season-prize-hero h2,
.season-podium__heading h2 {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -.04em;
}
.season-prize-hero h2 {
  font-size: clamp(2.75rem, 4.6vw, 4.55rem);
  line-height: .98;
}
.season-podium__heading h2 {
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.05;
}

/* Give the three competition pieces room to read as a sequence, not one thick frame. */
.season-prize-hero {
  width: min(100%, 1500px);
  border-inline: 0;
  background-color: transparent;
}
.season-prize-hero::before,
.season-prize-hero::after {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.season-prize-hero__heading > div { min-width: 0; }
.season-prize-hero__status { order: 2; }
.community-home__bands {
  width: min(100%, 1500px);
  margin-top: 0;
}
.community-home__bands .community-band--ranking {
  border-inline: 0;
  border-block: 0;
  background-color: transparent;
  box-shadow: none;
}
.community-home__bands .community-band--ranking::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(13, 7, 10, .26), rgba(13, 7, 10, .7) 28%, rgba(13, 7, 10, .78) 72%, rgba(13, 7, 10, .28)),
    url('/assets/ti26-brocade.png');
  background-position: center;
  background-size: cover, 520px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  pointer-events: none;
}
.season-prize-hero__fund > span,
.season-prize-hero__jackpot > span,
.season-prize-hero__awards h3,
.season-prize-hero__awards dt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.season-prize-hero__awards .community-icon,
.season-prize-hero__highlights .community-icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: #edc683;
}
.season-podium {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1500px;
  min-height: clamp(650px, 56.3vw, 844px);
  margin: 0 auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.season-prize-hero::after {
  background:
    linear-gradient(180deg, rgba(10, 4, 7, .28), transparent 14%, transparent 86%, rgba(10, 4, 7, .32)),
    linear-gradient(90deg, rgba(10, 4, 7, .47), transparent 23%, transparent 77%, rgba(10, 4, 7, .47));
}
.season-podium::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  background-image:
    linear-gradient(90deg, rgba(13, 7, 10, .21), rgba(13, 7, 10, .69) 26%, rgba(13, 7, 10, .74) 74%, rgba(13, 7, 10, .24)),
    url('/assets/pride-hero-tapestry.webp');
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  pointer-events: none;
}
.season-podium__figure--silhouette > img:first-child {
  opacity: .27;
  filter: sepia(1) saturate(.55) brightness(.8) contrast(1.3);
}

/* The ranking belongs to Pride's lion trophy; the hero tapestry is reserved for the podium. */
.community-home__bands .community-band--ranking {
  background-image: none;
}
.community-home__bands .community-band--ranking::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: min(43%, 630px);
  background: var(--band-art) left center / auto clamp(230px, 20vw, 290px) no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 100%);
  pointer-events: none;
}

/* The lower half continues the same burgundy-black textile and editorial rhythm. */
.community-story-wrap {
  width: 100%;
  overflow-x: clip;
  background: transparent;
}
.community-story {
  --story-gutter: clamp(26px, 5vw, 72px);
  --story-art-width: min(100vw, 1500px);
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 0 var(--story-gutter) 100px;
  border-top: 0;
  background: transparent;
  box-shadow: none;
}
.community-story > section {
  position: relative;
  max-width: 1260px;
  margin-inline: auto;
  border-bottom-color: rgba(198, 151, 92, .31);
}
.community-story__intro,
.community-how,
.community-story__matches {
  min-height: clamp(400px, 56.3vw, 845px);
}
.community-story__intro::before,
.community-story__matches::before {
  inset: 0 auto auto 50%;
  width: var(--story-art-width);
  height: auto;
  aspect-ratio: 1672 / 941;
  transform: translateX(-50%);
  background-image:
    linear-gradient(90deg, rgba(20, 7, 10, .12), rgba(20, 7, 10, .68) 29%, rgba(20, 7, 10, .73) 73%, rgba(20, 7, 10, .17)),
    var(--story-hero-art);
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 100%);
}
.community-story__intro::before { --story-hero-art: url('/assets/community-intro-unique-desktop.webp'); }
.community-story__matches::before { --story-hero-art: url('/assets/community-matches-unique-desktop.webp'); }
.community-how { isolation: isolate; }
.community-how::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto auto 0 50%;
  width: var(--story-art-width);
  height: auto;
  aspect-ratio: 1672 / 941;
  transform: translateX(-50%);
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(20, 7, 10, .05), rgba(20, 7, 10, .18) 44%, rgba(20, 7, 10, .7) 72%),
    url('/assets/community-how-unique-desktop.webp');
  background-position: center bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .78;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, rgba(0, 0, 0, .6) 56%, transparent 79%);
  mask-image: linear-gradient(90deg, #000 0%, #000 36%, rgba(0, 0, 0, .6) 56%, transparent 79%);
}
.community-how .community-steps { position: relative; }
.community-how .community-steps::before {
  content: '';
  position: absolute;
  top: 38px;
  bottom: 35px;
  left: 24px;
  width: 1px;
  background: linear-gradient(180deg, rgba(216, 166, 96, .78), rgba(216, 166, 96, .34));
  pointer-events: none;
}
.community-how .community-steps li { position: relative; border-top-color: rgba(198, 151, 92, .28); }
.community-how .community-steps__index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border: 1px solid #a77a47;
  border-radius: 50%;
  background: #231215;
  box-shadow: 0 0 0 5px rgba(20, 7, 10, .74), inset 0 0 0 2px rgba(205, 155, 94, .12);
  font-size: .94rem;
}
@media (max-width: 760px) {
  .season-prize-hero::after,
  .season-podium::before,
  .community-home__bands .community-band--ranking::after {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .season-prize-hero::before {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 88%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 88%);
  }
  .community-home__bands { margin-top: 0; }
  .season-podium {
    margin: 0 auto;
  }
  .season-podium::before {
    aspect-ratio: 941 / 1672;
    background-image:
      linear-gradient(180deg, rgba(13, 7, 10, .44), rgba(13, 7, 10, .72) 28%, rgba(13, 7, 10, .76) 76%, rgba(13, 7, 10, .44)),
      url('/assets/pride-hero-tapestry-mobile.webp');
  }
  .season-prize-hero h2 { font-size: clamp(2.45rem, 10vw, 3.5rem); }
  .season-podium__heading h2 { font-size: clamp(1.85rem, 7.5vw, 2.3rem); }
  .community-home__bands .community-band--ranking {
    background-image:
      linear-gradient(90deg, rgba(13, 7, 10, .43), rgba(13, 7, 10, .83) 35%, rgba(13, 7, 10, .87)),
      url('/assets/ti26-brocade.png');
    background-size: cover, 520px;
    background-position: center;
    background-repeat: no-repeat, repeat;
  }
  .community-home__bands .community-band--ranking::before {
    width: 68%;
    background-position: left center;
    background-size: auto 290px;
    opacity: .68;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 94%);
    mask-image: linear-gradient(90deg, #000, transparent 94%);
  }
  .community-home__bands .community-band--ranking .community-band__copy {
    background: linear-gradient(90deg, transparent, rgba(18, 6, 8, .4) 12%, rgba(18, 6, 8, .7) 50%, rgba(18, 6, 8, .4) 88%, transparent);
  }
  .community-story {
    --story-gutter: 22px;
    padding: 20px var(--story-gutter) 70px;
  }
  .community-how { min-height: 133.333vw; }
  .community-how::before {
    inset: 0 auto auto 50%;
    aspect-ratio: 1086 / 1448;
    background-image:
      linear-gradient(180deg, rgba(20, 7, 10, .52), rgba(20, 7, 10, .64) 40%, rgba(20, 7, 10, .64) 75%, rgba(20, 7, 10, .58)),
      url('/assets/community-how-unique-mobile.webp');
    background-position: center top;
    background-size: 100% 100%;
    opacity: .95;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 100%);
  }
  .community-how .community-steps::before { left: 20px; }
  .community-how .community-steps__index { width: 41px; height: 41px; font-size: .82rem; }
}

@media (min-width: 761px) and (max-width: 1360px) {
  .season-prize-hero__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .season-prize-hero__heading > div {
    grid-column: 1;
    grid-row: 2;
    width: min(420px, 72%);
  }
  .season-prize-hero__status { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
}
@media (min-width: 1361px) {
  .season-prize-hero__heading {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
  .season-prize-hero__heading > div {
    width: min(600px, 60%);
    max-width: none;
  }
  .season-prize-hero__status { margin-top: 0; }
}

@media (max-width: 520px) {
  .community-story { --story-gutter: 18px; }
  .community-live__stage:has(.community-live__fallback) { min-height: 220px; }
}

/* Narrow tablets use the wide podium scene, inside the same framed container. */
@media (min-width: 601px) and (max-width: 760px) {
  .season-podium::before {
    aspect-ratio: 1672 / 941;
    background-image:
      linear-gradient(90deg, rgba(13, 7, 10, .21), rgba(13, 7, 10, .69) 26%, rgba(13, 7, 10, .74) 74%, rgba(13, 7, 10, .24)),
      url('/assets/pride-hero-tapestry.webp');
  }
}

/* Portrait chapters show their full vertical scene once, at the section's own width. */
@media (max-width: 600px) {
  .season-podium { min-height: max(860px, 177.68vw); }
  .season-podium::before {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 100%);
  }
  .community-story__intro,
  .community-story__matches { min-height: 133.333vw; }
  .community-story__intro::before,
  .community-story__matches::before {
    aspect-ratio: 1086 / 1448;
    background-image:
      linear-gradient(180deg, rgba(20, 7, 10, .37), rgba(20, 7, 10, .64)),
      var(--story-hero-art-mobile);
  }
  .community-story__intro::before { --story-hero-art-mobile: url('/assets/community-intro-unique-mobile.webp'); }
  .community-story__matches::before { --story-hero-art-mobile: url('/assets/community-matches-unique-mobile.webp'); }
}
/* At narrow tablet widths the scene ends above the prize data, not with a frame across it. */
@media (min-width: 761px) and (max-width: 1100px) {
  .season-prize-hero::before {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 35vw, transparent 65vw);
    mask-image: linear-gradient(180deg, #000 0, #000 35vw, transparent 65vw);
  }
}

/* Warm the match vignette into the same burgundy cloth before the next scene. */
.community-story__matches::before {
  filter: saturate(.74);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
}
@media (min-width: 1500px) {
  .community-hero h1 { font-size: clamp(3rem, 4.5vw, 4.7rem); }
}

/* One illustrated panel width throughout the home. Content padding stays inside it. */
.community-tapestry {
  width: min(100%, 1260px);
  margin-inline: auto;
  container-type: inline-size;
  background: #170b0e url('/assets/ti26-brocade.png') center top / 620px auto repeat;
}
.community-hero,
.season-prize-hero,
.community-home__bands,
.season-podium,
.community-story {
  box-sizing: border-box;
  width: min(100%, 1260px);
  max-width: 1260px;
  margin-inline: auto;
}
.community-story {
  --story-art-width: 100%;
  padding-inline: 0;
}
.community-story > section {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding-inline: clamp(18px, 2.3vw, 28px);
}
.community-story__intro::before,
.community-story__matches::before,
.community-how::before {
  left: 0;
  width: 100%;
  transform: none;
}
.season-podium { min-height: min(650px, 51.6vw); }
.community-story__intro { min-height: min(500px, 39.7vw); }
.community-story__matches { min-height: min(600px, 47.6vw); }
@media (max-width: 760px) {
  .community-story__intro,
  .community-story__matches { min-height: 0; }
  .community-how { min-height: 0; }
}
@media (min-width: 1101px) and (max-width: 1360px) {
  .season-prize-hero::before {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 35vw, transparent 56vw);
    mask-image: linear-gradient(180deg, #000 0, #000 35vw, transparent 56vw);
  }
}
@media (min-width: 1361px) {
  .season-prize-hero::before {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 320px, transparent 440px);
    mask-image: linear-gradient(180deg, #000 0, #000 320px, transparent 440px);
  }
}

/* Compact artwork stays inside the 1260px panel at its source proportions. */
.season-podium,
.community-story > section { overflow: hidden; }
.season-podium::before {
  aspect-ratio: 1774 / 887;
  background-image:
    linear-gradient(90deg, rgba(13, 7, 10, .18), rgba(13, 7, 10, .58) 30%, rgba(13, 7, 10, .65) 70%, rgba(13, 7, 10, .18)),
    url('/assets/community-podium-compact-desktop.webp');
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.community-story__intro::before {
  aspect-ratio: 2011 / 782;
  background-image:
    linear-gradient(90deg, rgba(20, 7, 10, .1), rgba(20, 7, 10, .53) 27%, rgba(20, 7, 10, .6) 73%, rgba(20, 7, 10, .13)),
    url('/assets/community-intro-compact-desktop-v2.webp');
}
.community-story__matches::before {
  aspect-ratio: 1832 / 858;
  background-image:
    linear-gradient(90deg, rgba(20, 7, 10, .13), rgba(20, 7, 10, .58) 29%, rgba(20, 7, 10, .64) 73%, rgba(20, 7, 10, .16)),
    url('/assets/community-matches-compact-desktop.webp');
}
.community-story__intro::before,
.community-story__matches::before {
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.community-how::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 76%, transparent 100%);
}
@media (min-width: 601px) and (max-width: 900px) {
  .community-story__intro::before {
    aspect-ratio: 1672 / 941;
    background-image: linear-gradient(90deg, rgba(20, 7, 10, .12), rgba(20, 7, 10, .67) 29%, rgba(20, 7, 10, .73) 73%, rgba(20, 7, 10, .17)), url('/assets/community-intro-unique-desktop.webp');
  }
  .community-story__matches::before {
    aspect-ratio: 1672 / 941;
    background-image: linear-gradient(90deg, rgba(20, 7, 10, .12), rgba(20, 7, 10, .67) 29%, rgba(20, 7, 10, .73) 73%, rgba(20, 7, 10, .17)), url('/assets/community-matches-unique-desktop.webp');
  }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .season-podium::before {
    aspect-ratio: 1086 / 1448;
    background-image: linear-gradient(90deg, rgba(13, 7, 10, .18), rgba(13, 7, 10, .58) 30%, rgba(13, 7, 10, .65) 70%, rgba(13, 7, 10, .18)), url('/assets/community-podium-compact-tablet.webp');
  }
}
@media (max-width: 600px) {
  .season-podium::before {
    aspect-ratio: 841 / 1870;
    background-image: linear-gradient(90deg, rgba(13, 7, 10, .18), rgba(13, 7, 10, .58) 30%, rgba(13, 7, 10, .65) 70%, rgba(13, 7, 10, .18)), url('/assets/community-podium-compact-mobile.webp');
  }
  .community-story__intro::before,
  .community-story__matches::before {
    aspect-ratio: 1086 / 1448;
  }
}

/* The scene edges dissolve into the same cloth; the figures end inside each panel. */
.season-podium::before,
.community-story__intro::before,
.community-story__matches::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
}
@media (min-width: 761px) {
  .community-how::before {
    inset: 0 auto auto 0;
    aspect-ratio: 1429 / 1100;
    background-image:
      linear-gradient(90deg, rgba(20, 7, 10, .16), rgba(20, 7, 10, .43) 40%, rgba(20, 7, 10, .52)),
      url('/assets/community-how-io-blue-desktop.webp');
    background-position: center top;
    background-size: 100% 100%;
    opacity: .9;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  .community-how::before {
    aspect-ratio: 1;
    background-image:
      linear-gradient(90deg, rgba(20, 7, 10, .16), rgba(20, 7, 10, .43) 40%, rgba(20, 7, 10, .52)),
      url('/assets/community-how-io-blue-tablet.webp');
  }
}

@media (min-width: 901px) {
  .community-how::before {
    aspect-ratio: 1429 / 1100;
    background-image:
      linear-gradient(90deg, rgba(20, 7, 10, .04), rgba(20, 7, 10, .1) 40%, rgba(20, 7, 10, .2)),
      url('/assets/community-how-io-blue-desktop.webp');
    opacity: 1;
  }
}
@media (min-width: 901px) {
  .community-story__intro .community-story__number,
  .community-how .community-story__number {
    position: absolute;
    z-index: 2;
    top: 42px;
    left: 28%;
    padding: 0;
  }
  .community-story__intro .community-story__content,
  .community-how .community-story__content { grid-column: 2; }
  .community-story__intro .community-story__content { max-width: 620px; }
  .community-story__intro p { max-width: 500px; }
}

/* Ranking is the next scene in the same cloth, with its figure kept at the edge. */
.community-story__ranking {
  isolation: isolate;
  min-height: min(485px, 38.5vw);
}
.community-story__ranking::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 2022 / 778;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(20,7,10,.06), rgba(20,7,10,.5) 29%, rgba(20,7,10,.56) 74%, rgba(20,7,10,.12)), url('/assets/community-ranking-unique-desktop.webp') center top / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 89%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 89%, transparent 100%);
}
@media (min-width: 761px) and (max-width: 900px) {
  .community-story__ranking { min-height: 77vw; }
  .community-story__ranking::before {
    aspect-ratio: 1430 / 1100;
    background-image: linear-gradient(90deg, rgba(20,7,10,.1), rgba(20,7,10,.48) 42%, rgba(20,7,10,.38)), url('/assets/community-ranking-unique-tablet.webp');
  }
}
@media (max-width: 760px) {
  .community-story__ranking { min-height: 162vw; }
  .community-story__ranking::before {
    aspect-ratio: 985 / 1596;
    background-image: linear-gradient(90deg, rgba(20,7,10,.52), rgba(20,7,10,.36) 53%, rgba(20,7,10,.08)), url('/assets/community-ranking-unique-mobile.webp');
  }
}

.season-prize-hero { border-block-color: transparent; }
.season-podium { border-color: transparent; }
.community-story > section { border-bottom-color: rgba(198, 151, 92, .1); }
@media (min-width: 601px) and (max-width: 760px) {
  .season-prize-hero h2 { font-size: clamp(1.8rem, 4.7vw, 2.2rem); white-space: nowrap; }
}
@media (max-width: 600px) {
  .community-how::before {
    inset: 0 auto auto 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
    background: url('/assets/community-how-master-mobile-v2-prototype.webp') center top / 100% 100% no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
  }
}



/* Isolated local prototype: two integrated master paintings on one panel. */
@media (min-width: 1101px) {
  .community-tapestry {
    --t2-h: 650px; --podium-h: 650px; --intro-h: 500px; --how-h: 953px; --ranking-h: 485px; --matches-h: 600px;
    background-color: #140a0d;
    background-image: url('/assets/community-full-tapestry-desktop-lion-charcoal-official-cup-v8-edge-trim.webp');
    background-position: center top;
    background-size: 100% calc(var(--t2-h) + var(--podium-h) + var(--intro-h) + var(--how-h) + var(--ranking-h) + var(--matches-h));
    background-repeat: no-repeat;
  }
  .season-podium, .community-story, .community-story > section { background: transparent; border-color: transparent; }
  .season-podium::before, .community-story__intro::before, .community-how::before, .community-story__ranking::before, .community-story__matches::before { display: none; }
  .community-how .community-steps p { max-width: 550px; }
  .community-story__ranking p { max-width: 600px; }
  .community-story__matches .community-story__lead { max-width: 600px; }
}

/* Mobile proof: one uninterrupted painting for Ranking and Matches. */
@media (max-width: 600px) {
  .community-tapestry {
    background-color: #140a0d;
    background-image: url('/assets/community-intro-how-master-mobile-v5-charcoal.webp'), url('/assets/community-podium-intro-master-mobile-v3-woven.webp'), url('/assets/community-ranking-matches-master-mobile-v6-charcoal.webp');
    background-position: center calc(var(--how-top) - 64px), center var(--podium-top), center var(--ranking-top);
    background-size: 100% calc(var(--how-h) + 64px), 100% calc(var(--podium-h) + var(--intro-h) + 20px), 100% calc(var(--ranking-h) + var(--matches-h));
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
  .season-podium,
  .community-story__intro,
  .community-how,
  .community-story__ranking,
  .community-story__matches { background: transparent; }
  .season-podium, .community-story, .community-story > section { border-color: transparent; }
  .season-podium::before,
  .community-story__intro::before,
  .community-how::before,
  .community-story__ranking::before,
  .community-story__matches::before { display: none; }
}

@media (max-width: 440px) {
  .community-story__ranking h2,
  .community-story__ranking p,
  .community-story__matches h2,
  .community-story__matches .community-story__lead {
    box-sizing: border-box;
    max-width: min(260px, calc(100% - 50px));
    margin-left: 36px;
  }
  .community-story__ranking .community-story__actions { margin-left: 36px; }
  .community-how .community-steps li:nth-child(4) p { max-width: 250px; }
  .community-story__ranking h2,
  .community-story__matches h2 {
    font-size: clamp(1.7rem, 7.6vw, 1.85rem);
    line-height: 1.06;
  }
}

/* The official cup medallion is woven into the continuous desktop raster. */
@media (min-width: 1101px) {
  .season-prize-hero { background: transparent; }
  .season-prize-hero::before { display: none; }
  .season-prize-hero::after {
    background: linear-gradient(90deg, rgba(10, 4, 7, .35), transparent 23%, transparent 77%, rgba(10, 4, 7, .35));
  }
}

@media (max-width: 600px) {
  .season-prize-hero {
    background-color: #140a0d;
    background-image: url('/assets/community-t2-extension-matte-mobile-v10.webp');
    background-position: center bottom;
    background-size: 100% calc(100% - 147.715cqi);
    background-repeat: no-repeat;
  }
  .season-prize-hero::before {
    height: 147.715cqi;
    aspect-ratio: auto;
    background-image: linear-gradient(rgba(10,4,7,.2),rgba(10,4,7,.05) 45%,rgba(10,4,7,.18)), url('/assets/community-season2-prize-lion-matte-mobile-v7-edge-only-optimized.webp');
    background-size: 100% 100%, 100% auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .community-story__intro p { max-width: 70%; }
}

/* Wider phones have room for the tablet composition; the portrait How scene
   would flatten Io when compressed into four shorter rows here. */
@media (min-width: 441px) and (max-width: 600px) {
  .community-tapestry {
    background-image: url('/assets/community-t2-podium-intro-continuous-600-v3.webp'), url('/assets/community-intro-how-ranking-matches-master-tablet-v3-woven.webp');
    background-position: center 147.715cqi, center var(--intro-top);
    background-size: 100% calc(var(--intro-top) + var(--intro-h) - 147.715cqi), 100% calc(var(--intro-h) + var(--how-h) + var(--ranking-h) + var(--matches-h));
    background-repeat: no-repeat, no-repeat;
  }
  .season-prize-hero { background: transparent; }
  .season-podium::before { display: none; }
  .community-story__ranking {
    min-height: 0;
    align-content: start;
    grid-template-rows: auto auto;
  }
  .community-story__intro p:not(.community-story__lead) { max-width: 65%; }
  .community-story__ranking .community-story__content { padding-left: 23vw; }
  .community-story__ranking h2,
  .community-story__ranking p { max-width: 50vw; }
  .community-story__ranking h2 { font-size: clamp(1.75rem, 5.2vw, 1.95rem); }
  .community-story__matches .community-eyebrow { display: block; margin-left: 23vw; }
  .community-story__matches h2,
  .community-story__matches .community-story__lead { max-width: 50vw; margin-left: 23vw; }
  .community-story__matches h2 { font-size: clamp(1.7rem, 5.2vw, 1.95rem); line-height: 1.06; }
}

@media (min-width: 441px) and (max-width: 520px) {
  .community-tapestry {
    background-image: url('/assets/community-t2-podium-intro-continuous-441-v3.webp'), url('/assets/community-intro-how-ranking-matches-master-tablet-v3-woven.webp');
  }
}

@media (min-width: 521px) and (max-width: 539px) {
  .community-tapestry {
    background-image: url('/assets/community-t2-podium-intro-continuous-521-v3.webp'), url('/assets/community-intro-how-ranking-matches-master-tablet-v3-woven.webp');
  }
}

@media (min-width: 540px) and (max-width: 597px) {
  .community-tapestry {
    background-image: url('/assets/community-t2-podium-intro-continuous-560-v3.webp'), url('/assets/community-intro-how-ranking-matches-master-tablet-v3-woven.webp');
  }
}

/* At the intermediate mobile breakpoint, the ranking text determines its
   height. Otherwise the grid expands its small chapter label into a blank row. */
@media (min-width: 601px) and (max-width: 760px) {
  .season-prize-hero,
  .season-podium { background: transparent; border-block-color: transparent; }
  .season-prize-hero::before,
  .season-podium::before { display: none; }
  .community-tapestry {
    background-color: #140a0d;
    background-image: url('/assets/community-t2-podium-continuous-tablet-lion-charcoal-v10.webp'), url('/assets/community-intro-how-ranking-matches-master-tablet-v3-woven.webp');
    background-position: center top, center var(--intro-top);
    background-size: 100% calc(var(--t2-h) + var(--podium-h)), 100% calc(var(--intro-h) + var(--how-h) + var(--ranking-h) + var(--matches-h));
    background-repeat: no-repeat, no-repeat;
  }
  .community-story__ranking {
    min-height: 0;
    align-content: start;
    grid-template-rows: auto auto;
  }
  .community-story__intro::before,
  .community-how::before,
  .community-story__ranking::before,
  .community-story__matches::before { display: none; }
  .community-story__intro p:not(.community-story__lead) { max-width: 65%; }
  .community-story__ranking .community-story__content { padding-left: clamp(50px, 8vw, 70px); }
  .community-story__ranking h2 { font-size: clamp(1.95rem, 4.7vw, 2.3rem); }
  .community-story__matches .community-story__lead { max-width: 78%; }
}

/* The tablet chapters follow one measured painting without sectional seams. */
@media (min-width: 761px) and (max-width: 1100px) {
  .community-tapestry {
    background-color: #140a0d;
    background-image: url('/assets/community-podium-intro-how-ranking-matches-master-desktop-v7-io-blue.webp');
    background-position: center var(--podium-top);
    background-size: 100% calc(var(--podium-h) + var(--intro-h) + var(--how-h) + var(--ranking-h) + var(--matches-h));
    background-repeat: no-repeat;
  }
  .season-podium,
  .community-story,
  .community-story > section { background: transparent; border-color: transparent; }
  .season-podium::before,
  .community-story__intro::before,
  .community-how::before,
  .community-story__ranking::before,
  .community-story__matches::before { display: none; }
  .community-story__ranking { min-height: 430px; }
  .community-story__intro p,
  .community-how .community-steps p,
  .community-story__ranking p,
  .community-story__matches .community-story__lead { max-width: clamp(340px, 46vw, 500px); }
  .community-story__ranking h2,
  .community-story__matches h2 { max-width: min(55vw, 600px); }
}

/* The narrow tablet painting keeps Io and the side heroes at near-native proportions. */
@media (min-width: 761px) and (max-width: 900px) {
  .community-tapestry {
    --tablet-join: clamp(90px, 11vw, 110px);
    --tablet-overlap: 48px;
    background-image: url('/assets/community-intro-how-ranking-matches-master-tablet-v3-woven.webp');
    background-position: center calc(var(--intro-top) - var(--tablet-join) - var(--tablet-overlap));
    background-size: 100% calc(var(--tablet-join) + var(--tablet-overlap) + var(--intro-h) + var(--how-h) + var(--ranking-h) + var(--matches-h));
  }
  .season-podium::before {
    display: block;
    inset: 0 0 var(--tablet-join);
    aspect-ratio: auto;
    background-size: 100% auto;
    -webkit-mask-image: none;
    mask-image: none;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 94% 99%, 86% 94%, 78% 100%, 69% 95%, 60% 99%, 52% 94%, 43% 100%, 34% 95%, 25% 99%, 16% 94%, 8% 100%, 0 95%);
  }
}

/* Keep copy inside the quiet center of the desktop painting on wide tablets. */
@media (min-width: 901px) and (max-width: 1100px) {
  .community-story__intro p,
  .community-how .community-steps p { max-width: 40vw; }
  .community-story__ranking .community-story__content { padding-left: 55px; }
  .community-story__ranking h2,
  .community-story__ranking p { max-width: 40vw; }
  .community-story__ranking h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.05rem);
    line-height: 1.08;
  }
  .community-story__matches .community-eyebrow,
  .community-story__matches h2,
  .community-story__matches .community-story__lead { margin-left: 55px; }
  .community-story__matches .community-eyebrow { display: block; }
  .community-story__matches h2,
  .community-story__matches .community-story__lead { max-width: 40vw; }
  .community-story__matches h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.1rem);
    line-height: 1.08;
  }
}

/* On small phones the Season 2 cloth continues behind the entire Podium. */
@media (max-width: 440px) {
  .community-tapestry {
    background-image:
      url('/assets/community-intro-how-master-mobile-v5-charcoal.webp'),
      url('/assets/community-t2-podium-matte-mobile-v1.webp'),
      url('/assets/community-podium-intro-master-mobile-v3-woven.webp'),
      url('/assets/community-ranking-matches-master-mobile-v6-charcoal.webp');
    background-position:
      center calc(var(--how-top) - 64px),
      center 147.715cqi,
      center var(--podium-top),
      center var(--ranking-top);
    background-size:
      100% calc(var(--how-h) + 64px),
      100% calc(var(--podium-top) + var(--podium-h) - 147.715cqi),
      100% calc(var(--podium-h) + var(--intro-h) + 20px),
      100% calc(var(--ranking-h) + var(--matches-h));
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  }
  .season-prize-hero { background: transparent; }
  .season-podium::before { display: none; }
}