web: the muted text that was never muted, and the stylesheet fetched every time

Every text-[color:var(--ink)]/50, border-[color:var(--ink)]/10 and
bg-[color:var(--ink)]/5 in the templates compiled to nothing. Tailwind v3
cannot put an opacity on an arbitrary var() colour, so all 538 of them were
dropped from output.css without a word. Meta text rendered at full ink, card
borders fell back to Tailwind's default grey (bright white rings at night),
and the washes, backdrops and hover pills simply weren't there, on the news
site, the casino and the adventure pages alike.

The palette is now written once per phase and casino room as bare rgb
channels (--ink-rgb and friends), the plain vars are built from them, and
tailwind.config.js exposes ink, muted, accent, warn and card as real colours.
The classes are text-ink/80, border-ink/10, bg-accent/20 now, and they compile.

Restoring the intended opacities as-is would have traded flat for illegible:
ink at 50% measures 2.7 to 2.9:1 on the lit phases. So secondary text gets
its own colour, --muted, per phase and per casino room, taken as faint as it
can go while still clearing 4.5:1 on both the card and the page. Everything
that was ink at 35 to 70% is text-muted. The 20-30% ones are separators and
empty-cell dashes and stay faint.

The bg-theme-* chips carry white text everywhere they appear, and eight of
them measured 2.5 to 3.2:1. Same hues, taken just dark enough to pass (4.6 to
4.7:1). eu, lego and adventure already passed and are unchanged, and the
underline and border colours keep the old pastels since they carry no text.

Static files came out of the embedded FS with no Last-Modified, no ETag and
no Cache-Control, so every page view downloaded the stylesheet and every
script in full, and the service worker's "cheap 304" never happened. Each
file is hashed once now. Templates link through {{asset}}, which appends
?v=<hash>; a request naming the current hash is served immutable for a year,
and everything else gets the hash as its ETag and revalidates to a 304. The
service worker serves versioned URLs cache-first, drops older versions of the
same file as new ones land, and moves to cache v6.

internal/web/templates/realm.html

@@ -8,39 +8,39 @@
 <li class="realm-zone{{if .Unbeaten}} realm-zone-unbeaten{{end}}{{if .Busy}} realm-zone-busy{{end}}">
   <div class="flex items-baseline justify-between gap-3">
     <h3 class="font-display font-bold text-base flex-1 min-w-0 truncate">{{.Display}}</h3>
-    {{if .Levels}}<span class="text-[11px] uppercase tracking-wider text-[color:var(--ink)]/40 shrink-0">{{.Levels}}</span>{{end}}
+    {{if .Levels}}<span class="text-[11px] uppercase tracking-wider text-muted shrink-0">{{.Levels}}</span>{{end}}
   </div>
 
   {{if .Atmosphere}}
-  <p class="mt-1 text-xs text-[color:var(--ink)]/55 leading-relaxed">{{.Atmosphere}}</p>
+  <p class="mt-1 text-xs text-muted leading-relaxed">{{.Atmosphere}}</p>
   {{end}}
 
   <div class="mt-2.5 text-xs">
     {{if .Unbeaten}}
     <p class="realm-unbeaten-line">Nobody has ever come back out of it.</p>
     {{else}}
-    <p class="text-[color:var(--ink)]/60">
+    <p class="text-muted">
       {{/* FirstClearBy empty with Clears > 0 is the anonymised case: the zone
            has been beaten, the clearer opted out. It must not read as unbeaten. */}}
       First through:
       {{if .FirstClearToken}}<a href="/adventure/who/{{.FirstClearToken}}" class="font-semibold hover:text-theme-adventure transition">{{.FirstClearBy}}</a>
       {{else if .FirstClearBy}}<span class="font-semibold">{{.FirstClearBy}}</span>
-      {{else}}<span class="italic text-[color:var(--ink)]/45">somebody who'd rather not say</span>{{end}}
-      {{if .FirstWhen}}<span class="text-[color:var(--ink)]/40"> · {{.FirstWhen}}</span>{{end}}
+      {{else}}<span class="italic text-muted">somebody who'd rather not say</span>{{end}}
+      {{if .FirstWhen}}<span class="text-muted"> · {{.FirstWhen}}</span>{{end}}
     </p>
-    <p class="mt-0.5 text-[color:var(--ink)]/45 tabular-nums">
+    <p class="mt-0.5 text-muted tabular-nums">
       {{.Clears}} clear{{if ne .Clears 1}}s{{end}} by {{.Clearers}} adventurer{{if ne .Clearers 1}}s{{end}}
     </p>
     {{end}}
   </div>
 
   {{if .Occupants}}
-  <div class="mt-2.5 pt-2.5 border-t border-[color:var(--ink)]/10">
+  <div class="mt-2.5 pt-2.5 border-t border-ink/10">
     <p class="text-[11px] uppercase tracking-wider text-theme-adventure font-semibold">In there now</p>
     <p class="mt-1 text-xs">
-      {{range $i, $o := .Occupants}}{{if $i}}<span class="text-[color:var(--ink)]/30">, </span>{{end}}<!--
+      {{range $i, $o := .Occupants}}{{if $i}}<span class="text-ink/30">, </span>{{end}}<!--
       -->{{if $o.Token}}<a href="/adventure/who/{{$o.Token}}" class="font-semibold hover:text-theme-adventure transition">{{$o.Name}}</a>{{else}}<span class="font-semibold">{{$o.Name}}</span>{{end}}<!--
-      -->{{if $o.Day}}<span class="text-[color:var(--ink)]/40"> (day {{$o.Day}})</span>{{end}}{{end}}
+      -->{{if $o.Day}}<span class="text-muted"> (day {{$o.Day}})</span>{{end}}{{end}}
     </p>
   </div>
   {{end}}
@@ -80,8 +80,8 @@
   </header>
 
   {{if not .Realm.Known}}
-  <div class="mt-6 rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 p-6 shadow-pete">
-    <p class="text-sm text-[color:var(--ink)]/60">
+  <div class="mt-6 rounded-3xl bg-card border-2 border-ink/10 p-6 shadow-pete">
+    <p class="text-sm text-muted">
       I haven't had the survey through from the field yet. When it lands, the whole
       world lives on this page.
     </p>
@@ -92,11 +92,11 @@
   <section class="mt-8{{if .Postgame}} realm-band-postgame rounded-3xl p-5 sm:p-6{{end}}">
     <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 mb-1">
       <h2 class="font-display text-xl sm:text-2xl font-bold">{{.Label}}</h2>
-      <span class="text-xs text-[color:var(--ink)]/45 tabular-nums shrink-0">
+      <span class="text-xs text-muted tabular-nums shrink-0">
         {{.Cleared}} of {{len .Zones}} beaten
       </span>
     </div>
-    {{if .Blurb}}<p class="text-sm text-[color:var(--ink)]/55 mb-4 max-w-2xl">{{.Blurb}}</p>{{end}}
+    {{if .Blurb}}<p class="text-sm text-muted mb-4 max-w-2xl">{{.Blurb}}</p>{{end}}
     <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {{range .Zones}}{{template "realmzone" .}}{{end}}
     </ul>
@@ -104,8 +104,8 @@
   {{end}}
 
   {{if .Realm.Known}}
-  <p class="mt-8 text-xs text-[color:var(--ink)]/40 text-center">
-    Say <code class="rounded bg-[color:var(--ink)]/8 px-1.5 py-0.5 font-mono">!expedition start</code>
+  <p class="mt-8 text-xs text-muted text-center">
+    Say <code class="rounded bg-ink/[.08] px-1.5 py-0.5 font-mono">!expedition start</code>
     to me in Matrix to pick one and go.
   </p>
   {{end}}