/*
  223 SOCIAL CLUB — HOME RESPONSIVE SYSTEM
  ------------------------------------------------------------
  This file owns the Home layout only. It preserves the approved
  visual identity while replacing resolution-specific patches with
  fluid design tokens, scalable grids and a small breakpoint system.
*/

:root{
  --home-content-max: 87.5rem; /* 1400px */
  --home-content-wide: 94rem;
  --home-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --home-section-y: clamp(2.25rem, 4.6vw, 4.75rem);
  --home-section-y-tight: clamp(1.75rem, 3.4vw, 3.5rem);
  --home-gap-xs: clamp(.5rem, .8vw, .85rem);
  --home-gap-sm: clamp(.75rem, 1.25vw, 1.25rem);
  --home-gap-md: clamp(1.25rem, 2.4vw, 2.75rem);
  --home-gap-lg: clamp(2rem, 5vw, 6rem);
  --home-radius-sm: .5rem;
  --home-radius-md: .75rem;
  --home-nav-h: clamp(4.25rem, 6vw, 4.875rem);
  --home-hero-title: clamp(3.15rem, 5.35vw, 6.25rem);
  --home-section-title: clamp(2.35rem, 4.1vw, 4.75rem);
  --home-subsection-title: clamp(1.85rem, 3.15vw, 3.75rem);
  --home-body: clamp(.9rem, .35vw + .78rem, 1.08rem);
  --home-small: clamp(.66rem, .18vw + .58rem, .8rem);
  --home-label: clamp(.48rem, .11vw + .44rem, .62rem);
  --home-card-copy: clamp(.62rem, .16vw + .56rem, .74rem);
  --home-purple: #7c3cff;
  --home-purple-soft: #a772ff;
  --home-white: #f7f4ff;
  --home-muted: #aaa2b5;
  --home-bg: #050208;
  --home-line: rgba(255,255,255,.1);
  --home-panel: #08050b;
}

/* Scope the responsive system to the Home only. */
.home-responsive-page .home{
  width: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 18% 8%, rgba(124,60,255,.08), transparent 20%),
    var(--home-bg);
}

.home-responsive-page .home > section,
.home-responsive-page .home > nav,
.home-responsive-page .home > footer{
  width: 100%;
}

.home-responsive-page .home .eyebrow{
  margin: 0;
  font: 400 var(--home-label)/1.4 "Space Mono", monospace;
  letter-spacing: .25em;
  color: var(--home-purple-soft);
}

.home-responsive-page .home .primary,
.home-responsive-page .home .join-button,
.home-responsive-page .home .players-all-button{
  min-height: 0;
  font-size: var(--home-label);
  line-height: 1.2;
  letter-spacing: .12em;
}

/* NAV ------------------------------------------------------ */
.home-responsive-page .editorial-nav{
  height: var(--home-nav-h) !important;
  min-height: var(--home-nav-h) !important;
  padding-inline: var(--home-gutter) !important;
  background: rgba(3,3,5,.94) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}

.home-responsive-page .editorial-nav .brand b{
  font-size: clamp(2rem, 2.3vw, 2.55rem) !important;
}

.home-responsive-page .editorial-nav .brand span{
  font-size: clamp(.45rem, .52vw, .57rem) !important;
}

.home-responsive-page .editorial-nav .nav-links{
  gap: clamp(1.2rem, 3vw, 3.1rem) !important;
}

.home-responsive-page .editorial-nav .nav-links a{
  font-size: clamp(.55rem, .62vw, .7rem) !important;
}

.home-responsive-page .editorial-nav .join-button{
  padding: clamp(.62rem, .9vw, .78rem) clamp(.8rem, 1.4vw, 1.15rem) !important;
}

/* HERO ----------------------------------------------------- */
.home-responsive-page .editorial-hero{
  min-height: clamp(31rem, 68svh, 43rem) !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr) minmax(6rem, .16fr) !important;
  align-items: center !important;
  gap: var(--home-gap-md) !important;
  padding: clamp(2.25rem, 4.2vw, 4rem) var(--home-gutter) clamp(1.8rem, 3.4vw, 3rem) !important;
  overflow: hidden !important;
}

.home-responsive-page .editorial-hero-copy h2{
  max-width: 48rem;
  margin: clamp(.8rem, 1.2vw, 1.1rem) 0 clamp(1.3rem, 2.1vw, 2rem) !important;
  font-size: var(--home-hero-title) !important;
  line-height: .93 !important;
}

.home-responsive-page .editorial-hero-button{
  min-width: clamp(10.5rem, 14vw, 12.5rem) !important;
  padding: clamp(.68rem, .8vw, .82rem) clamp(.85rem, 1.2vw, 1.15rem) !important;
  gap: clamp(1.5rem, 3vw, 2.75rem) !important;
}

.home-responsive-page .editorial-hero-art{
  min-height: clamp(21rem, 38vw, 31rem) !important;
  max-height: 32rem;
}

.home-responsive-page .editorial-hero-art img{
  width: min(100%, 32.5rem) !important;
  max-height: 31rem !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.home-responsive-page .editorial-orb{
  width: clamp(16rem, 28vw, 24.5rem) !important;
}

.home-responsive-page .editorial-hero-categories{
  gap: clamp(1rem, 2vw, 1.8rem) !important;
  padding-left: clamp(.7rem, 1.5vw, 1.15rem) !important;
}

.home-responsive-page .editorial-hero-categories span{
  font-size: var(--home-label) !important;
}

/* ABOUT ---------------------------------------------------- */
.home-responsive-page .editorial-about{
  height: auto !important;
  min-height: 0 !important;
  padding: var(--home-section-y) var(--home-gutter) 0 !important;
}

.home-responsive-page .editorial-about-top{
  width: min(100%, var(--home-content-max));
  min-height: 0 !important;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(15rem, .72fr) !important;
  gap: var(--home-gap-lg) !important;
  align-items: center;
}

.home-responsive-page .editorial-about-copy h3{
  margin: clamp(.7rem, 1vw, .95rem) 0 clamp(.9rem, 1.5vw, 1.35rem) !important;
  font-size: var(--home-section-title) !important;
  line-height: .95 !important;
}

.home-responsive-page .editorial-about-copy > p:not(.eyebrow){
  max-width: 42rem;
  font-size: var(--home-body) !important;
  line-height: 1.62;
}

.home-responsive-page .editorial-about-symbol{
  min-height: clamp(12.5rem, 20vw, 16.5rem) !important;
}

.home-responsive-page .editorial-about-symbol img{
  width: min(100%, 27rem) !important;
  height: auto !important;
  aspect-ratio: 1.55 / 1;
  object-fit: cover !important;
}

.home-responsive-page .editorial-pillars{
  width: min(100%, var(--home-content-max));
  margin: clamp(1.5rem, 3vw, 2.6rem) auto 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.home-responsive-page .editorial-pillars article{
  min-height: clamp(8.75rem, 13vw, 11.25rem) !important;
  padding: clamp(1.15rem, 2.3vw, 1.8rem) clamp(.85rem, 1.8vw, 1.35rem) !important;
}

.home-responsive-page .pillar-icon{
  margin-bottom: clamp(.65rem, 1.2vw, .95rem) !important;
  font-size: clamp(1.8rem, 2.8vw, 2.7rem) !important;
}

.home-responsive-page .editorial-pillars h4{
  margin: 0 0 .55rem !important;
  font-size: clamp(.88rem, 1.2vw, 1.08rem) !important;
}

.home-responsive-page .editorial-pillars p{
  font-size: var(--home-card-copy) !important;
  line-height: 1.5;
}

/* PLAYERS -------------------------------------------------- */
.home-responsive-page .editorial-players{
  height: auto !important;
  min-height: 0 !important;
  padding: var(--home-section-y-tight) var(--home-gutter) var(--home-section-y) !important;
}

.home-responsive-page .editorial-players-heading,
.home-responsive-page .editorial-players-divider,
.home-responsive-page .editorial-players-kicker,
.home-responsive-page .editorial-join-banner{
  width: min(100%, var(--home-content-max));
  margin-inline: auto;
}

.home-responsive-page .editorial-players-heading{
  gap: var(--home-gap-md) !important;
}

.home-responsive-page .editorial-players-heading h3{
  margin: .55rem 0 0 !important;
  font-size: var(--home-subsection-title) !important;
  line-height: .95 !important;
}

.home-responsive-page .players-all-button{
  padding: clamp(.62rem, .9vw, .78rem) clamp(.8rem, 1.2vw, 1rem) !important;
}

.home-responsive-page .editorial-players-divider{
  margin-top: clamp(1rem, 1.9vw, 1.5rem) !important;
  margin-bottom: clamp(.45rem, .8vw, .7rem) !important;
}

.home-responsive-page .editorial-players-kicker{
  margin-bottom: clamp(.65rem, 1.1vw, .9rem) !important;
  font-size: var(--home-label) !important;
}

.home-responsive-page .editorial-player-grid{
  width: min(100%, clamp(48rem, 76vw, 76rem));
  margin-inline: auto !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(.55rem, 1.15vw, .95rem) !important;
}

.home-responsive-page .editorial-player-card{
  min-width: 0;
  border-radius: var(--home-radius-sm) !important;
}

.home-responsive-page .editorial-player-card img{
  width: 100%;
  height: auto !important;
  aspect-ratio: 1.38 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.home-responsive-page .editorial-player-card > div{
  padding: clamp(.58rem, .8vw, .85rem) clamp(.65rem, .9vw, .9rem) clamp(.68rem, 1vw, .95rem) !important;
}

.home-responsive-page .editorial-player-card h4{
  margin: 0 0 clamp(.25rem, .45vw, .4rem) !important;
  font-size: clamp(.78rem, 1vw, 1.08rem) !important;
  line-height: 1.12 !important;
}

.home-responsive-page .editorial-player-card p{
  font-size: var(--home-card-copy) !important;
}

.home-responsive-page .editorial-join-banner{
  margin-top: clamp(1.4rem, 2.6vw, 2rem) !important;
  padding: clamp(1.05rem, 2vw, 1.45rem) clamp(1.25rem, 4.2vw, 3.6rem) !important;
  gap: var(--home-gap-md) !important;
}

.home-responsive-page .editorial-join-banner h4{
  margin: 0 0 .3rem !important;
  font-size: clamp(1.15rem, 2vw, 1.7rem) !important;
}

.home-responsive-page .editorial-join-banner p{
  font-size: var(--home-card-copy) !important;
}

.home-responsive-page .editorial-join-banner .primary{
  min-width: clamp(10rem, 15vw, 12.8rem) !important;
  padding: clamp(.65rem, .85vw, .8rem) clamp(.8rem, 1.2vw, 1rem) !important;
}

/* RELEASE -------------------------------------------------- */
.home-responsive-page .release.section{
  width: min(calc(100% - 2 * var(--home-gutter)), var(--home-content-max));
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto;
  padding: var(--home-section-y) 0 !important;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: var(--home-gap-sm) !important;
}

.home-responsive-page .release-visual,
.home-responsive-page .release-copy{
  min-height: clamp(18rem, 30vw, 25rem) !important;
}

.home-responsive-page .release-visual{
  padding: clamp(1.2rem, 2.6vw, 2rem) !important;
}

.home-responsive-page .vinyl{
  width: clamp(12rem, 22vw, 18rem) !important;
  height: clamp(12rem, 22vw, 18rem) !important;
  top: clamp(2.1rem, 5vw, 4rem) !important;
}

.home-responsive-page .release-copy{
  padding: clamp(1.6rem, 4vw, 3rem) !important;
}

.home-responsive-page .release-copy h3{
  margin: .8rem 0 .65rem !important;
  font-size: var(--home-section-title) !important;
}

.home-responsive-page .release-copy > p:not(.eyebrow){
  font-size: var(--home-label) !important;
}

.home-responsive-page .release-actions{
  margin-top: clamp(1.2rem, 2.5vw, 2rem) !important;
  gap: clamp(.85rem, 2vw, 1.75rem) !important;
  flex-wrap: wrap;
}

/* STUDIO --------------------------------------------------- */
.home-responsive-page .studio-full.section{
  width: min(calc(100% - 2 * var(--home-gutter)), var(--home-content-max));
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto;
  padding: var(--home-section-y) 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .76fr) !important;
  gap: var(--home-gap-lg) !important;
}

.home-responsive-page .studio-full h3{
  margin: .8rem 0 1rem !important;
  font-size: var(--home-section-title) !important;
}

.home-responsive-page .studio-full > div:first-child > p:not(.eyebrow){
  max-width: 42rem;
  font-size: var(--home-body) !important;
  line-height: 1.6;
}

.home-responsive-page .service-grid{
  margin: clamp(1.25rem, 2.7vw, 2.3rem) 0 !important;
  gap: 0;
}

.home-responsive-page .service-grid span{
  padding: clamp(.58rem, 1vw, .82rem) 0 !important;
  font-size: var(--home-label) !important;
}

.home-responsive-page .studio-visual{
  min-height: clamp(17rem, 32vw, 28rem) !important;
  gap: clamp(.7rem, 1.4vw, 1.15rem) !important;
}

.home-responsive-page .studio-visual strong{
  font-size: clamp(4.8rem, 9vw, 8.6rem) !important;
}

.home-responsive-page .studio-visual span{
  padding-inline: 1rem;
  text-align: center;
  font-size: var(--home-label) !important;
}

/* EVENTS --------------------------------------------------- */
.home-responsive-page .events.section{
  width: min(calc(100% - 2 * var(--home-gutter)), var(--home-content-max));
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto;
  padding: var(--home-section-y) 0 !important;
}

.home-responsive-page .events .section-head{
  margin-bottom: clamp(.75rem, 1.5vw, 1.25rem) !important;
}

.home-responsive-page .events .section-head h3{
  margin: .7rem 0 0 !important;
  font-size: var(--home-section-title) !important;
}

.home-responsive-page .event-list article{
  grid-template-columns: clamp(5.2rem, 9vw, 8rem) minmax(0, 1fr) auto !important;
  gap: clamp(.9rem, 2.3vw, 2.1rem) !important;
  padding: clamp(.85rem, 1.7vw, 1.35rem) 0 !important;
}

.home-responsive-page .event-list article > b{
  font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important;
}

.home-responsive-page .event-list p{
  margin-bottom: .35rem !important;
  font-size: clamp(1.05rem, 2vw, 1.8rem) !important;
}

.home-responsive-page .event-list span,
.home-responsive-page .event-list a{
  font-size: var(--home-label) !important;
}

/* FINAL CTA + FOOTER -------------------------------------- */
.home-responsive-page .community-final{
  min-height: clamp(20rem, 45svh, 31rem) !important;
  height: auto !important;
  padding: var(--home-section-y) var(--home-gutter) !important;
}

.home-responsive-page .community-final h3{
  margin: 0 0 clamp(1.35rem, 2.5vw, 2.5rem) !important;
  font-size: clamp(2.8rem, 6vw, 6.75rem) !important;
}

.home-responsive-page .home > footer{
  padding: clamp(1.5rem, 2.8vw, 2.5rem) var(--home-gutter) !important;
}

/* BREAKPOINT SYSTEM --------------------------------------- */

/* Notebook / compact desktop */
@media (max-width: 74.99rem){ /* < 1200px */
  :root{
    --home-gutter: clamp(1.35rem, 3.5vw, 2.75rem);
    --home-section-y: clamp(2.15rem, 4vw, 3.5rem);
  }

  .home-responsive-page .editorial-hero{
    grid-template-columns: minmax(0, 1.06fr) minmax(16rem, .94fr) !important;
  }

  .home-responsive-page .editorial-hero-categories{
    display: none !important;
  }

  .home-responsive-page .editorial-about-top{
    grid-template-columns: minmax(0, 1.1fr) minmax(13rem, .65fr) !important;
  }
}

/* Tablet */
@media (max-width: 61.99rem){ /* < 992px */
  .home-responsive-page .editorial-nav .nav-links{
    display: none !important;
  }

  .home-responsive-page .editorial-hero{
    min-height: 0 !important;
    grid-template-columns: 1fr minmax(14rem, .72fr) !important;
    padding-top: clamp(2rem, 5vw, 3rem) !important;
  }

  .home-responsive-page .editorial-about-top,
  .home-responsive-page .release.section,
  .home-responsive-page .studio-full.section{
    grid-template-columns: 1fr !important;
  }

  .home-responsive-page .editorial-about-symbol{
    min-height: 11rem !important;
  }

  .home-responsive-page .editorial-about-symbol img{
    max-width: 22rem;
  }

  .home-responsive-page .editorial-pillars{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-responsive-page .editorial-pillars article:nth-child(2n){
    border-right: 0;
  }

  .home-responsive-page .editorial-pillars article:nth-child(-n+2){
    border-bottom: 1px solid var(--home-line);
  }

  .home-responsive-page .editorial-player-grid{
    width: min(100%, 42rem);
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-responsive-page .release-visual,
  .home-responsive-page .release-copy,
  .home-responsive-page .studio-visual{
    min-height: clamp(17rem, 48vw, 23rem) !important;
  }
}

/* Mobile */
@media (max-width: 47.99rem){ /* < 768px */
  :root{
    --home-gutter: clamp(1rem, 5vw, 1.45rem);
    --home-section-y: clamp(2rem, 8vw, 3rem);
  }

  .home-responsive-page .editorial-nav .join-button{
    padding-inline: .65rem !important;
  }

  .home-responsive-page .editorial-nav .join-button span,
  .home-responsive-page .editorial-nav .brand span{
    display: none !important;
  }

  .home-responsive-page .editorial-hero{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .home-responsive-page .editorial-hero-art{
    min-height: 18rem !important;
  }

  .home-responsive-page .editorial-hero-art img{
    max-height: 20rem !important;
  }

  .home-responsive-page .editorial-about-top{
    gap: 1rem !important;
  }

  .home-responsive-page .editorial-players-heading,
  .home-responsive-page .editorial-join-banner{
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .home-responsive-page .players-all-button{
    align-self: flex-end;
  }

  .home-responsive-page .event-list article{
    grid-template-columns: 4.5rem minmax(0, 1fr) !important;
  }

  .home-responsive-page .event-list article > a{
    grid-column: 2;
  }

  .home-responsive-page .home > footer{
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* Narrow mobile */
@media (max-width: 34.99rem){ /* < 560px */
  .home-responsive-page .editorial-pillars,
  .home-responsive-page .editorial-player-grid,
  .home-responsive-page .service-grid{
    grid-template-columns: 1fr !important;
  }

  .home-responsive-page .editorial-pillars article{
    border-right: 0 !important;
    border-bottom: 1px solid var(--home-line) !important;
  }

  .home-responsive-page .editorial-pillars article:last-child{
    border-bottom: 0 !important;
  }

  .home-responsive-page .editorial-player-grid{
    width: min(100%, 24rem);
  }

  .home-responsive-page .editorial-player-card img{
    aspect-ratio: 1.55 / 1 !important;
  }
}

/* Ultrawide: keep readable line lengths and centered content. */
@media (min-width: 100rem){ /* >= 1600px */
  .home-responsive-page .editorial-hero{
    grid-template-columns: minmax(0, 1.1fr) minmax(22rem, .78fr) 8rem !important;
  }
}