/* Research — an institutional insights index.
   Hero: the dark library. 01 Notes: a featured note over a duotone plate, then a boxless index of the
   other five, each showing its note's own hero as a navy duotone. 02 White papers: a ruled publications
   list beside a sticky lead, each paper with its own photograph. Closing: Home's full-bleed band
   with a notebook and pen on its own dark ground; the footer follows directly. */

body[data-page="research"] {
  --hero: url("../img/photos/hero-research.jpg"); --hero-pos: 50% 70%; --hero-blend: normal;
  --next-img: url("../img/photos/camp-yourbook.jpg"); --next-pos: 100% 50%;
}

/* ── 01 Research notes: featured + index ── */
body[data-page="research"] .poster > section:nth-child(2) .library {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.8rem 1.9rem; margin-top: 2.4rem;
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card {
  background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none;
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card .stage {
  aspect-ratio: 3 / 2; border-radius: 12px; --img-blend: luminosity;
  transition: filter .3s ease;
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card:hover .stage { filter: brightness(.9) }
body[data-page="research"] .poster > section:nth-child(2) .library > .card .body {
  padding: 1.25rem 0 0; gap: .5rem; border-top: 0;
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card .body h3 { font-size: 1.5rem; line-height: 1.08 }
body[data-page="research"] .poster > section:nth-child(2) .library > .card .body p {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.5; color: var(--muted); max-width: 30rem;
}

/* each card shows its own note's hero, as a navy duotone */
body[data-page="research"] .library > .card:nth-child(1) .stage { --img: url("../img/photos/note-evar.jpg"); --img-pos: 50% 62% }
body[data-page="research"] .library > .card:nth-child(2) .stage { --img: url("../img/photos/note-statarb-sm.jpg"); --img-pos: 50% 50% }
body[data-page="research"] .library > .card:nth-child(3) .stage { --img: url("../img/photos/note-basis-sm.jpg"); --img-pos: 50% 42% }
body[data-page="research"] .library > .card:nth-child(4) .stage { --img: url("../img/photos/note-meanrev-sm.jpg"); --img-pos: 50% 82% }
body[data-page="research"] .library > .card:nth-child(5) .stage { --img: url("../img/photos/note-trend-sm.jpg"); --img-pos: 50% 60% }
body[data-page="research"] .library > .card:nth-child(6) .stage { --img: url("../img/photos/note-vol-sm.jpg"); --img-pos: 50% 45% }

/* the featured note: a large plate with the title set over its foot */
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child {
  grid-column: 1 / span 2; grid-row: 1 / span 2;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  border-radius: 14px; overflow: hidden; min-height: 560px; isolation: isolate;
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child > * { grid-area: 1 / 1 }
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child .stage {
  aspect-ratio: auto; height: 100%; border-radius: 0;
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child .stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .72) 34%, rgba(11, 19, 34, .1) 70%, rgba(11, 19, 34, 0) 100%);
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child .body {
  align-self: end; position: relative; z-index: 1; padding: clamp(1.6rem, 3.4vw, 3rem); gap: .8rem;
  padding-right: calc(clamp(1.6rem, 3.4vw, 3rem) + 3rem);
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child .body > span:first-child { color: rgba(255, 255, 255, .82) }
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child .body h3 {
  color: #fff; font-size: clamp(2.8rem, 5.4vw, 4.6rem); letter-spacing: -.045em; line-height: .95;
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child .body p {
  color: rgba(255, 255, 255, .88); font-size: clamp(1.12rem, 1.5vw, 1.3rem); max-width: 34rem;
}
body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child:hover h3 {
  color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em;
}

/* ── 02 White papers: a ruled publications list beside the lead ── */
body[data-page="research"] .poster > section:nth-child(3) {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start;
}
body[data-page="research"] .poster > section:nth-child(3) > .sh { grid-column: 1 / -1 }
body[data-page="research"] .poster > section:nth-child(3) > .section-lead {
  grid-column: 1; grid-row: 2; position: sticky; top: 7.5rem; margin-top: 2rem; font-size: 1.22rem;
}
body[data-page="research"] .poster > section:nth-child(3) > .library {
  grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2rem;
}
body[data-page="research"] .card.paper {
  grid-template-columns: clamp(9rem, 15vw, 13rem) minmax(0, 1fr); column-gap: clamp(1.4rem, 2.6vw, 2.4rem);
  align-items: start; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 1.9rem 0; overflow: visible;
}
body[data-page="research"] .card.paper:last-child { border-bottom: 1px solid var(--line) }
body[data-page="research"] .card.paper::before {
  content: ""; aspect-ratio: 4 / 3; border-radius: 10px;
  background: var(--navy) var(--img, none) center / cover no-repeat; background-position: var(--img-pos, 50% 50%);
}
body[data-page="research"] .card.paper .body { padding: 0; gap: .55rem }
body[data-page="research"] .card.paper .body h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.12; max-width: 30ch }
body[data-page="research"] .card.paper .body p { font-family: var(--serif); font-size: 1.06rem; line-height: 1.55; max-width: 40rem }

body[data-page="research"] .card.paper:nth-child(1) { --img: url("../img/photos/theme-tokenized-sm.jpg"); --img-pos: 50% 40% }
body[data-page="research"] .card.paper:nth-child(2) { --img: url("../img/photos/fibre-bundle-sm.jpg"); --img-pos: 35% 50% }
body[data-page="research"] .card.paper:nth-child(3) { --img: url("../img/photos/about-scales-sm.jpg"); --img-pos: 68% 50% }
body[data-page="research"] .card.paper:nth-child(4) { --img: url("../img/photos/paper-sm.jpg"); --img-pos: 58% 50% }
body[data-page="research"] .card.paper:nth-child(5) { --img: url("../img/photos/type-options-sm.jpg"); --img-pos: 50% 62% }

/* ── closing: Home's band, full bleed. The notebook is set to the right at the band's full height, on a
   ground matched to the photograph's own dark edge so the two read as one; the footer follows directly ── */
body[data-page="research"] .poster > section.next {
  position: relative; isolation: isolate;
  width: 100vw; margin: 0 0 0 calc(50% - 50vw);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: clamp(420px, 56vh, 560px);
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  border: 0; border-radius: 0; color: #fff;
  background-color: #060A13;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .2) 100%), var(--next-img);
  background-size: cover, auto 100%; background-position: center, var(--next-pos); background-repeat: no-repeat;
}
body[data-page="research"] .poster > section.next p {
  margin: 0; max-width: 24ch; color: #fff; font-family: var(--serif); font-size: clamp(1.9rem, 3.3vw, 2.8rem); line-height: 1.18; letter-spacing: -.01em;
}
body[data-page="research"] .poster > section.next .actions { margin-top: 2rem }
body[data-page="research"] .poster > section.next .btn { background: #fff; color: var(--black) }
body[data-page="research"] .poster > section.next .btn:hover { background: var(--red); color: #fff }
body[data-page="research"] footer { margin-top: 0; border-top: 0 }

/* ── responsive ── */
@media (max-width: 1000px) {
  body[data-page="research"] .poster > section:nth-child(2) .library { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.6rem }
  body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child { grid-row: auto; min-height: 520px }
  body[data-page="research"] .poster > section:nth-child(2) .library > .card:last-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.6rem; align-items: center }
  body[data-page="research"] .poster > section:nth-child(2) .library > .card:last-child .body { padding-top: 0 }
  body[data-page="research"] .poster > section:nth-child(3) { grid-template-columns: minmax(0, 1fr) }
  body[data-page="research"] .poster > section:nth-child(3) > .section-lead { position: static; grid-row: auto; margin-top: .6rem }
  body[data-page="research"] .poster > section:nth-child(3) > .library { grid-column: 1; grid-row: auto }
  body[data-page="research"] .poster > section.next { min-height: 0; padding-block: 5rem; background-image: linear-gradient(90deg, rgba(11, 19, 34, .92), rgba(11, 19, 34, .7)), var(--next-img); background-size: cover; background-position: center, 62% 50% }
}
@media (max-width: 640px) {
  body[data-page="research"] .poster > section:nth-child(2) .library { grid-template-columns: minmax(0, 1fr); gap: 2.2rem }
  body[data-page="research"] .poster > section:nth-child(2) .library > .card:first-child { grid-column: auto; min-height: 460px }
  body[data-page="research"] .poster > section:nth-child(2) .library > .card:last-child { grid-column: auto; grid-template-columns: minmax(0, 1fr) }
  body[data-page="research"] .poster > section:nth-child(2) .library > .card:last-child .body { padding-top: 1.25rem }
  /* phone: the thumbnail floats and the paper's text wraps around it */
  body[data-page="research"] .card.paper { display: block; padding: 1.5rem 0 1.6rem }
  body[data-page="research"] .card.paper::before { display: block; float: left; width: 5.6rem; aspect-ratio: 1 / 1; margin: .2rem 1rem .5rem 0; border-radius: 8px }
  body[data-page="research"] .card.paper .body { display: block }
  body[data-page="research"] .card.paper .body > * { display: block }
  body[data-page="research"] .card.paper .body h3 { margin: .45rem 0 .7rem }
  body[data-page="research"] .card.paper .body p { font-size: 1.02rem; clear: left; padding-top: .3rem }
  body[data-page="research"] .poster > section.next {
    min-height: 0; padding: 4.4rem var(--gutter);
    background-image: linear-gradient(180deg, rgba(11, 19, 34, .86), rgba(11, 19, 34, .74) 55%, rgba(11, 19, 34, .9)), var(--next-img);
  }
  body[data-page="research"] .poster > section.next p { font-size: 1.75rem; line-height: 1.22 }
}

/* published white papers read as links: a drawn red arrow on the right, the title turns red on hover */
body[data-page="research"] a.card.paper { position: relative; padding-right: 3.2rem; transition: background-color .2s ease }
body[data-page="research"] a.card.paper::after {
  content: ""; position: absolute; right: 1rem; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  border-top: 2px solid var(--red); border-right: 2px solid var(--red); transform: rotate(45deg); transition: right .2s ease;
}
body[data-page="research"] a.card.paper:hover { background-color: rgba(255, 255, 255, .55) }
body[data-page="research"] a.card.paper:hover::after { right: .6rem }
body[data-page="research"] a.card.paper:hover h3 { color: var(--red) }
body[data-page="research"] a.card.paper:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px }