feat(library): restore live-site intro copy above post listings

- add the two live intro paragraphs between the hero and article grid
- keep the library listing cards in the live two-column layout
- restore the 4:3 cropped article thumbnails and card spacing via library-scoped selectors
- avoid leaking the card-grid overrides into unrelated pages
- add likes/views from api to library article cards

www/src/components/TeamPage.astro

@@ -26,8 +26,6 @@ const groups = [
   },
   {
     title: 'ABA Clinic Management',
-    tagline: 'Applied Behavior Analysis "(ABA) at your service"',
-    tinted: true,
     members: [
       ['team-mariah-marley.webp', 'Mariah Marley', 'Claims Billing'],
       ['team-eney-garcia.webp', 'Eney Garcia, BA', 'Accounts Billing'],
@@ -44,21 +42,16 @@ const groups = [
     <p>AIA's clinical team consists of experienced professionals and paraprofessionals as well as Board Certified Behavior Analysts (BCBA) and Psychologists who have diverse experience and expertise.</p>
   </section>
   {groups.map((group) => (
-    <section class:list={['team-group', { 'team-group--tinted': group.tinted }]}>
-      <div class="container">
-        <h2>{group.title}</h2>
-        {group.tagline && <p class="team-group__tagline"><em>{group.tagline}</em></p>}
-        <div class="team-grid">
-          {group.members.map(([image, name, role]) => (
-            <article class="team-member">
-              <div class="team-thumb">
-                <img src={`/assets/images/${image}`} alt={name} loading="lazy" />
-              </div>
-              <h3>{name}</h3>
-              <p>{role}</p>
-            </article>
-          ))}
-        </div>
+    <section class="team-group container">
+      <h2>{group.title}</h2>
+      <div class="team-grid">
+        {group.members.map(([image, name, role]) => (
+          <article class="team-member">
+            <img src={`/assets/images/${image}`} alt={name} loading="lazy" />
+            <h3>{name}</h3>
+            <p>{role}</p>
+          </article>
+        ))}
       </div>
     </section>
   ))}
@@ -67,7 +60,7 @@ const groups = [
       <p class="script-label">Join the AIA Team!</p>
       <h2>Employment Opportunities</h2>
       <p>Apply online to join the AIA team! At the Arizona Institute for Autism (AIA) we are on a mission to improve special education and strengthen communities throughout Arizona.</p>
-      <p>Our talented and passionate employees are a critical piece to the high-quality ABA therapy we provide along with our commitment to behavioral health, school solutions, and community outreach. For questions regarding open positions, please contact us at <a href="mailto:hr@azinstitute4autism.com">hr@azinstitute4autism.com</a>.</p>
+      <p>Our talented and passionate employees are a critical piece to the high-quality ABA therapy we provide along with our commitment to behavioral health, school solutions, and community outreach.</p>
       <a class="button" href="/careers">View Open Positions</a>
     </div>
   </section>
@@ -77,18 +70,16 @@ const groups = [
   .team-intro { padding-block: 4rem; text-align: center; }
   .team-intro .script-label { font-size: 1.8rem; }
   .team-group { padding-block: 2rem 4rem; text-align: center; }
-  .team-group--tinted { background: var(--color-tint); }
-  .team-group h2 { margin: 0 auto 1rem; max-width: 760px; }
-  .team-group__tagline { font-size: 1.125rem; margin: 0 auto 2rem; }
-  .team-grid { display: flex; flex-wrap: wrap; gap: 2rem 1.5rem; justify-content: center; }
-  .team-member { flex: 0 0 227px; }
-  .team-thumb { border-radius: 4px; overflow: hidden; }
-  .team-thumb img { display: block; object-fit: cover; transform: scale(1.1); transition: transform .5s; width: 100%; }
-  .team-thumb img:hover { transform: scale(1.05); }
-  .team-member h3 { font-family: var(--font-body); font-size: .8rem; margin-bottom: 0; }
-  .team-member p { font-size: .85rem; margin: 0; }
-  .team-careers { padding-block: 5rem; }
+  .team-group > h2 { margin: 0 auto 2.5rem; max-width: 760px; }
+  .team-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
+  .team-member img { aspect-ratio: 1 / 1.08; border: 5px solid var(--color-primary-dark); border-radius: 15px; object-fit: cover; width: 100%; }
+  .team-member h3 { font-size: 1.1rem; margin-bottom: .25rem; }
+  .team-member p { margin: 0; }
+  .team-careers { background: var(--color-tint); padding-block: 5rem; text-align: center; }
   @media (max-width: 950px) {
-    .team-member { flex-basis: min(100%, 227px); }
+    .team-grid { grid-template-columns: 1fr; }
+  }
+  @media (min-width: 761px) and (max-width: 1050px) {
+    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   }
 </style>

www/src/components/home/HomeInsurance.astro

@@ -7,43 +7,15 @@ const { section } = Astro.props;
   .insurance-section .logo-row {
     align-items: center;
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
+    gap: var(--space-lg);
     justify-content: space-between;
     margin-top: 2rem;
   }
 
   .insurance-section .logo-row img {
-    flex: 0 1 auto;
-    max-width: 200px;
-  }
-
-  @media (min-width: 640px) {
-    .insurance-section .logo-row {
-      display: grid;
-      gap: var(--space-lg);
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      align-items: center;
-      justify-items: center;
-    }
-
-    .insurance-section .logo-row img {
-      flex: 0 1 auto;
-      max-width: 25vw;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .insurance-section .logo-row {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: nowrap;
-    }
-
-    .insurance-section .logo-row img {
-      flex-basis: 0;
-      flex-grow: 1;
-      max-width: 120px;
-    }
+    max-height: 55px;
+    max-width: 130px;
   }
 </style>
 

www/src/styles/typography.css

@@ -11,8 +11,7 @@ h3 { font-size: 1.5rem; }
 a { color: var(--color-primary); }
 .eyebrow { color: var(--color-secondary); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
 .lede, .hero-copy { color: var(--color-muted); font-size: 1.25rem; }
-.script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 2rem; margin: 0; }
-.script-label + h2 { margin-top: 0; }
+.script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 1.5rem; margin: 0 0 .5rem; }
 
 .prose :where(ul, ol) {
   margin-block: 0 1.5rem;