Make chrome cheap to draw and restyle it as dark metal

web/src/style.css

@@ -18,8 +18,8 @@
   --radius-l: 18px;
   --shadow: 0 16px 40px #000a;
   --font: system-ui, -apple-system, "Segoe UI", sans-serif;
-  /* One weight only: a synthetic bold would smear it, so display text stays 400. */
-  --font-display: "Bruno Ace SC", var(--font);
+  /* Heavy and wide, so chrome has broad faces to show its horizon on. */
+  --font-display: "Unbounded Variable", var(--font);
   --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
   --fast: 0.15s;
 }
@@ -35,6 +35,16 @@ html, body {
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
 }
+/* Film grain over everything, from a tile main.ts paints: a printed flyer. Static
+   and without a blend mode, so it costs nothing per frame. */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  pointer-events: none;
+  background: var(--grain, none);
+}
 
 a { color: inherit; }
 
@@ -74,8 +84,8 @@ button {
 }
 body.zen #bar { display: none; }
 
-.logo { position: relative; font: 400 0.95rem var(--font-display); letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; justify-self: start; }
-.logo b { position: relative; color: var(--accent); font-weight: 400; }
+.logo { position: relative; font: 800 0.95rem var(--font-display); display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; justify-self: start; }
+.logo b { position: relative; color: var(--accent); }
 .logo svg { width: 1.3em; height: 1.3em; color: var(--accent); flex: none; }
 .bar-end { justify-self: end; display: flex; align-items: center; gap: 0.4rem; }
 
@@ -188,7 +198,7 @@ body.zen #bar { display: none; }
 .sheet:focus-visible { outline: none; }
 @keyframes drawer { from { transform: translateX(100%); } }
 .sheet-handle { display: none; }
-.sheet h2 { margin: 0; font: 400 1.2rem/1.2 var(--font-display); letter-spacing: 0.03em; }
+.sheet h2 { margin: 0; font: 700 1.15rem/1.2 var(--font-display); }
 .sheet fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.6rem; }
 .sheet legend, .sheet h3 {
   padding: 0;
@@ -461,7 +471,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   background: radial-gradient(closest-side, color-mix(in oklab, var(--card-accent) calc(20% + var(--energy) * 40%), transparent), transparent);
   pointer-events: none;
 }
-.card.liquid .content > :not(.art) { position: relative; z-index: 1; }
+.card.liquid .content > :not(.art, .chrome-layer) { position: relative; z-index: 1; }
 .card.liquid .title { text-shadow: 0 2px 16px #000b; }
 /* The drop shows loading as a ring of its own. */
 .card.liquid .initial, .card.liquid .paused-badge, .card.liquid .spinner { display: none; }
@@ -521,15 +531,17 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
 .title {
   position: relative;
   z-index: 1; /* over the drop's spill */
-  font: 400 clamp(1.25rem, 3.4vw, 1.65rem)/1.2 var(--font-display);
-  letter-spacing: 0.02em;
+  font: 800 clamp(1.1rem, 3vw, 1.5rem)/1.2 var(--font-display);
+  letter-spacing: -0.01em;
   margin: 0;
   overflow-wrap: anywhere;
   text-wrap: balance;
 }
-/* Chrome (chrome.ts): a canvas over the text draws it as metal; the text stays
-   for selection and screen readers, but transparent. The canvas reaches past the
-   text for the glow and the shadow. */
+/* Chrome (chrome.ts): one canvas over the playing card's title and waveform
+   draws them as metal, placed and sized by visual.ts; the text stays for
+   selection and screen readers, but transparent. The logo, which never moves,
+   gets a canvas of its own that reaches past the text for its shadow. */
+.content > .chrome-layer { position: absolute; z-index: 2; pointer-events: none; }
 .chrome-plate {
   position: absolute;
   inset: calc(-1 * var(--pad, 16px));
@@ -539,7 +551,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   opacity: 0;
   transition: opacity 0.35s;
 }
-.chromed { color: transparent !important; }
+.chromed { color: transparent !important; text-shadow: none !important; }
 .chromed > .chrome-plate { opacity: 1; }
 
 .why {
@@ -809,7 +821,7 @@ body.zen #up-next { display: none; }
 }
 .start-play svg { width: 2.6rem; height: 2.6rem; margin-left: 0.3rem; }
 @keyframes beckon { to { box-shadow: 0 0 0 2rem transparent; } }
-.start-track { margin: 0.4rem 0 0; font: 400 1.1rem/1.25 var(--font-display); letter-spacing: 0.02em; text-align: center; padding: 0 1rem; }
+.start-track { margin: 0.4rem 0 0; font: 700 1.05rem/1.25 var(--font-display); text-align: center; padding: 0 1rem; }
 .start-hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
 
 /* Radio sheet: a bottom sheet on phones, a centred box elsewhere. */
@@ -843,7 +855,7 @@ body.zen #up-next { display: none; }
 .icon-btn { width: 2.2rem; height: 2.2rem; padding: 0; display: grid; place-items: center; }
 .icon-btn svg { width: 1rem; height: 1rem; }
 .station-head { display: flex; gap: 1rem; align-items: center; }
-.station-head h2 { margin: 0; font: 400 1.3rem/1.15 var(--font-display); overflow-wrap: anywhere; }
+.station-head h2 { margin: 0; font: 700 1.25rem/1.15 var(--font-display); overflow-wrap: anywhere; }
 .station-kicker { margin: 0 0 0.2rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
 #station-sub { margin: 0.3rem 0 0.4rem; color: var(--muted); font-size: 0.85rem; }
 #station-tags { justify-content: flex-start; }
@@ -956,7 +968,7 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
   flex-direction: column;
   gap: 0.9rem;
 }
-.login-box h1 { margin: 0; font: 400 2.2rem/1.1 var(--font-display); letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.3em; }
+.login-box h1 { margin: 0; font: 800 2.1rem/1.1 var(--font-display); letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.3em; }
 .login-box h1 b { color: var(--accent); }
 /* A wheel up: the plate is pulled back once, then rests. */
 .login-mark { width: 1.2em; height: 1.2em; color: var(--accent); flex: none; animation: wheel-up 1.1s 0.3s cubic-bezier(0.3, 0, 0.2, 1) both; }