/* Container with posts and sidebar */
    .container {
      display: flex;
      width: 98%;
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1rem;
      gap: 2rem;
      align-items: flex-start;
    }

    /* Main posts area */
    main.posts {
      flex: 1 1 65%;
      margin-right: 20px; /* space for fixed sidebar */
      min-width: 0; /* prevent flexbox overflow issues */
    }

    /* Individual post container */
    .mnview.post {
      display: flex;
      max-width: 900px;
      width: 100%;
      gap: 1.5rem;
      align-items: flex-start;
      margin-bottom: 1rem;
      min-width: 0; /* prevent flexbox overflow issues */
    }

    /* Image wrapper and image */
    .image-wrapper {
      flex: 0 0 58%;
      max-width: 58%;
    }
    .image-wrapper img.post-image {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* Text wrapper */
    .text-wrapper {
      flex: 1 1 auto;
      position: relative;
      overflow: hidden;
      /* max-height will be set dynamically by JS */
      transition: max-height 0.4s ease;
      border-left: 3px solid #ffffff;
      padding-left: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background: white;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      min-width: 0; /* prevent flexbox overflow issues */
    }

    /* Scrollable limited text */
    .text-content {
      overflow: hidden;
    }

    /* Fixed text at bottom */
    .fixed-text {
      padding-top: 0.2rem;
      font-weight: 600;
      color: #8b5e3c;
      background: white;
      flex-shrink: 0;
    }

    /* Fade overlay */
    .fade {
      position: absolute;
      bottom: 2.4rem; /* height of fixed-text + some padding */
      left: 0;
      right: 0;
      height: 3rem;
      background: linear-gradient(transparent, white);
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 1;
    }
    .fade.hidden {
      opacity: 0;
    }

    /* Sidebar styles */
    aside.sidebar {
      flex: 1 1 30%;
      position: relative; /* for JS positioning */
      min-width: 300px;
    }
    .sidebar-inner {
      background: #f9f9f9;
      padding: 1rem;
      border-radius: 6px;
      box-shadow: 0 0 8px rgba(0,0,0,0.1);
      width: 100%;
    }

    /* Sticky sidebar */
    .sidebar-inner.fixed {
      position: fixed;
      top: 20px;
      width: 300px; /* fixed width */
      z-index: 10;
    }
    .sidebar-inner.absolute {
      position: absolute;
      bottom: 0;
      top: auto;
    }

    /* Responsive: stack posts and sidebar vertically */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        width: 100% !important;
      }
      main.posts {
        margin-right: 0; /* remove sidebar margin */
      }
      aside.sidebar {
        order: 2; /* sidebar below posts */
        width: 100% !important;
        position: static !important;
        margin-top: 1rem;
        min-width: auto;
      }
      .sidebar-inner {
        position: static !important;
        width: 100% !important;
        box-shadow: none;
        background: #fff;
        padding: 1rem 0;
      }
      .mnview.post {
        flex-direction: column;
      }
      .image-wrapper {
        max-width: 100%;
        flex: none;
        margin-bottom: 1rem;
      }
      .text-wrapper {
        border-left: none;
        border-top: 3px solid #8b5e3c;
        padding-left: 0;
        padding-top: 1rem;
        max-height: 350px !important;
        overflow: visible !important;
      }
      .fade {
        display: none;
      }
      .fixed-text {
        background: transparent;
        padding-top: 0;
      }
    }