From b8ac07996ea5c56eacd3092dce639d8542aa2c15 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Sat, 13 Jun 2026 18:02:07 +0700
Subject: [PATCH] feat(fx-system): Itim Thai side-bearing fix +
 prefers-reduced-motion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 6.1: Itim fix — apply letter-spacing: -0.5px + margin-right: -2px
to all <em> in v7-5 sections. Per user memory, Thai display fonts ship
with wide side bearings causing visual gaps after Latin punctuation.
Scope: 20 selectors covering every .fx-* section + .fx-prose (about body).

Phase 6.2: prefers-reduced-motion — kill animations when user prefers.
Disables .fx-marquee-track, .fx-sparkle, .fx-reveal, .fx-stagger animations.
Also hides .fx-hero::after and .fx-faq-a::after decorations.

Phase 6.3: production build verified (22 pages, 0 errors, 1.96s)

Refs: .hermes/plans/2026-06-13_124000-moreminimore-v7-5-migration.md Task 6.1-6.3
---
 src/styles/fx-system.css | 48 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/styles/fx-system.css b/src/styles/fx-system.css
index f3eb646..0953618 100644
--- a/src/styles/fx-system.css
+++ b/src/styles/fx-system.css
@@ -508,4 +508,52 @@ img{max-width:100%;display:block}
   .fx-nav-dropdown{position:static;box-shadow:none;border:none;background:var(--paper-2);opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;padding:0;transition:max-height 0.25s,padding 0.25s}
   .fx-nav-dropdown-open>.fx-nav-dropdown{max-height:400px;padding:8px 0}
   .fx-nav-cta{margin-top:12px;align-self:flex-start}
+}
+
+/* ============================================
+   ITIM THAI SIDE-BEARING FIX (added 2026-06-13)
+   Per user memory: Thai display fonts (Itim) ship
+   with wide side bearings causing visual gaps
+   after Latin punctuation. Apply tight letter-
+   spacing to all <em> in v7-5 sections.
+   ============================================ */
+.fx-utility-bar em,
+.fx-marquee em,
+.fx-nav em,
+.fx-nav-logo-text em,
+.fx-hero-title em,
+.fx-hero-lede em,
+.fx-case-stat-num em,
+.fx-service-title em,
+.fx-callout-text em,
+.fx-portfolio-name em,
+.fx-process-text em,
+.fx-pricing-tier em,
+.fx-pricing-cta em,
+.fx-faq-q em,
+.fx-faq-a em,
+.fx-contact-title em,
+.fx-contact-desc em,
+.fx-footer-bottom em,
+.fx-prose em,
+.fx-prose :global(em) {
+  letter-spacing: -0.5px;
+  margin-right: -2px;
+  display: inline-block;
+}
+
+/* ============================================
+   PREFERS-REDUCED-MOTION (added 2026-06-13)
+   Per plan Phase 6.2: respect user motion preferences.
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  .fx-marquee-track,
+  .fx-sparkle,
+  .fx-reveal,
+  .fx-stagger {
+    animation: none !important;
+    transition: none !important;
+  }
+  .fx-hero::after,
+  .fx-faq-a::after { display: none !important; }
 }
\ No newline at end of file