/* --- Responsive behaviors --- */
    @media (max-width: 768px) {
      /* Sidebar becomes off-canvas (hidden by default) */
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 250ms ease;
        z-index: 300;
        min-width:90vw;
      }
      .sidebar.active { transform: translateX(0); }

      .hamburger { display: block; }

      /* Details pane on small screens should overlay (full height and width) */
      .details-pane {
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        box-shadow: -8px 0 24px rgba(0,0,0,0.08);
        z-index: 250;
        /* closed */
        width: 0;
        max-width: 0;
        padding: 0;
      }
      .details-pane.active {
        width: 100%;
        max-width: 100%;
        padding: 1rem;
      }

     
    }