reading

site/style.css

@@ -35,6 +35,7 @@
   --type-rule-copy: 0.9rem;
   --type-word: clamp(1.25rem, 2vw, 1.65rem);
   --type-detail: 1.4rem;
+  --tracking-ipa: 0.06em;
   --type-heading: clamp(1.8rem, 4vw, 3.2rem);
   --type-display: clamp(2.8rem, 8vw, 6.5rem);
   --workspace-detail-min: 18rem;
@@ -79,6 +80,7 @@ h2 { font-family: var(--serif); font-size: var(--type-heading); font-weight: 400
 .pronunciation-grid div { border-top: var(--border-width) solid var(--forest-light); padding-top: var(--space-2); }
 dt { color: var(--forest-pale); font-size: var(--type-overline); font-weight: 800; letter-spacing: 0.08em; margin-bottom: var(--space-2); text-transform: uppercase; }
 dd { font-family: var(--serif); font-size: var(--type-detail); margin: 0; }
+.detail-ipa { letter-spacing: var(--tracking-ipa); }
 .audio-button { background: var(--sun); border: var(--border-emphasis) solid var(--sun); border-radius: var(--radius-sm); color: var(--ink); font-weight: 800; padding: var(--space-3) var(--space-5); }
 .audio-button:hover, .audio-button:focus-visible { background: transparent; color: var(--sun); outline: var(--border-emphasis) solid var(--sun); outline-offset: var(--space-1); }
 .audio-button:disabled { background: transparent; border-color: var(--forest-light); color: var(--forest-pale); cursor: not-allowed; }