mobile h2 + sky wheel landscape fit: per-letter flex spread (justify-content: space-between via base.html JS letter-splitter) replaces text-justify: inter-character — iOS Safari + Firefox silently fall back to inter-word for Latin text, leaving letters clustered at the slot start; flex layout works everywhere; viewport-fluid font clamp(1.3rem, 5vw, 2rem) portrait + clamp(1.2rem, 4.4vh, 2.75rem) landscape so glyphs scale w. viewport instead of a fixed-rem ceiling that overflowed the 45/55 slot at the rem-clamp floor; portrait <500px gets padding-inline 0.4em→0.6em on the word-spans so H-B don't run together at the cramped font-size; .sky-page post-save scroll-snap sections pinned to height: 100% (was: min-height: 100%) + .sky-svg max-height: 100% so the wheel fits exactly one aperture on landscape mobile (was: 480px max blew past ~350px aperture, leaving an intermediate scroll position)

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/templates/core/base.html

@@ -74,6 +74,32 @@
         {% block scripts %}
         {% endblock scripts %}
         <script>
+        // h2 letter splitter — wrap each character of every .row .col-lg-6 h2
+        // word-span in its own <span> so .scss can use justify-content:
+        // space-between to fill the 45/55 slot. text-justify: inter-character
+        // would do this in pure CSS but iOS Safari + Firefox silently fall
+        // back to inter-word for Latin text, leaving letters clustered at the
+        // slot's start.
+        (function () {
+            var spans = document.querySelectorAll('.row .col-lg-6 h2 > span');
+            for (var i = 0; i < spans.length; i++) {
+                var span = spans[i];
+                if (span.dataset.lettersSplit === '1') continue;
+                var text = (span.textContent || '').trim();
+                if (!text) continue;
+                span.dataset.lettersSplit = '1';
+                span.setAttribute('aria-label', text);
+                span.textContent = '';
+                for (var j = 0; j < text.length; j++) {
+                    var letter = document.createElement('span');
+                    letter.setAttribute('aria-hidden', 'true');
+                    letter.textContent = text[j];
+                    span.appendChild(letter);
+                }
+            }
+        }());
+        </script>
+        <script>
         (function () {
             var portal = null;
             var _cb = null;