Improve typography system and typographic details

public/cv.json

@@ -16,14 +16,14 @@
     {
       "company": "VITALY",
       "role": "AI/ML Developer",
-      "period": "May 2025 - Present",
+      "period": "May 2025 – Present",
       "summary": "Backend engineer applying AI to real products and internal tooling, combining backend, data, and automation.",
       "highlights": [
         "Developed APIs and services in Python/FastAPI for data processing and system integration.",
         "Built ingestion and processing pipelines (documents, video) including transcription and validations.",
         "Implemented AI capabilities with LLMs: RAG, embeddings, and vector search integrated into production middleware.",
         "Evolution of AI assistants: managing memory/sessions, stability improvements, and post-deployment fine-tuning.",
-        "Automated RAG ingestion via n8n + Python (Sheets -> MongoDB + Pinecone) with hash dedupe; saved ~8-10 hours per setup.",
+        "Automated RAG ingestion via n8n + Python (Sheets -> MongoDB + Pinecone) with hash dedupe; saved ~8–10 hours per setup.",
         "Improved document validation pass rate from 70% to 90% using a GPT+Claude+Gemini ensemble and OCR tuning.",
         "Migrated chat to an agentic architecture (Google ADK) with LiteLLM; ~15% lower latency and ~35% lower infra cost.",
         "Stack: Python, FastAPI, n8n, GCP, MongoDB, BigQuery/Firestore, Pinecone, Docker, GitLab CI/CD, OpenTelemetry."
@@ -32,7 +32,7 @@
     {
       "company": "VITALY",
       "role": "Full-Stack Developer",
-      "period": "Jun 2021 - May 2025",
+      "period": "Jun 2021 – May 2025",
       "summary": "Focused on backend specialization (Java/Spring) while owning cloud/data integrations and frontend support.",
       "highlights": [
         "Strategic Middleware APIs: Designed and developed Spring-based middleware to optimize frontend/external services communication.",
@@ -45,7 +45,7 @@
     {
       "company": "VITALY",
       "role": "Intern Developer",
-      "period": "Apr 2021 - Jun 2021",
+      "period": "Apr 2021 – Jun 2021",
       "summary": "Intensive training and first contact with professional web development environments.",
       "highlights": [
         "Received intensive training in Java Spring, Angular, Docker, and Kubernetes.",

src/components/About.astro

@@ -21,6 +21,7 @@ const { basics } = Astro.props;
 
   .summary {
     margin: 0;
+    max-width: var(--measure);
     color: var(--secondary-text);
     font-size: 1rem;
     line-height: 1.75;

src/components/Certifications.astro

@@ -28,7 +28,7 @@ const { certifications } = Astro.props;
             </h3>
             <p class="cert-meta">
               {cert.issuer}
-              <span class="cert-separator">-</span>
+              <span class="cert-separator">&ndash;</span>
               {cert.date}
             </p>
           </div>
@@ -96,7 +96,7 @@ const { certifications } = Astro.props;
     margin: 0;
     font-size: 0.8rem;
     color: var(--tertiary-text);
-    font-variant-numeric: tabular-nums;
+    font-variant-numeric: lining-nums tabular-nums;
   }
 
   .cert-separator {

src/components/Experience.astro

@@ -19,7 +19,7 @@ const MAX_HIGHLIGHTS = 3;
           <div class="role-info">
             <h3 class="role-title">
               {role.role}
-              <span class="role-separator">-</span>
+              <span class="role-separator">&ndash;</span>
               <span class="role-company">{role.company}</span>
             </h3>
             <p class="role-summary">{role.summary}</p>
@@ -73,7 +73,7 @@ const MAX_HIGHLIGHTS = 3;
     text-transform: uppercase;
     color: var(--tertiary-text);
     padding-top: 0.25rem;
-    font-variant-numeric: tabular-nums;
+    font-variant-numeric: lining-nums tabular-nums;
   }
 
   .role-info {

src/styles/global.css

@@ -32,6 +32,23 @@
 
 	/* Font Family */
 	--font-family-sans: "Geist Variable", system-ui, sans-serif;
+
+	/* Typography — Modular Scale (Major Third, ratio 1.25) */
+	--scale-ratio: 1.25;
+	--text-xs: 0.8rem;
+	--text-sm: 0.875rem;
+	--text-base: 1rem;
+	--text-lg: 1.25rem;
+	--text-xl: 1.563rem;
+	--text-2xl: 1.953rem;
+	--text-3xl: 2.441rem;
+
+	/* Vertical Rhythm */
+	--base-lh: 1.5;
+	--rhythm: calc(1rem * var(--base-lh)); /* 1.5rem = 24px at 16px base */
+
+	/* Measure — ideal line length for prose readability */
+	--measure: 66ch;
 }
 
 html {
@@ -57,7 +74,12 @@ body {
 	color: var(--primary-text);
 	font-family: var(--font-family-sans);
 	margin: 0;
-	line-height: 1.6;
+	line-height: var(--base-lh);
+	font-kerning: auto;
+	font-variant-ligatures: common-ligatures;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
 }
 
 a {
@@ -186,15 +208,17 @@ h1,
 h2,
 h3 {
 	text-wrap: balance;
+	font-variant-numeric: lining-nums;
 }
 
 p {
 	text-wrap: pretty;
+	hanging-punctuation: first allow-end;
 }
 
-/* Tabular numbers for dates and numeric data */
+/* Tabular lining numbers for dates and numeric data */
 .tabular-nums {
-	font-variant-numeric: tabular-nums;
+	font-variant-numeric: lining-nums tabular-nums;
 }
 
 /* Print styles */
@@ -215,6 +239,7 @@ p {
 		/* biome-ignore lint/complexity/noImportant: Print styles require overrides */
 		color: black !important;
 		font-size: 12pt;
+		line-height: 1.4;
 	}
 
 	a {
@@ -232,10 +257,16 @@ p {
 		padding: 0 !important;
 	}
 
+	p {
+		widows: 3;
+		orphans: 3;
+	}
+
 	article,
 	section,
 	h2,
 	h3 {
 		break-inside: avoid;
+		page-break-after: avoid;
 	}
 }