style(visual-fidelity): pages-public — batches A,D,F,G,H

- about.vue: promote h3 → h2 on circle headings (h1→h2→h2→h2)
- coming-soon.vue: font-weight 700 → 600
- members/[id].vue: inline circle badge → <CircleBadge/>; hero size 42→36
- community-guidelines.vue: padding + font-size off-scale snaps
- board.vue: loading/empty padding 60→64
- series/index.vue, join.vue: padding off-scale snaps

app/pages/about.vue

@@ -38,16 +38,16 @@
         <div class="section-label">The Circles</div>
         <div class="circles-grid">
           <div id="community" class="circle-cell">
-            <h3 style="color: var(--c-community)">Community</h3>
+            <h2 style="color: var(--c-community)">Community</h2>
 
             <p>For anyone exploring cooperative models.</p>
           </div>
           <div id="founder" class="circle-cell">
-            <h3 style="color: var(--c-founder)">Founder</h3>
+            <h2 style="color: var(--c-founder)">Founder</h2>
             <p>For people actively building cooperatives.</p>
           </div>
           <div id="practitioner" class="circle-cell">
-            <h3 style="color: var(--c-practitioner)">Practitioner</h3>
+            <h2 style="color: var(--c-practitioner)">Practitioner</h2>
             <p>For experienced practitioners sharing what they know.</p>
           </div>
         </div>

app/pages/board.vue

@@ -357,13 +357,13 @@ onMounted(async () => {
 
 /* ---- LOADING / EMPTY ---- */
 .loading-state {
-  padding: 60px 24px;
+  padding: 64px 24px;
   text-align: center;
   color: var(--text-faint);
   font-size: 12px;
 }
 .empty-state {
-  padding: 60px 24px;
+  padding: 64px 24px;
   text-align: center;
 }
 .empty-title {

app/pages/coming-soon.vue

@@ -124,7 +124,7 @@ const handleLogout = async () => {
 .coming-soon-title {
   font-family: var(--font-display);
   font-size: 3rem;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--text-bright);
   margin-bottom: 8px;
 }

app/pages/community-guidelines.vue

@@ -309,7 +309,7 @@ useHead({
 }
 .guidelines-section ul li {
   position: relative;
-  padding: 2px 0 2px 18px;
+  padding: 2px 0 2px 16px;
   font-size: 13px;
   color: var(--text-dim);
   line-height: 1.7;
@@ -365,7 +365,7 @@ useHead({
   font-family: "Brygada 1918", serif;
   font-style: italic;
   color: var(--text-bright);
-  font-size: 15px;
+  font-size: 16px;
   margin-top: 12px;
 }
 

app/pages/join.vue

@@ -747,7 +747,7 @@ onUnmounted(() => {
   padding: 0;
 }
 .tier-list li {
-  padding: 5px 0;
+  padding: 4px 0;
   font-size: 12px;
   color: var(--text-dim);
   border-bottom: 1px dashed var(--border);

app/pages/members/[id].vue

@@ -37,9 +37,7 @@
               <span class="profile-pronouns">{{ member.pronouns }}</span>
             </div>
             <div class="profile-meta">
-              <span v-if="member.circle" class="badge" :class="member.circle">
+              <CircleBadge v-if="member.circle" :circle="member.circle" :label="circleLabels[member.circle]" />
-                {{ circleLabels[member.circle] }}
-              </span>
               <template v-if="member.studio">
                 <span class="meta-sep">&middot;</span>
                 <span class="profile-studio">{{ member.studio }}</span>
@@ -372,7 +370,7 @@ useHead({
 }
 .profile-name {
   font-family: "Brygada 1918", serif;
-  font-size: 42px;
+  font-size: 36px;
   font-weight: 600;
   color: var(--text-bright);
   margin: 0;

app/pages/series/index.vue

@@ -185,7 +185,7 @@ const getEventStatus = (event) => {
   display: flex;
   align-items: baseline;
   gap: 12px;
-  padding: 10px 28px;
+  padding: 12px 28px;
   border-bottom: 1px dashed var(--border);
   font-size: 12px;
 }