fix: improve mobile banner layout and PDF print styles

- Move hero description outside overflow:hidden banner container
- Use auto aspect-ratio on mobile to prevent banner truncation
- Add break-inside:avoid for Stack, cards, palettes, color-picker, notes
- Remove link backgrounds and force --surface-bg to white in print
- Remove card box-shadow in print to prevent gray artifacts

Made-with: Cursor

app/src/components/Hero.astro

@@ -99,8 +99,8 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
   <h1 class="hero-title" set:html={title} />
   <div class="hero-banner">
     <HtmlEmbed src="banner.html" frameless />
-    {description && <p class="hero-desc">{description}</p>}
   </div>
+  {description && <p class="hero-desc">{description}</p>}
 </section>
 
 <header class="meta" aria-label="Article meta information">
@@ -426,6 +426,9 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
   }
 
   @media (max-width: 768px) {
+    .hero-banner {
+      aspect-ratio: auto;
+    }
     .hero-desc {
       max-width: 90%;
     }

app/src/styles/_print.css

@@ -18,9 +18,10 @@
     display: none !important;
   }
 
-  /* Links: remove underline */
+  /* Links: remove underline and background */
   .content-grid main a {
     text-decoration: none;
+    background: none;
     border-bottom: 1px solid rgba(0, 0, 0, .2);
   }
 
@@ -47,6 +48,7 @@
 
   /* Adjust more contrasty colors for print */
   :root {
+    --surface-bg: #fff;
     --border-color: rgba(0, 0, 0, .2);
     --link-underline: rgba(0, 0, 0, .3);
     --link-underline-hover: rgba(0, 0, 0, .4);
@@ -79,7 +81,13 @@
   table,
   blockquote,
   .wide,
-  .full-width {
+  .full-width,
+  .stack > *,
+  .card,
+  .palettes,
+  .palette-card,
+  .color-picker,
+  .note {
     break-inside: avoid;
     page-break-inside: avoid;
   }

app/src/styles/components/_card.css

@@ -123,4 +123,11 @@
     color: var(--muted-color);
     font-size: 0.9rem;
     margin: 0 !important;
+}
+
+@media print {
+    .card,
+    .card-cta {
+        box-shadow: none;
+    }
 }