bingo: put the topic in the h1

The h1 was just the brand ("Datacenter Bingo"), so the page's main
heading carried none of the terms people search for. Add a per-locale
tagline inside the h1 and shorten the lead paragraph so it no longer
repeats it.

Assisted-by: Claude:opus-5

lib/bingo.rb

@@ -28,7 +28,8 @@ module Bingo
       seo_desc: '%{hit} из %{total} крупнейших дата-центров России уже зачёркнуты. Бинго-карточка ЦОДов IXcellerate, Яндекса, Ростелекома, Росатома и других: атаки БПЛА, пожары и отключения с источниками.',
       og_locale: 'ru_RU',
       title: 'Бинго ЦОДов', accent: 'ЦОДов', lead: 'Бинго',
-      desc: 'Топ-25 дата-центров России по мощности. Клетка зачёркивается после публично подтверждённого инцидента.',
+      tagline: 'Атаки БПЛА, пожары и аварии в 25 крупнейших дата-центрах России',
+      desc: 'Рейтинг по мощности. Клетка зачёркивается после публично подтверждённого инцидента.',
       crossed: 'Зачёркнуто', lines: 'линий', updated: 'обновлено',
       log: 'Журнал инцидентов', empty: 'Пока всё работает. Пока.',
       bingo: 'БИНГО!', bingo_n: 'БИНГО ×%d!', full: 'ПОЛНАЯ КАРТА. Интернета больше нет.',
@@ -46,7 +47,8 @@ module Bingo
       seo_desc: '%{hit} of Russia\'s %{total} largest datacenters are already crossed out. A bingo card of IXcellerate, Yandex, Rostelecom, Rosatom and other datacenters: drone strikes, fires and outages, each with a source.',
       og_locale: 'en_US',
       title: 'Datacenter Bingo', accent: 'Bingo', lead: 'Datacenter',
-      desc: "Russia's 25 largest datacenters by power. A cell is crossed out after a publicly reported incident.",
+      tagline: "Drone strikes, fires and outages at Russia's 25 largest datacenters",
+      desc: "Ranked by power. A cell is crossed out after a publicly reported incident.",
       crossed: 'Crossed out', lines: 'lines', updated: 'updated',
       log: 'Incident log', empty: 'Everything is up. For now.',
       bingo: 'BINGO!', bingo_n: 'BINGO ×%d!', full: 'FULL CARD. There is no more internet.',
@@ -64,7 +66,8 @@ module Bingo
       seo_desc: '%{hit} з %{total} найбільших дата-центрів Росії вже закреслено. Бінго-картка ЦОДів IXcellerate, Яндекса, Ростелекому, Росатому та інших: атаки БПЛА, пожежі й відключення з джерелами.',
       og_locale: 'uk_UA',
       title: 'Бінго ЦОДів', accent: 'ЦОДів', lead: 'Бінго',
-      desc: 'Топ-25 дата-центрів Росії за потужністю. Клітинка закреслюється після публічно підтвердженого інциденту.',
+      tagline: 'Атаки БПЛА, пожежі та аварії у 25 найбільших дата-центрах Росії',
+      desc: 'Рейтинг за потужністю. Клітинка закреслюється після публічно підтвердженого інциденту.',
       crossed: 'Закреслено', lines: 'ліній', updated: 'оновлено',
       log: 'Журнал інцидентів', empty: 'Поки що все працює. Поки що.',
       bingo: 'БІНГО!', bingo_n: 'БІНГО ×%d!', full: 'ПОВНА КАРТКА. Інтернету більше немає.',

test/bingo_test.rb

@@ -194,6 +194,7 @@ class BingoTest < Minitest::Test
     get '/en'
     body = last_response.body
     assert_includes body, '<title>Datacenter Bingo — strikes'
+    assert_match %r{<h1>Datacenter <span>Bingo</span> <small>Drone strikes, fires and outages at Russia&#39;s 25 largest datacenters</small></h1>}, body
     assert_includes body, '1 of Russia&#39;s 25 largest'
     assert_includes body, '<meta property="og:image" content="https://example.org/p/dc-4-0123abcd-1200.webp">'
     assert_includes body, 'src="/p/dc-4-0123abcd-480.webp"'

views/bingo/index.erb

@@ -1,7 +1,7 @@
 <% b = @board %>
 <main>
   <header>
-    <h1><%= t(:lead) %> <span><%= t(:accent) %></span></h1>
+    <h1><%= t(:lead) %> <span><%= t(:accent) %></span> <small><%= t(:tagline) %></small></h1>
     <div class="switches">
       <nav class="toggle" aria-label="<%= t(:view_label) %>">
         <% Bingo::VIEWS.each do |v| %>

views/bingo/layout.erb

@@ -58,6 +58,7 @@
   header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
   h1 { margin: 0; font-size: clamp(28px, 6vw, 44px); letter-spacing: -.02em; }
   h1 span { color: var(--hit); }
+  h1 small { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
   .switches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
   .toggle { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
   .toggle a { padding: 2px 10px; font-size: 13px; text-decoration: none; }