home2 cards round 3: photo-right art, unified side-by-side header, Manrope titles, top strip

- Art photo moved to the RIGHT (text/icon left) so it no longer clusters with the news
  photo in the center.
- Unified header: every card now has icon + title side-by-side; card titles switched from
  serif (too 'document') to Manrope bold. Art icon/title now match Play/Daily Moment sizes.
- Static cards (Play/Daily Moment) gain a darker top color strip (Monopoly-card feel) over
  the tinted body, derived from each tint via color-mix.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/components/RoomCard.svelte

@@ -1,7 +1,7 @@
 <script>
   // A single hub "room" card. Presentational — the page passes live preview data in.
-  // Layout varies by preview type: news = photo on top, art = photo on the left,
-  // static = centered icon+title over a tinted background.
+  // Every card shares a side-by-side icon+title header; layout varies by preview type:
+  // news = photo on top, art = photo on the right, static = tinted with a darker top strip.
   let { room, artImg = null, newsImg = null, newsHeadline = '' } = $props();
 </script>
 
@@ -9,26 +9,23 @@
    style={room.tint ? `--tint:${room.tint}` : ''}>
   {#if room.preview === 'news'}
     {#if newsImg}<div class="photo photo--top" style="background-image:url({newsImg})"></div>{/if}
-    <div class="body">
-      <div class="eyebrow"><span class="ic">{room.icon}</span>{room.title}</div>
+    <div class="content">
+      <div class="head"><span class="ic">{room.icon}</span><span class="title">{room.title}</span></div>
       {#if newsHeadline}<p class="headline">“{newsHeadline}”</p>{:else}<p class="blurb">{room.blurb}</p>{/if}
       <span class="cta">{room.cta} <span class="arr">→</span></span>
     </div>
 
   {:else if room.preview === 'art'}
-    {#if artImg}<div class="photo photo--left" style="background-image:url({artImg})"></div>{/if}
-    <div class="body">
-      <div class="eyebrow"><span class="ic">{room.icon}</span>{room.title}</div>
+    <div class="content">
+      <div class="head"><span class="ic">{room.icon}</span><span class="title">{room.title}</span></div>
       <p class="blurb">{room.blurb}</p>
       <span class="cta">{room.cta} <span class="arr">→</span></span>
     </div>
+    {#if artImg}<div class="photo photo--right" style="background-image:url({artImg})"></div>{/if}
 
   {:else}
-    <div class="head">
-      <span class="ic-big">{room.icon}</span>
-      <span class="s-title">{room.title}</span>
-    </div>
-    <div class="tail">
+    <div class="content">
+      <div class="head"><span class="ic">{room.icon}</span><span class="title">{room.title}</span></div>
       <p class="blurb">{room.blurb}</p>
       <span class="cta">{room.cta} <span class="arr">→</span></span>
     </div>
@@ -49,56 +46,53 @@
   .card--wide { min-height: 200px; }
   .card--small { min-height: 168px; }
 
-  .eyebrow {
-    display: flex; align-items: center; gap: 9px;
-    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
-    font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em;
+  .content { display: flex; flex-direction: column; }
+
+  /* shared side-by-side header (icon + title), clean modern sans title */
+  .head { display: flex; align-items: center; gap: 10px; }
+  .ic { font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1; }
+  .title {
+    font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em;
+    font-size: clamp(1.25rem, 2vw, 1.5rem);
   }
-  .ic { font-size: 1.05em; line-height: 1; }
-  .blurb { margin: 9px 0 15px; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 42ch; }
+  .blurb { margin: 10px 0 15px; color: var(--muted); font-size: 1rem; line-height: 1.45; max-width: 42ch; }
   .cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); font-size: 0.98rem; }
   .arr { transition: transform 0.18s ease; }
   .card:hover .arr { transform: translateX(4px); }
 
-  /* News — photo on top, headline below */
+  /* News — photo on top, headline below; larger hero header */
   .card--news { flex-direction: column; }
   .card--news .photo--top {
     width: 100%; flex: 1 1 auto; min-height: 150px;
     background-size: cover; background-position: center;
   }
-  .card--news .body { padding: clamp(18px, 2.2vw, 26px); }
-  .card--news .eyebrow { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
+  .card--news .content { padding: clamp(18px, 2.2vw, 26px); }
+  .card--news .ic { font-size: clamp(2rem, 2.8vw, 2.5rem); }
+  .card--news .title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
   .card--news .headline {
-    margin: 11px 0 15px; font-family: Georgia, serif; font-style: italic;
+    margin: 12px 0 15px; font-family: Georgia, serif; font-style: italic;
     font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.34; max-width: 40ch;
   }
 
-  /* Art — rectangular photo on the left (cover-cropped to hide ragged scan edges) */
+  /* Art — rectangular photo on the RIGHT (cover-cropped to hide ragged scan edges) */
   .card--art { flex-direction: row; align-items: stretch; }
-  .card--art .photo--left {
+  .card--art .content {
+    flex: 1; padding: clamp(16px, 2vw, 26px); justify-content: center;
+  }
+  .card--art .photo--right {
     flex: 0 0 42%; min-width: 130px;
     background-size: cover; background-position: center;
-    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06);
-  }
-  .card--art .body {
-    flex: 1; padding: clamp(16px, 2vw, 26px);
-    display: flex; flex-direction: column; justify-content: center;
+    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.06);
   }
 
-  /* Static — tinted, big centered icon + title, body left-aligned below */
+  /* Static — tinted body with a darker color strip on top (Monopoly-card feel) */
   .card--static {
-    flex-direction: column; justify-content: center; align-items: stretch;
-    background: var(--tint, var(--surface)); border-color: rgba(20, 30, 45, 0.07);
-    padding: clamp(18px, 2.4vw, 26px);
+    flex-direction: column; background: var(--tint, var(--surface));
+    border-color: rgba(20, 30, 45, 0.07); padding: clamp(20px, 2.4vw, 28px);
   }
-  .card--static .head {
-    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
+  .card--static::before {
+    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 13px;
+    background: color-mix(in srgb, var(--tint), #1b2733 17%);
   }
-  .card--static .ic-big { font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 1; }
-  .card--static .s-title {
-    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
-    font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 600; letter-spacing: -0.01em;
-  }
-  .card--static .tail { margin-top: 16px; text-align: left; }
-  .card--static .blurb { margin: 0 0 12px; }
+  .card--static .blurb { margin: 12px 0 14px; }
 </style>