.community-page { background:var(--moss-900); color:var(--cream); }
.community-hero { padding:72px var(--gutter-page) 64px; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:64px; }
.community-eyebrow { font-size:10px; font-weight:500; letter-spacing:.2em; margin:0 0 24px; color:var(--cream-70); }
.community-eyebrow span { display:inline-block; width:6px; height:6px; background:var(--cream); border-radius:50%; margin-right:8px; }
.hero-copy h1 { margin:0; font-size:clamp(44px,5.5vw,78px); font-weight:300; letter-spacing:-.055em; line-height:1.08; }
.hero-copy h1 em { font-weight:400; }
.community-lead { font-size:15px; line-height:1.85; max-width:470px; color:var(--cream-70); margin:26px 0; }
.discover-link { display:inline-flex; gap:32px; align-items:center; font-size:12px; padding:12px 0; border-bottom:1px solid var(--cream-40); }
.discover-link span { font-size:22px; }
.community-photo { margin:0; position:relative; border-radius:120px 12px 12px 12px; overflow:hidden; aspect-ratio:1.12; border:1px solid var(--cream-20); }
.community-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.community-photo figcaption { position:absolute; bottom:0; left:0; right:0; padding:52px 24px 22px; display:flex; justify-content:space-between; gap:14px; background:linear-gradient(transparent,rgba(10,23,17,.85)); font-size:8px; letter-spacing:.13em; }
.community-values { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; border-top:1px solid var(--cream-10); border-bottom:1px solid var(--cream-10); padding:30px var(--gutter-page); }
.value-number { font-size:10px; color:var(--cream-50); }
.community-values h2 { font-size:15px; font-weight:500; margin:12px 0 8px; }
.community-values p { font-size:12px; line-height:1.8; color:var(--cream-60); margin:0; max-width:280px; }
.join-section { padding:64px var(--gutter-page) 46px; scroll-margin-top:100px; }
.join-heading { display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:30px; }
.join-heading .community-eyebrow { margin-bottom:14px; }
.join-heading h2 { font-size:clamp(28px,3vw,42px); font-weight:300; letter-spacing:-.04em; margin:0; }
.join-heading > p { max-width:255px; color:var(--cream-60); font-size:12px; line-height:1.8; margin:0; }
.community-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.join-card { border:1px solid var(--cream-20); background:var(--moss-900-02); padding:26px; border-radius:12px; }
.join-card-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--cream-10); }
.platform-label { font-size:11px; letter-spacing:.2em; font-weight:600; }
.platform-symbol { font-size:22px; color:var(--cream-60); }
.join-card-body { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px 0; }
.group-copy h3 { font-size:25px; font-weight:400; line-height:1.25; letter-spacing:-.035em; margin:0 0 18px; }
.group-copy p { font-size:12px; line-height:1.8; color:var(--cream-70); max-width:240px; margin:0; }
.qr-block { margin:0; flex:0 0 150px; text-align:center; }
.qr-block img { width:150px; height:150px; display:block; background:#fff; border-radius:8px; }
.qr-block figcaption { font-size:7px; letter-spacing:.1em; margin-top:12px; color:var(--cream-60); }
.join-button { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px; background:var(--cream); color:var(--moss-900); border-radius:6px; font-size:12px; font-weight:600; }
.join-button:hover { opacity:.88; }
a:focus-visible, button:focus-visible { outline:2px solid var(--cream); outline-offset:5px; }
.welcome-note { text-align:center; font-size:12px; color:var(--cream-60); margin:30px 0 0; }
.community-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px var(--gutter-page); border-top:1px solid var(--cream-10); font-size:10px; color:var(--cream-60); }
.community-footer .brand-mark { font-size:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1100px) { .join-card-body { flex-direction:column; align-items:flex-start; } .qr-block { align-self:center; } .group-copy p { max-width:none; } .community-hero { gap:32px; } }
@media(max-width:650px) { .community-hero { grid-template-columns:1fr; padding-top:44px; gap:30px; } .community-photo { aspect-ratio:1.5; border-top-left-radius:80px; } .community-values { grid-template-columns:1fr; gap:24px; } .community-values h2 { display:inline; margin-left:12px; } .community-values p { max-width:none; margin-top:8px; } .join-heading { display:block; } .join-heading > p { margin-top:18px; max-width:none; } .community-grid { grid-template-columns:1fr; } .join-card-body { flex-direction:row; } .qr-block { flex-basis:130px; } .qr-block img { width:130px; height:130px; } .group-copy h3 { font-size:22px; } .join-card { padding:20px; } .community-footer { flex-wrap:wrap; } .community-footer > span { display:none; } }
@media(max-width:380px) { .join-card-body { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }