fix(theme): self-host arcade fonts, end heading color flash

theme-arcade.css opened with a cross-origin @import to Google Fonts,
which delayed the whole overlay sheet: H1s painted white from
style.css first, then snapped orange when the arcade layer applied.
On slow or mobile connections both states were visible, reading as
inconsistent heading colors across pages.

- Self-host Press Start 2P + VT323 woff2 (OFL) under assets/fonts/,
  replace the @import with local @font-face blocks
- Preload the two latin subsets in the default layout head
- Drop the dead 'color: var(--text)' H1 declarations on the three
  trend pages (clickgrab, edge-exploits, masq-infra) that the
  overlay's !important was silently overriding; arcade orange is
  the confirmed canonical H1 treatment sitewide

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W87Fdr8vD1ZiR8jumj4Ud5

_layouts/default.html

@@ -6,6 +6,8 @@
   <meta name="description" content="{{ page.description | default: site.description | strip_html | normalize_whitespace | truncate: 160 }}" />
   <title>{% if page.title and page.title != site.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
   {% seo %}
+  <link rel="preload" href="{{ '/assets/fonts/pressstart2p-latin.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin />
+  <link rel="preload" href="{{ '/assets/fonts/vt323-latin.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin />
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}" />
   <link rel="stylesheet" href="{{ '/assets/css/theme-arcade.css' | relative_url }}" />
   <link rel="icon" type="image/svg+xml" href="{{ '/assets/img/favicon.svg' | relative_url }}" />

assets/css/theme-arcade.css

@@ -1,11 +1,86 @@
 /* ============================================================
-   Tacklebox-anchored arcade theme — PREVIEW OVERLAY
+   Tacklebox-anchored arcade theme
    Loaded AFTER style.css in _layouts/default.html so it overrides.
-   To revert completely: delete this file and remove its <link>
-   line in _layouts/default.html. (Fonts are pulled from Google
-   Fonts for the preview; self-host before any production use.)
+   To revert completely: delete this file, remove its <link>
+   line in _layouts/default.html, and delete assets/fonts/.
+   Fonts are self-hosted below (OFL-licensed Press Start 2P + VT323,
+   woff2 from Google Fonts v16/v18). A cross-origin @import here
+   used to delay this whole sheet, so headings painted white from
+   style.css first and snapped orange when the overlay landed.
+   Self-hosting keeps the cascade local and kills that flash.
    ============================================================ */
-@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/pressstart2p-cyrillic-ext.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/pressstart2p-cyrillic.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/pressstart2p-greek.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/pressstart2p-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Press Start 2P';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/pressstart2p-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'VT323';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/vt323-vietnamese.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'VT323';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/vt323-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'VT323';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/vt323-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 /* Keep the site's existing ORANGE accent (#f0883e) — it harmonizes with the
    red/orange/yellow severity scale (teal fought them). The retro feel rides on

trends/clickgrab.md

@@ -8,7 +8,7 @@ permalink: /trends/clickgrab/
 <style>
 /* ── Page layout ────────────────────────────────────────────────────────── */
 .cg-page { }
-.cg-page h1 { font-size: 1.6rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
+.cg-page h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; } /* color: theme-arcade.css accent */
 .cg-page h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 2.5rem 0 .75rem; border-bottom: 1px solid transparent; border-image: linear-gradient(to right, var(--accent), var(--border) 35%, transparent) 1; padding-bottom: .4rem; }
 .cg-page h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin: 1.5rem 0 .5rem; }
 .cg-page p, .cg-page li { color: var(--text-muted); font-size: .9rem; line-height: 1.7; }

trends/edge-exploits/index.html

@@ -7,7 +7,7 @@ permalink: /trends/edge-exploits/
 
 <style>
   /* Edge exploits page styles: scoped to avoid conflicts with site theme */
-  .edge-page h1 { font-size: 1.6rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
+  .edge-page h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; } /* color: theme-arcade.css accent */
   .ep-meta { color: var(--text-muted); font-size: .8rem; margin-bottom: 1.75rem; }
   .edge-page h2 {
     font-size: 1.15rem; font-weight: 600;

trends/masq-infra.md

@@ -7,7 +7,7 @@ permalink: /trends/masq-infra/
 
 <style>
 /* ── Page layout (matches ClickGrab / Edge Exploits) ───────────────────── */
-.mi-page h1 { font-size: 1.6rem; font-weight: 700; color: var(--text); margin-bottom: .25rem; }
+.mi-page h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .25rem; } /* color: theme-arcade.css accent */
 .mi-page h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 2.5rem 0 .75rem; border-bottom: 1px solid transparent; border-image: linear-gradient(to right, var(--accent), var(--border) 35%, transparent) 1; padding-bottom: .4rem; }
 .mi-page h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin: 1.5rem 0 .5rem; }
 .mi-page p, .mi-page li { color: var(--text-muted); font-size: .9rem; line-height: 1.7; }