asdf

src/pages/_InsightsIndex.astro

@@ -22,13 +22,13 @@ const filters = [
 <Base lang={lang} title={ui.meta.insights.title} description={ui.meta.insights.description}>
   <section class="section section--intro">
     <div class="container grid">
-      <h1 class="display index__title">{ui.insights.title}</h1>
-      <p class="index__lead">{ui.insights.intro}</p>
+      <h1 class="display index__title load-rise" style="--i: 0">{ui.insights.title}</h1>
+      <p class="index__lead load-rise" style="--i: 1">{ui.insights.intro}</p>
     </div>
   </section>
 
   <section class="section--list" aria-label={ui.insights.title}>
-    <div class="container">
+    <div class="container load-rise" style="--i: 2">
       {filters.length > 2 && (
         <fieldset class="choice-group filters" data-filters>
           <legend class="choice-group__legend">{f.label}</legend>

src/pages/_Team.astro

@@ -14,9 +14,9 @@ const ui = t(lang);
   <section class="section section--intro team-intro">
     <div class="container grid">
       <h1 class="display team-intro__title">
-        {ui.team.title.map((line) => <span class="line">{line}</span>)}
+        {ui.team.title.map((line, i) => <span class="line load-rise" style={`--i: ${i}`}>{line}</span>)}
       </h1>
-      <p class="team-intro__lead">{ui.team.intro}</p>
+      <p class="team-intro__lead load-rise" style={`--i: ${ui.team.title.length}`}>{ui.team.intro}</p>
     </div>
   </section>
 
@@ -66,6 +66,19 @@ const ui = t(lang);
 
 <style>
   .line { display: block; }
+
+  /* Load: the headline rises line by line and the lead follows (.load-rise, base.css);
+     the photo settles from a slight scale. Then stillness. */
+  .team-photo { overflow: hidden; }
+  .team-photo__img, :global(.team-photo__img) { animation: team-settle var(--dur-hero) var(--ease) both; }
+
+  @keyframes team-settle {
+    from { transform: scale(1.045); }
+    to   { transform: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .team-photo__img, :global(.team-photo__img) { animation: none; transform: none; }
+  }
   .team-intro__title { grid-column: 1 / -1; }
   .team-intro__lead { grid-column: 1 / -1; max-width: var(--measure); color: var(--ink-muted); }
   @media (min-width: 48rem) {