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

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

    html, body {
      width: 100%;
      min-height: 100vh;
      font-family: 'Daylimirror', 'Arial Black', sans-serif;
      cursor: url('../images/cursor.png') 44 48, auto;
    }

    body {
      background-color: #f1ead4;
      background-image: url('../images/bgresearch.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      padding: 0.6rem 0.5rem 0.6rem;
    }

    /* ── Back link ── */
    .back {
      position: fixed;
      top: 0.3rem;
      left: 0.5rem;
      padding: 0.7rem 1rem;
      font-size: 0.85rem;
      font-weight: 900;
      color: #a06050;
      text-decoration: none;
      text-transform: lowercase;
      z-index: 999;
      transition: opacity 0.2s;
    }
    .back:hover { opacity: 0.6; }

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

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

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

    /* ── Título ── */
    .page-title {
      position: relative;
      top: 1.2rem;
      left: calc(1rem - 1mm);
      font-size: clamp(1rem, 2.2vw, 2.2rem);
      font-weight: 900;
      color: #571d0f;
      text-transform: lowercase;
      white-space: nowrap;
      line-height: 1.1;
      margin-bottom: 0;
    }

    /* ── Grid 3 linhas × 2 colunas ── */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto;
      column-gap: 1vw;
      row-gap: 0;
      align-items: start;
      margin-top: -10rem;
    }

    /* ── Artigo ── */
    .article {
      margin-bottom: -18rem;
    }

    .article img {
      width: 85%;
      display: block;
      mix-blend-mode: multiply;
      transition: transform 0.3s ease;
      transform-origin: center center;
    }

    .article a {
      display: block;
      cursor: pointer;
      position: relative;
      z-index: 100;
      pointer-events: none;
    }

    .article img.zoomed {
      transform: scale(1.06);
    }

    .hotspot {
      position: absolute;
      top: 30%;
      left: 10%;
      width: 70%;
      height: 40%;
      z-index: 101;
      cursor: pointer;
      pointer-events: auto;
    }

    .article .caption {
      margin-top: 0.2rem;
      font-family: 'Canva Sans', 'Inter', 'Helvetica Neue', sans-serif;
      font-size: 0.78rem;
      color: #571d0f;
      line-height: 1.35;
      font-weight: 400;
      position: relative;
      z-index: 10;
    }

    .caption-8 {
      position: absolute;
      bottom: 13rem;
      left: 1.5rem;
    }

    .caption-11 {
      position: absolute;
      bottom: 13rem;
      left: 1.5rem;
      max-width: 600px;
    }

    .article {
      position: relative;
    }

    .row2 {
      margin-top: -5rem;
    }

    .art-9 {
      margin-top: -8rem;
    }

    .art-10 {
      margin-top: -5rem;
    }

    .caption-10 {
      position: absolute;
      bottom: 13rem;
      left: 1.5rem;
      max-width: 380px;
    }

    .caption-9 {
      position: absolute;
      bottom: 11.5rem;
      left: 1.5rem;
      max-width: 420px;
    }

    .caption-12 {
      position: absolute;
      bottom: 14.5rem;
      left: 1.5rem;
      max-width: 420px;
    }

    /* ── Item especial: 13.png + texto ── */
    .article-special {
      display: flex;
      gap: 0.8rem;
      align-items: flex-start;
      margin-bottom: -18rem;
    }

    .article-special a {
      display: block;
      cursor: pointer;
      position: relative;
      z-index: 100;
      flex-shrink: 0;
      width: 85%;
      margin-left: -10rem;
      margin-top: -6rem;
      pointer-events: none;
    }

    .article-special img {
      width: 100%;
      mix-blend-mode: multiply;
      display: block;
      transition: transform 0.3s ease;
      transform-origin: center center;
    }

    .article-special img.zoomed {
      transform: scale(1.06);
    }

    .article-special .text-block {
      font-family: 'Canva Sans', 'Inter', 'Helvetica Neue', sans-serif;
      font-size: 0.78rem;
      color: #571d0f;
      line-height: 1.45;
      position: relative;
      z-index: 10;
      margin-top: 7rem;
      margin-left: -13rem;
      max-width: 260px;
    }

    .article-special .text-block em {
      font-style: italic;
    }

    /* ══════════════════════════════════════════
       MOBILE
       ══════════════════════════════════════════ */
    @media (max-width: 900px) {
      body { 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;
      }

      .grid {
        grid-template-columns: 1fr;
        margin-top: 1rem;
        row-gap: 0.5rem;
      }

      .article,
      .article-special,
      .row2,
      .art-9,
      .art-10 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
      }

      .article img {
        width: 72%;
        margin: 0 auto;
      }

      .caption-8, .caption-9, .caption-10,
      .caption-11, .caption-12 {
        position: relative;
        bottom: auto;
        left: auto;
        max-width: none;
        margin-top: -0.3rem;
        padding: 0 1.2rem;
        text-align: center;
      }

      .article-special {
        flex-direction: column;
        align-items: center;
      }

      .article-special a {
        width: 60%;
        margin: 0 auto;
      }

      .article-special .text-block {
        margin-top: 1rem;
        margin-left: 0;
        max-width: none;
        padding: 0 1rem;
        text-align: center;
      }
    }