fix: enforce explicit logo height + tighten shell dimensions

Two follow-ups to #433 against the persistent CLS 0.975 issue.

## 1. Logo: max-h-24 → h-24 (explicit height)

Lighthouse continued to attribute the layout shift to the header logo
even after #431 added width="218" height="96" attributes. Root cause:
Tailwind's preflight resets all images to `height: auto`, which
overrides the HTML height attribute. `max-h-24` only caps the height,
it doesn't enforce one — so before the image loads, the rendered
height is `auto` (= 0). When the PNG actually loads, the header grows
by 96px and pushes everything below.

`h-24` (height: 6rem) explicitly sets the height in CSS, overriding
preflight's `auto`. Combined with `w-[218px]` (and the matching
mobile sizes), the browser reserves the exact box from first paint.

## 2. Shell-header / shell-footer dimensions match the rendered ones

The static skeleton in #433 used min-height: 10.5rem for the header
placeholder, but the real <header> renders at ~8.75rem (140px:
py-3 + h-24 logo + slogan + border). When hydrateShell() replaced
the placeholder, the header shrank by ~28px and #page-content moved
up by the same amount — a small but real shift on top of every other
load contribution.

Tighten the placeholders to match: header 8.75rem, footer 6rem (already
correct), and update #page-content min-height accordingly.

These are smaller contributions than the cards-loading shift, but they
clean up the easily-fixable signal first so the next Lighthouse run
isolates the remaining CLS to the actual hard problem.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: raifdmueller

website/index.html

@@ -76,9 +76,9 @@
     -->
     <div id="app">
       <div id="shell-root" class="flex flex-col" style="min-height: 100vh;">
-        <div id="shell-header" class="border-b border-[var(--color-border)]" style="min-height: 10.5rem;" aria-hidden="true"></div>
-        <div id="page-content" class="flex-1" style="min-height: calc(100vh - 16.5rem);"></div>
-        <div id="shell-footer" class="border-t border-[var(--color-border)]" style="min-height: 6rem;" aria-hidden="true"></div>
+        <div id="shell-header" class="border-b border-[var(--color-border)]" style="height: 8.75rem;" aria-hidden="true"></div>
+        <div id="page-content" class="flex-1" style="min-height: calc(100vh - 14.75rem);"></div>
+        <div id="shell-footer" class="border-t border-[var(--color-border)]" style="height: 6rem;" aria-hidden="true"></div>
       </div>
     </div>
     <script type="module" src="/src/main.js"></script>

website/src/components/header.js

@@ -11,7 +11,7 @@ export function renderHeader() {
           <!-- Logo left, spanning both rows -->
           <div class="flex items-center">
             <a href="#/" class="no-underline flex flex-col items-center">
-              <img src="${import.meta.env.BASE_URL}logo.png" alt="Semantic Anchors" width="218" height="96" class="max-h-24 w-auto" />
+              <img src="${import.meta.env.BASE_URL}logo.png" alt="Semantic Anchors" width="218" height="96" class="h-24 w-[218px]" />
               <span class="text-xs text-[var(--color-text-secondary)] leading-tight" data-i18n="header.slogan">${i18n.t('header.slogan')}</span>
             </a>
             <button
@@ -100,7 +100,7 @@ export function renderHeader() {
         <div class="sm:hidden">
           <div class="flex flex-col items-center">
             <a href="#/" class="no-underline flex flex-col items-center">
-              <img src="${import.meta.env.BASE_URL}logo.png" alt="Semantic Anchors" width="145" height="64" class="max-h-16 w-auto" />
+              <img src="${import.meta.env.BASE_URL}logo.png" alt="Semantic Anchors" width="145" height="64" class="h-16 w-[145px]" />
               <span class="text-xs text-[var(--color-text-secondary)] leading-tight text-center" data-i18n="header.slogan">${i18n.t('header.slogan')}</span>
             </a>
             <div class="flex items-center gap-3 mt-2">