impeccable: Spectral+Jost fonts, eased transitions, text vars, timeline labels, focus glow, narrower sidebar

index.html

@@ -20,9 +20,12 @@
       --moss: #70794e;
       --oxygen: #86a5a4;
       --line: rgba(232, 220, 196, .18);
+      --text-secondary: #d0c6b3;
+      --text-body: #c2b7a4;
+      --text-dim: #b8ae9e;
       --shadow: 0 22px 70px rgba(0,0,0,.42);
-      --serif: Georgia, "Times New Roman", serif;
-      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --serif: Spectral, Georgia, "Times New Roman", serif;
+      --sans: Jost, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
       --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
     }
 
@@ -99,7 +102,7 @@
     h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; color: var(--paper); }
     h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.25; color: var(--paper); }
 
-    .hero-copy p { max-width: 62ch; color: #d0c6b3; font-size: 1.08rem; }
+    .hero-copy p { max-width: 62ch; color: var(--text-secondary); font-size: 1.08rem; }
 
     nav {
       position: sticky;
@@ -115,7 +118,7 @@
       padding: 1rem 0;
       text-decoration: none;
       white-space: nowrap;
-      font: 650 .72rem/1 var(--mono);
+      font: 700 .72rem/1 var(--mono);
       letter-spacing: .14em;
       text-transform: uppercase;
       color: var(--muted);
@@ -134,7 +137,7 @@
 
     .project {
       display: grid;
-      grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
+      grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.6fr);
       gap: clamp(2rem, 5vw, 5rem);
       align-items: start;
       margin: 0 0 7rem;
@@ -150,7 +153,7 @@
     }
     .project-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
     .project-copy { padding-top: 1rem; }
-    .project-copy p { color: #c2b7a4; }
+    .project-copy p { color: var(--text-body); }
 
     .meta {
       display: grid;
@@ -203,7 +206,7 @@
       padding: 1.2rem 0;
       border-top: 1px solid var(--line);
       border-bottom: 1px solid var(--line);
-      color: #b8ae9e;
+      color: var(--text-dim);
       font-family: var(--serif);
       font-size: .95rem;
       font-style: italic;
@@ -222,6 +225,9 @@
       .project-image { position: relative; top: auto; }
     }
   </style>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
   <header class="masthead">