/* ============================================================
   TEMPORARY PREVIEW — desktop long mist (task 3)
   ------------------------------------------------------------
   TO REVERT: remove the <link> to this file in index.html (and
   delete this file). assets/mist.webp is untouched either way;
   assets/mist.webp.bak holds a byte-identical copy of it.

   Desktop / tablet (>=721px) scrolls the long engine-baked strip
   assets/mistdesktop.webp with the page — the same one-piece
   behaviour phones already have with mistmobile.webp. Mobile
   (<=720px) is untouched: it is handled in css/mobile.css ITEM 18.
   ============================================================ */
@media (min-width: 721px) {
  #hero-scene{ background-image:none !important; }
  main#top{
    background-image:url('../assets/mistdesktop.webp?v=28');
    background-repeat:no-repeat;
    background-position:top center;
    /* natural scale: the strip is 16200/1728 = 9.375x its width, so it never
       squashes and never runs out down the page */
    background-size:100% max(100%, 937.5vw);
  }
}