@media print {
  @page {
    size: A4;
    margin: 15mm;
  }

  /* 1. Global Reset */
  body {
    background: white !important;
    color: black !important;
    margin: 0;
    padding: 0;
  }

  /* 2. Hide ALL images and media-related containers */
  img, picture, video, svg, .inline-block.align-middle {
    display: none !important;
  }

  /* Hide UI elements and overlays */
  #heroNavbar, #mainNavbar, footer, 
  .shareButtons, .shareToggle, #copyBtn, #printBtn,
  .absolute.inset-0.bg-black\/50,
  [style*="background-image"] { /* Hides the media block background images */
    display: none !important;
  }

  /* 3. Collapse the Hero section so it doesn't take up space */
  #hero, 
  #hero .relative.h-screen,
  .relative.w-full.pt-\[100\%\] { /* Target the article media blocks */
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 4. Make the Title and Intro sit at the very top */
  #hero .absolute.bottom-8 {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
  }

  #hero .print-title {
    font-size: 24pt !important;
    color: black !important;
    text-shadow: none !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
  }

  #hero .print-intro {
    font-size: 14pt !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
  }

  /* 5. Clean up the article body */
  .article-block {
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* Remove large dropcaps if they look weird without images */
  .article-block p span[style*="float:left"] {
    font-size: 2rem !important; /* Optional: shrink the giant 'R' */
    line-height: 1 !important;
  }
}