fix: pause icon drawn in css instead of a glyph, no more gap

letter-spacing on the ❚❚ glyph could tighten the character cells but not the visible gap between them on a monospace font — each character keeps its own cell regardless. now two bars drawn via ::before/::after on .is-playing, with exact pixel control over the gap; the ▶ span just hides instead of getting replaced.

assets/css/custom.css

@@ -479,7 +479,24 @@ footer a:hover,
 /* fixed width + tightened tracking so ▶ and ❚❚ render as the same size
    button instead of the pause glyph's two characters (with the font's
    normal letter-spacing between them) widening it */
-.player__play { display: inline-flex; align-items: center; justify-content: center; width: 2.4ch; letter-spacing: -0.2em; }
+/* pause icon is two CSS bars, not a "❚❚" glyph — a monospace font's own
+   per-character cell width left a gap between the glyphs that no amount of
+   letter-spacing closed without also looking wrong at other sizes */
+.player__play { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.4ch; }
+.player.is-playing .player__playicon { visibility: hidden; }
+.player__play::before,
+.player__play::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 0.8em;
+  background: currentColor;
+  transform: translateY(-50%);
+  opacity: 0;
+}
+.player.is-playing .player__play::before { opacity: 1; left: calc(50% - 3px); }
+.player.is-playing .player__play::after { opacity: 1; left: calc(50% + 1px); }
 .player__scrub { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); position: relative; cursor: pointer; }
 .player__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
 .player__time { white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }

assets/js/player.js

@@ -37,12 +37,16 @@
     }
     function tick() { sync(); raf = requestAnimationFrame(tick); }
 
+    // the pause icon is drawn in CSS (two bars via ::before/::after on
+    // .is-playing), not a "❚❚" glyph — a monospace font's letter-spacing
+    // between two heavy-bar characters left a gap no amount of
+    // letter-spacing closed cleanly. the ▶ span just hides/shows.
     v.addEventListener("play", function () {
-      root.classList.add("is-playing"); if (play) play.textContent = "❚❚";
+      root.classList.add("is-playing");
       if (!raf) raf = requestAnimationFrame(tick);
     });
     v.addEventListener("pause", function () {
-      root.classList.remove("is-playing"); if (play) play.textContent = "▶";
+      root.classList.remove("is-playing");
       if (raf) { cancelAnimationFrame(raf); raf = null; }
       sync();   // one last sync so the bar lands exactly on the paused frame
     });

layouts/portfolio/single.html

@@ -35,7 +35,7 @@
       </video>
       <button class="player__big" type="button" aria-label="play">▶</button>
       <div class="player__bar">
-        <button class="player__play" type="button" aria-label="play/pause">▶</button>
+        <button class="player__play" type="button" aria-label="play/pause"><span class="player__playicon">▶</span></button>
         <div class="player__scrub"><div class="player__fill"></div></div>
         <span class="player__time">00:00 / 00:00</span>
         <button class="player__mute" type="button" aria-label="mute">vol</button>