/* One desktop screen: Discord on the left, three community moments on the right. */
.community-section{position:relative;background:var(--bg);color:#f3f5fa;padding-block:var(--section-space);isolation:isolate}
/* Feather the existing studio backdrop into the page. */
.community-section:before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:
  linear-gradient(180deg,var(--bg) 0%,transparent clamp(56px,8vw,140px),transparent calc(100% - clamp(56px,8vw,140px)),var(--bg) 100%),
  linear-gradient(90deg,var(--bg) 0%,transparent clamp(24px,6vw,110px),transparent calc(100% - clamp(24px,6vw,110px)),var(--bg) 100%),
  linear-gradient(90deg,#09121cf5 0%,#09121ce8 65%,#09121cb8),
  url('assets/community-wall-pixel-memories.png') center/cover no-repeat
}
.community-scene{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);grid-template-areas:'copy action' 'feature stories';column-gap:clamp(24px,2.5vw,36px);row-gap:clamp(20px,3svh,32px);align-items:start}
.community-copy{grid-area:copy;min-width:0}
.community-copy>.eyebrow{color:var(--lime);font-size:12px;letter-spacing:.08em;margin:0 0 18px}
.community-copy h2{font-size:clamp(2rem,min(3vw,5.2svh),2.75rem);line-height:1.1;margin:0;max-width:none;text-wrap:balance}
.community-feature,.community-story{min-width:0;margin:0}
.community-feature{grid-area:feature}
.community-media{
 position:relative;display:grid;place-items:center;aspect-ratio:3/2;min-height:180px;overflow:hidden;
 border:1px solid #344450;border-radius:10px;background-color:#11181e;
 background-image:linear-gradient(#8babcb07 1px,transparent 1px),linear-gradient(90deg,#8babcb07 1px,transparent 1px);
 background-size:24px 24px;
}
.community-media-feature{aspect-ratio:16/7;min-height:260px;background-size:32px 32px}
.community-media-feature.has-community-film{aspect-ratio:16/9;min-height:0;background:#080b0b}
.community-film-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.community-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;box-sizing:border-box;padding:0;background:#080b0b}
.community-media-tag{position:absolute;top:24px;left:24px;font-size:12px;line-height:1.5;letter-spacing:.08em;color:var(--lime)}
.community-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 20px;text-align:center;max-width:100%;color:#b7c6d9}
.community-placeholder-icon{display:block;flex:none;color:#93b9e8;margin-bottom:4px}
.community-placeholder>span{font-size:16px;line-height:1.5}
.community-placeholder>small{font-size:12px;line-height:1.5;color:#8192a6}
.community-media-feature .community-placeholder{padding-top:64px;padding-bottom:48px}
.community-media-feature .community-placeholder>span{font-size:18px}
.community-caption{padding-top:20px}
.community-caption h3{font-size:var(--subheading-size,28px);line-height:1.25;letter-spacing:-.025em;margin:0 0 8px;color:#f3f5fa}
.community-feature .community-caption h3{font-size:clamp(24px,2.1vw,30px)}
.community-caption p{font-size:16px;line-height:1.6;color:#b7c6d9;margin:0;max-width:760px}
.community-stories{grid-area:stories;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;align-self:stretch}
.community-story{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);column-gap:16px;align-items:stretch}
.community-story .community-media{aspect-ratio:auto;min-height:112px}
.community-story .community-media>img{object-fit:cover;object-position:center}
.community-story .community-caption{align-self:center;min-width:0;padding:14px 0}
.community-story .community-caption h3{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.2;margin-bottom:6px;text-wrap:pretty}
.community-story .community-caption p{font-size:.875rem;line-height:1.5}
.community-story .community-placeholder{padding:12px 8px;gap:6px}
.community-story .community-placeholder-icon{width:32px;height:32px;margin-bottom:0}
.community-story .community-placeholder>span{font-size:14px}
.community-story .community-placeholder>small{font-size:12px}
.community-action{grid-area:action;display:flex;justify-content:flex-end;align-self:end}
.community-action>.button{min-height:48px;padding:12px 22px;font-size:14px;gap:24px}
@media(min-width:1000px) and (max-height:760px){
 .community-scene{row-gap:20px}
 .community-copy h2{font-size:2rem}
 .community-feature .community-caption{padding-top:14px}
 .community-feature .community-caption h3{font-size:24px;margin-bottom:6px}
 .community-story .community-caption{padding:12px 0}
}
@media(max-width:999px){
 .community-scene{grid-template-columns:minmax(0,1fr);grid-template-areas:'copy' 'feature' 'stories' 'action';gap:24px}
 .community-copy h2{font-size:clamp(2rem,5.5vw,2.75rem)}
 .community-stories{grid-template-rows:none;grid-auto-rows:minmax(0,1fr)}
 .community-story{grid-template-columns:minmax(0,32%) minmax(0,1fr)}
 .community-story .community-caption h3{font-size:22px}
 .community-story .community-caption p{font-size:16px}
 .community-feature .community-caption{padding-top:16px}
 .community-action{justify-content:flex-start}
}
@media(max-width:560px){
 .community-story{column-gap:12px}
 .community-story .community-caption{padding:14px 0}
 .community-story .community-caption h3{font-size:20px}
 .community-story .community-caption p{font-size:14px}
 .community-action>.button{width:100%;justify-content:space-between}
}

/* The Discord montage is decorative, silent and automatically loops in its frame. */
.community-film-video{pointer-events:none}