/* RESEARCH — hero
   Frame 2064:5274 (1440 x 2173). Hero spans y 72 -> 470. */
.research-hero {
  position: relative;
  min-height: 398px;
  padding: 68px var(--pad-x) 0;
}

/* full-bleed hairline closing the hero (Vector 380, 1440 wide) */
.research-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--color-border);
}

.research-hero__title {
  margin-top: 12px;
  max-width: 767px;
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.002em;
  color: var(--color-dark);
}

.research-hero__note {
  position: absolute;
  top: 205px;
  right: 71px;
  width: 509px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-light);
}

.research-hero__arrow {
  position: absolute;
  left: 556px;
  top: 220px;
}

/* RESEARCH — the library
   Full container width; the band's height follows the cards it holds.
   Cards: 2 columns, 523.5 x 232. */
.library {
  position: relative;
  padding: 110px 0 131px;
  background-color: var(--color-cream);
  /* square grid, 1280/11 = 116.36px cells, anchored to the band's top-left */
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--color-grid) 0 1px,
      transparent 1px 116.36px
    ),
    repeating-linear-gradient(
      to right,
      var(--color-grid) 0 1px,
      transparent 1px 116.36px
    );
  /* the Figma grid is phase-shifted: first line 114px in horizontally,
     109px down from the band top */
  background-position: -2.36px -7.36px;
}

.library__grid {
  /* display: grid;
  grid-template-columns: repeat(2, 523.5px);
  gap: 30px 0; */
  max-width: 1047px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

.paper-wrapper {
  display: flex;
  width: 100%;
}

.paper-wrapper:not(:first-child) {
  margin-top: 30px;
}
.paper {
  position: relative;
  display: block;
  height: 232px;
  transition: background var(--transition-fast);
  padding: 34px 23px 0 30px;
  background: var(--color-bg);
}

/* method notes are the rust panels; example articles stay light */
.paper--note {
  background: var(--color-brown);
}

.paper:hover {
  background: var(--color-cream);
}

.paper--note:hover {
  background: var(--color-rust-hover);
}

.paper__kicker {
  font-size: 14px;
  line-height: 1.57;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark);
}

.paper--note .paper__kicker {
  color: var(--color-white);
  /* color: var(--on-rust); */
}

.paper__title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-dark);
}

.paper--note .paper__title {
  color: var(--color-bg);
}

.paper__rule {
  width: 470px;
  max-width: 100%;
  margin: 21px 0 0;
  border: 0;
  border-top: 1px solid var(--color-border-strong);
}

.paper--note .paper__rule {
  border-top-color: rgba(255, 248, 242, 0.35);
}

.paper__text {
  margin-top: 25px;
  width: 465px;
  max-width: 100%;
  font-size: var(--fs-base);
  line-height: 1.48;
  color: var(--color-light);
}

.paper--note .paper__text {
  color: var(--on-rust);
}

@media (max-width: 1311px) {
  .research-hero {
    padding-bottom: 48px;
  }
  .research-hero__note {
    margin: 32px 0 0 auto;
  }

  /* .research-hero__note {
    position: static;
    width: auto;
    max-width: 509px;
    margin: 32px 0 0 auto;
  } */

  .research-hero__arrow {
    display: none;
  }

  .library {
    padding: 64px var(--pad-x);
  }

  /* .library__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
  } */

  .paper {
    height: auto;
    min-height: 232px;
    padding-bottom: 34px;
  }
}
@media (max-width: 1180px) {
  .paper-wrapper {
    flex-direction: column;
  }
  .paper-wrapper-2,
  .paper-wrapper-4 {
    flex-direction: column-reverse;
  }
  .research-hero {
    padding-bottom: 48px;
  }
  .research-hero {
    min-height: 0;
  }

  .research-hero__note {
    position: static;
    width: auto;
    max-width: 509px;
    margin: 32px 0 0 auto;
  }
}
@media (max-width: 900px) {
  /* Figma mobile frame 2084:1653 (375 x 2558). Header rule sits at
     y56; the container rails at x16/x359 give a 341px inner box. */
  .research-hero {
    padding: 30px 16px 58px; /* eyebrow y86, hero rule y449 */
  }

  .research-hero__title {
    margin-top: 14px; /* eyebrow bottom y107 -> title y121 */
    /* max-width: 305px; */
    font-size: 36px;
    line-height: 43px;
  }

  .paper-wrapper {
    padding: 0;
  }

  .paper-wrapper .paper__title {
    font-size: 18px;
  }

  .research-hero__note {
    position: static;
    width: auto;
    /* max-width: 308px; */
    margin-top: 36px; /* title bottom y250 -> note y286 */
    font-size: 14px;
    line-height: 150%;
  }

  .research-hero__arrow {
    display: none;
  }

  .library {
    /* band y449 -> y1861, first card y516, last card bottom y1794 */
    padding: 67px 16px;
    /* the 116.36px desktop pitch was set against a 1280px container; at
       343px the cards cover it and only fragments showed in the gutters */
    background-image:
      repeating-linear-gradient(
        to bottom,
        var(--color-grid) 0 1px,
        transparent 1px 60px
      ),
      repeating-linear-gradient(
        to right,
        var(--color-grid) 0 1px,
        transparent 1px 60px
      );
    background-position:
      0 0,
      16px 0;
  }

  .library__grid {
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    gap: 0 !important; /* cards pair up flush; the pair gap is applied below */
  }

  /* Figma stacks each desktop row as two touching cards, with 15px
     between one pair and the next (y516/724 flush, then 15 to y947). */
  .paper:nth-child(odd):not(:first-child) {
    margin-top: 15px;
  }

  .paper {
    min-height: 208px;
    min-height: 0;
    padding: 17px 19px 24px 19px;
  }

  .paper__kicker {
    font-size: 12px;
    line-height: 159%;
  }

  .paper__title {
    margin-top: 7px;
    font-size: 22px;
    line-height: 150%;
  }

  .paper__rule {
    width: auto;
    margin-top: 12px; /* title bottom y97 -> rule y109 */
  }

  .paper__text {
    width: auto;
    margin-top: 11px; /* rule y109 -> body y121 */
    font-size: 14px;
    line-height: 150%;
  }

  /* library rule y1861 -> footer y1912 */
  .spacer,
  .spacer--sm {
    height: 51px;
  }
}

@media (max-width: 550px) {
  .research-hero__arrow {
    display: block;
    left: 223px;
    top: -80px ;
    transform: scaleX(-1);
    rotate: -35deg;
  }
}
@media (max-width: 410px) {
  .research-hero__arrow {
    top: 145px !important;
  }

}