* { margin: 0; padding: 0; box-sizing: border-box; text-transform: lowercase; letter-spacing: .35px; }
    html, body .modal-close { height: 100%; font-family: 'Helvetica', Arial, Helvetica, sans-serif; font-size: 16px; font-weight: lighter;  }
    h1, h2, .caption-container { font-size: 16px; font-weight: lighter;}
    a, button { background: none; border: none; font: inherit; cursor: pointer; color: #000; text-decoration: none; }
    b, figcaption { font-weight: 600; }

    header {
      position: fixed; top: 0; left: 0; width: 100%;
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center; padding: 1rem; z-index: 10;
    }
    #logo { display: flex; align-items: baseline; gap: .5rem; }
    #slideCounter.counter { opacity: .6; }
    #aboutBtn { grid-column: 2; text-align: center; }
    #contactBtn { grid-column: 3; text-align: right; }

    #slider {
      position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; z-index: 1; touch-action: pan-y;
    }
    #slider img, #slider video {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%; object-fit: cover;
      display: none;
    }

    #slider img.active, #slider video.active { display: block; }

    .caption-container {
      position: absolute; bottom: 2rem; width: 100%; text-align: center; z-index: 2;
    }

    #aboutBtn:hover, #contactBtn a:hover, #readMore:hover { cursor: pointer; }

    #readMore {
      opacity: .6;
    }

    /* ABOUT overlay: blur background, show content centered; 'close' at top center */
    #aboutModal {
      position: fixed; inset: 0; display: none; z-index: 20;
      backdrop-filter: blur(10px);
      align-items: center; justify-content: center;
    }
    #aboutModal .modal { 
      background: rgba(243,243,243); width: 450px; max-width: calc(100% - 2rem);
      padding: 2rem; overflow-y: auto; max-height: 80vh;
    }
    #aboutModal .modal-close {
      position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
      cursor: pointer;
    }

    /* READ modal: no overlay; centered text box; bottom-centered 'read less' */
    #readModal {
      position: fixed; inset: 0; display: none; z-index: 6;
      pointer-events: none; /* let background remain interactive */
    }

    #readContent p { line-height: 22px; }
    

    #readModal .modal {
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: rgb(243,243,243); width: 450px; max-width: calc(100% - 2rem);
      padding: 1.5rem; overflow-y: auto; max-height: 60vh; pointer-events: auto;
    }
    #close-read {
      position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
      pointer-events: auto; cursor: pointer;
    }


/* mobil: högerförankring när elementet har klassen nedan */
@media (max-width: 768px) {
    #thumbsGrid {
    grid-template-columns: repeat(3, 1fr);
  }
  :root {
    --thumb-row-height: calc(100vw * 4 / 9);
  }
  .align-right-mobile { object-position: 78% center; }
}