@font-face {
      font-family: 'Daylimirror';
      src: local('Daylimirror'), local('Daylimirror Personal Use');
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html {
      cursor: url('../images/cursor.png') 44 48, auto;
    }

    body {
      width: 100%;
      min-height: 175vh;
      font-family: 'Daylimirror', 'Arial Black', sans-serif;
      background-color: #8b726a;
      position: relative;
    }

    .back {
      position: fixed;
      top: 1rem;
      left: 1.5rem;
      font-size: 0.85rem;
      font-weight: 900;
      color: #f0ead5;
      text-decoration: none;
      text-transform: lowercase;
      z-index: 100;
      transition: opacity 0.2s;
    }
    .back:hover { opacity: 0.6; }

    .page-menu {
      position: fixed;
      top: 1.1rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex;
      gap: 2rem;
    }

    .page-menu a {
      font-family: 'Daylimirror', 'Arial Black', sans-serif;
      font-weight: 900;
      font-size: 0.95rem;
      color: #f0ead5;
      text-decoration: underline;
      text-transform: lowercase;
      transition: opacity 0.2s;
    }

    .page-menu a:hover { opacity: 0.6; }

    .page-title {
      position: fixed;
      top: 1.2rem;
      left: calc(1rem - 1mm);
      font-size: clamp(1rem, 2.2vw, 2.2rem);
      font-weight: 900;
      color: #f0ead5;
      text-transform: lowercase;
      white-space: nowrap;
      line-height: 1.1;
      margin-bottom: 0.4rem;
      padding: 0.6rem 1.5rem;
    }

    .content {
      position: relative;
      z-index: 10;
      width: 65%;
      font-family: 'Canva Sans', 'Inter', 'Helvetica Neue', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #f0ead5;
      line-height: 1.6;
      padding: 7rem 1.5rem 4rem 12rem;
    }

    .content p + p {
      margin-top: 1rem;
    }

    .img-scatter {
      position: absolute;
      mix-blend-mode: multiply;
    }

    .img-white {
      position: absolute;
      mix-blend-mode: normal;
      filter: brightness(0) invert(1);
    }

    /* ── Imagens 14-16 (primeiro viewport) ── */
    .img-14, .img-14-white { top: -30vh;  right: 1%;  width: 40%; transform: rotate(5deg); }
    .img-15, .img-15-white { top: 15vh;  left: 52%;  width: 36%; }
    .img-16, .img-16-white { top: 30vh;  right: 7.5%; width: 30%; }

    .img-14-white { z-index: 1; } .img-14 { z-index: 2; }
    .img-15-white { z-index: 1; } .img-15 { z-index: 2; }
    .img-16-white { z-index: 1; } .img-16 { z-index: 2; }

    /* ── Imagens 17-22 (surgem com scroll) ── */
    .img-17, .img-17-white { top: 74vh;  right: 12%; width: 22%; }
    .img-18, .img-18-white { top: 92vh;  right: 0;   width: 36%; }
    .img-19, .img-19-white { top: 105vh; right: 16%; width: 32%; }
    .img-20, .img-20-white { top: 180vh; right: 27%; width: 26%; }
    .img-21, .img-21-white { top: 134vh; right: 10%; width: 30%; }
    .img-22, .img-22-white { top: 150vh; left: 17%;  width: 50%; }

    .img-17-white, .img-18-white, .img-19-white,
    .img-20-white, .img-21-white, .img-22-white { z-index: 1; }
    .img-17, .img-18, .img-19,
    .img-20, .img-21, .img-22 { z-index: 2; }

    .img-20-white { z-index: 2; }
    .img-20 { z-index: 3; }

    /* ══════════════════════════════════════════
       MOBILE
       ══════════════════════════════════════════ */
    .mobile-gallery { display: none; }

    @media (max-width: 900px) {
      body {
        min-height: 100vh;
        background-attachment: scroll;
      }

      .page-title {
        position: relative;
        top: 0;
        left: 0;
        padding: 3rem 1.2rem 0.5rem;
        font-size: 1.6rem;
      }

      .page-menu {
        top: 5.6rem;
        gap: 1rem 1.4rem;
        flex-wrap: wrap;
        justify-content: center;
        width: 92%;
      }

      .page-menu a {
        font-size: 0.8rem;
      }

      .img-scatter,
      .img-white {
        display: none;
      }

      .content {
        width: 100%;
        padding: 0.5rem 1.2rem 3rem;
      }

      .mobile-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        padding: 0.5rem 1.2rem 1.5rem;
      }

      .mobile-gallery img {
        width: 27%;
        min-width: 5.8rem;
        mix-blend-mode: multiply;
        object-fit: contain;
      }

      .mobile-gallery img:last-child {
        width: 50%;
        min-width: 11rem;
      }
    }