feat: align experience typography and spacing

src/components/ExperienceSection.module.css

@@ -45,9 +45,9 @@
 .verticalLine {
   position: absolute;
   top: 20px;
-  bottom: 0;
+  bottom: 14px;
   width: 2px;
-  background-color: var(--border-default);
+  background-color: var(--border-strong);
   z-index: 1;
 }
 
@@ -55,27 +55,27 @@
   display: flex;
   flex-grow: 1;
   padding-left: 20px;
-  padding-bottom: 56px;
-  gap: 48px;
+  padding-bottom: 36px;
+  gap: 36px;
 }
 
 .identityCol {
-  width: 380px;
+  width: 360px;
   flex-shrink: 0;
 }
 
 .metaRow {
   display: flex;
   align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
+  gap: 8px;
+  margin-bottom: 14px;
 }
 
 .dateBadge {
   font-size: var(--font-size-label-small);
   line-height: var(--line-height-label-small);
   font-weight: 700;
-  letter-spacing: var(--letter-spacing-eyebrow);
+  letter-spacing: 0.08em;
   color: var(--text-muted);
   text-transform: uppercase;
 }
@@ -90,6 +90,7 @@
 
 .locationIcon {
   color: var(--text-muted);
+  flex-shrink: 0;
 }
 
 .locationText {
@@ -99,7 +100,7 @@
 .roleIdentityRow {
   display: flex;
   align-items: flex-start;
-  gap: 16px;
+  gap: 10px;
 }
 
 .logoContainer {
@@ -107,8 +108,8 @@
   height: 72px;
   border-radius: var(--radius-md);
   overflow: hidden;
-  background-color: var(--bg-surface);
-  border: 1px solid var(--border-default);
+  background: transparent;
+  border: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -132,7 +133,7 @@
   line-height: var(--line-height-h3);
   font-weight: 700;
   color: var(--text-primary);
-  margin-bottom: 4px;
+  margin-bottom: 0;
 }
 
 .companyName {
@@ -149,10 +150,10 @@
 }
 
 .summary {
-  font-size: var(--font-size-body-default);
-  line-height: var(--line-height-body-default);
+  font-size: var(--font-size-body-small);
+  line-height: var(--line-height-body-small);
   color: var(--text-secondary);
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .bulletList {

src/components/ExperienceSection.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import Image from 'next/image';
-import { MapPin } from 'lucide-react';
 import { experiences } from '@/data/experience';
 import styles from './ExperienceSection.module.css';
 
@@ -42,7 +41,20 @@ export const ExperienceSection: React.FC = () => {
                   <div className={styles.metaRow}>
                     <span className={styles.dateBadge}>{item.date}</span>
                     <div className={styles.locationWrapper}>
-                      <MapPin size={14} className={styles.locationIcon} />
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                        className={styles.locationIcon}
+                      >
+                        <path
+                          fill="currentColor"
+                          fillRule="evenodd"
+                          d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
                       <span className={styles.locationText}>{item.location}</span>
                     </div>
                   </div>