Drop the chrome title, waveform and logo, the grain and the Unbounded font

Back to the plain bold title, the drawn waveform and the system font from
before the metal look. The spiky drop and its glow, the pre-blurred
backgrounds, the --energy fix, ?debug=drop and the desktop layout stay.

web/src/style.css

@@ -18,8 +18,7 @@
   --radius-l: 18px;
   --shadow: 0 16px 40px #000a;
   --font: system-ui, -apple-system, "Segoe UI", sans-serif;
-  /* Heavy and wide, so chrome has broad faces to show its horizon on. */
-  --font-display: "Unbounded Variable", var(--font);
+  --font-display: var(--font);
   --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
   --fast: 0.15s;
 }
@@ -29,14 +28,13 @@
 html, body {
   margin: 0;
   height: 100%;
-  /* Film grain (main.ts paints the tile) under everything; cards lay their own
-     over their background, below their content. */
-  background: var(--grain, none), var(--bg);
+  background: var(--bg);
   color: var(--fg);
   font: 15px/1.4 var(--font);
   overflow: hidden;
   -webkit-tap-highlight-color: transparent;
 }
+
 a { color: inherit; }
 
 button, input {
@@ -75,8 +73,8 @@ button {
 }
 body.zen #bar { display: none; }
 
-.logo { position: relative; font: 800 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); }
+.logo { font-weight: 600; display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; justify-self: start; }
+.logo b { color: var(--accent); font-weight: 700; }
 .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; }
 
@@ -220,7 +218,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: 700 1.15rem/1.2 var(--font-display); }
+.sheet h2 { margin: 0; font: 800 1.25rem/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;
@@ -440,15 +438,6 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   opacity: calc(0.18 + var(--energy) * 0.55);
   will-change: opacity;
 }
-/* Grain over the card's background only: content and actions sit above it. */
-.card::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: var(--grain, none);
-}
-.card > .content, .card > .actions { z-index: 1; }
 
 .content {
   position: relative;
@@ -510,7 +499,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   will-change: transform, opacity;
   pointer-events: none;
 }
-.card.liquid .content > :not(.art, .chrome-layer) { position: relative; z-index: 1; }
+.card.liquid .content > :not(.art) { 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; }
@@ -570,31 +559,12 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
 @keyframes spin { to { transform: rotate(360deg); } }
 
 .title {
-  position: relative;
-  z-index: 1; /* over the drop's spill */
-  font: 700 clamp(1.1rem, 3vw, 1.5rem)/1.2 var(--font-display);
-  letter-spacing: 0.02em;
+  font: 800 clamp(1.3rem, 4.2vw, 1.9rem)/1.1 var(--font-display);
+  letter-spacing: -0.01em;
   margin: 0;
   overflow-wrap: anywhere;
   text-wrap: balance;
 }
-/* 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));
-  width: calc(100% + 2 * var(--pad, 16px));
-  height: calc(100% + 2 * var(--pad, 16px));
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.35s;
-}
-.chromed { color: transparent !important; text-shadow: none !important; }
-.chromed > .chrome-plate { opacity: 1; }
-
 .why {
   margin: 0;
   min-height: 0;
@@ -867,7 +837,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: 700 1.05rem/1.25 var(--font-display); text-align: center; padding: 0 1rem; }
+.start-track { margin: 0.4rem 0 0; font-weight: 700; font-size: 1.1rem; 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. */
@@ -901,7 +871,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: 700 1.25rem/1.15 var(--font-display); overflow-wrap: anywhere; }
+.station-head h2 { margin: 0; font: 800 1.4rem/1.1 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; }
@@ -1014,7 +984,7 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
   flex-direction: column;
   gap: 0.9rem;
 }
-.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 { margin: 0; font-size: 2.4rem; 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; }
@@ -1110,7 +1080,7 @@ body.zen .content { gap: 0.3rem; }
    1.5rem around 2000x1100, at most 1.6rem; the shorter side decides. */
 @media (min-width: 900px) and (pointer: fine) {
   #bar { padding: 1rem 1.6rem; }
-  .logo { font-size: 1.15rem; }
+  .logo { font-size: 1.1rem; }
   #mode-tabs { padding: 0.25rem; }
   #mode-tabs button { font-size: 0.95rem; padding: 0.45em 1.15em; }
   /* The controls as one glass capsule, a match for the tabs. */
@@ -1134,7 +1104,7 @@ body.zen .content { gap: 0.3rem; }
   }
   .content { width: min(calc(30 * var(--u)), 56vw); gap: calc(0.6 * var(--u)); }
   .art { width: min(calc(16 * var(--u)), 46vh); margin-bottom: calc(1.2 * var(--u)); }
-  .title { font-size: calc(1.45 * var(--u)); }
+  .title { font-size: calc(1.75 * var(--u)); }
   .why { font-size: 0.8rem; }
   .byline { gap: 0.6rem; font-size: 1.1rem; }
   .artist-avatar { width: 2rem; height: 2rem; font-size: 0.85rem; }