fix: preserve journey geometry and mailto placement

src/components/ToolkitGrid.vue

@@ -13,7 +13,7 @@ defineProps<{ groups: readonly ToolkitGroup[] }>();
       <ul class="toolkit-items">
         <li v-for="technology in group.technologies" :key="technology.name" class="toolkit-item" data-testid="toolkit-technology">
           <BrandIcon v-if="brandIconAvailable(technology.name)" :label="technology.name" />
-          <span>{{ technology.name }}</span>
+          <span :class="{ 'toolkit-item__label--text-only': !brandIconAvailable(technology.name) }">{{ technology.name }}</span>
         </li>
       </ul>
     </section>

src/styles/components.css

@@ -21,12 +21,14 @@
   max-inline-size: 40ch;
   color: var(--text-muted);
   font-size: var(--step-0);
+  line-height: 1.35;
 }
 
 .hero-journey__availability {
   max-inline-size: 52ch;
   color: var(--text-muted);
   font-size: var(--step--1);
+  line-height: 1.35;
 }
 
 .hero-journey__actions {
@@ -36,6 +38,10 @@
   align-items: center;
 }
 
+.hero-journey__actions .hero-journey__action {
+  margin-block-start: 0;
+}
+
 .hero-journey__action,
 .project-link,
 .contact-link,
@@ -584,6 +590,10 @@
   font-size: var(--step--1);
 }
 
+.toolkit-item__label--text-only {
+  grid-column: 1 / -1;
+}
+
 .brand-icon {
   inline-size: 1.05rem;
   block-size: 1.05rem;

src/styles/layout.css

@@ -79,17 +79,14 @@
   display: grid;
   min-block-size: calc(100svh - var(--site-navigation-block-size));
   align-items: start;
-  padding: clamp(2rem, 8vh, 6rem) 4vw 16vh;
+  padding: clamp(3.5rem, 12vh, 8rem) 4vw 16vh;
   scroll-margin-block-start: var(--site-navigation-block-size);
 }
 
 .hero-journey__content {
-  position: relative;
-  z-index: 1;
   display: grid;
-  min-inline-size: 0;
-  inline-size: min(38rem, 50vw);
-  gap: 1rem;
+  inline-size: min(34rem, 39vw);
+  gap: 0.75rem;
   padding: clamp(1.4rem, 2.2vw, 2.1rem);
   border: 1px solid var(--line);
   border-inline-start: 3px solid var(--cyan);