/* Research elements (Emil): hero with paper previews, partner logos, framework figure, authors.
   Uses only the tokens from /css/site.css. */

/* ---------- Hero: text left, paper previews right ---------- */
.hero--research .hero__grid { display: grid; gap: 3rem; align-items: center; max-width: 72rem; margin-inline: auto; }
@media (width >= 64rem) { .hero--research .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.hero--research .hero__inner { justify-items: start; text-align: left; max-width: none; margin: 0; }
@media (width < 64rem) {
  .hero--research .hero__inner { justify-items: center; text-align: center; }
}

/* ---------- Partner logos ---------- */
.affiliations { display: grid; gap: .9rem; padding-top: .5rem; }
.affiliations .eyebrow { color: var(--color-muted); }
.logo-row { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
@media (width < 64rem) { .logo-row { justify-content: center; } }
.logo-row a { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-ink); }
.logo-row img { height: 2rem; width: auto; max-width: 11rem; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .2s ease, opacity .2s ease; }
.logo-row a:hover img { filter: none; opacity: 1; }
/* Per-logo optical sizing: stacked/square logos a bit taller than wide wordmarks */
.logo-row img.logo--cisr { height: 2.75rem; }
.logo-row img.logo--sloan { height: 2.5rem; }
.logo-row img.logo--ercis { height: 2.5rem; }
.logo-label { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; color: var(--color-copy); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Shown until the logo file exists (see the small script at the end of index.html) */
.logo-text { font-family: var(--font-heading); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; color: var(--color-copy); white-space: nowrap; }

/* ---------- Overlapping paper previews ---------- */
.paper-stack {
  position: relative; display: block; justify-self: center;
  width: min(100%, 27rem); aspect-ratio: 1 / 1.08;
  text-decoration: none;
}
@media (width < 64rem) { .paper-stack { width: min(70%, 16rem); } }
.paper-stack img {
  position: absolute; width: 74%; height: auto; background: #fff;
  border: 1px solid var(--color-line);
  box-shadow: 0 1px 2px rgb(20 26 43 / .06), 0 18px 40px -16px rgb(20 26 43 / .28);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.paper-stack img:nth-child(1) { left: 26%; top: 0;  transform: rotate(5deg);  z-index: 1; }
.paper-stack img:nth-child(2) { left: 13%; top: 2%; transform: rotate(1.5deg); z-index: 2; }
.paper-stack img:nth-child(3) { left: 0;   top: 5%; transform: rotate(-4deg); z-index: 3; }
.paper-stack:hover img:nth-child(1), .paper-stack:focus-visible img:nth-child(1) { transform: translate(6%, -2%) rotate(8deg); }
.paper-stack:hover img:nth-child(2), .paper-stack:focus-visible img:nth-child(2) { transform: translate(2%, -3%) rotate(2.5deg); }
.paper-stack:hover img:nth-child(3), .paper-stack:focus-visible img:nth-child(3) { transform: translate(-3%, -1%) rotate(-6deg); }
.paper-stack__label {
  position: absolute; z-index: 4; left: 0; bottom: 0;
  background: var(--color-primary); color: #fff; font-size: var(--size-small); font-weight: 500;
  padding: .55em .9em; border-radius: 2px;
}

/* ---------- Framework: compact, text left, figure right ---------- */
.framework {
  display: grid; gap: 1.75rem; align-items: center;
  max-width: 64rem; margin-inline: auto;
  padding: 1.5rem; background: var(--color-paper); border: 1px solid var(--color-line);
}
@media (width >= 56rem) { .framework { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 2.5rem; padding: 2rem 2.25rem; } }
.framework__text { display: grid; gap: .75rem; font-size: var(--size-small); color: var(--color-copy); }
.framework__text .text-heading { color: var(--color-ink); }
.framework__text em { font-style: normal; color: var(--color-ink); font-weight: 500; }
.framework__source { color: var(--color-muted); padding-top: .25rem; }
.framework__source a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
.framework__source a:hover { text-decoration: underline; }
.framework__figure { margin: 0; }
.framework__figure a { display: block; cursor: zoom-in; }
.framework__figure img { display: block; width: 100%; height: auto; transition: opacity .2s ease; }
.framework__figure a:hover img { opacity: .92; }

/* ---------- Authors (inside the dark briefing band) ---------- */
.authors { display: grid; gap: 1.5rem; padding-bottom: var(--section-py); }
.authors::before { content: ""; border-top: 1px solid rgba(255, 255, 255, .18); margin-bottom: .5rem; }
.authors .eyebrow { margin: 0; }
.author-list { list-style: none; display: grid; gap: 1.75rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (width >= 40rem) { .author-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 64rem) { .author-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.author { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.author img { width: 4.5rem; height: 4.5rem; object-fit: cover; object-position: top; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.author > div { display: grid; gap: .2rem; padding-top: .35rem; }
.author__name { color: #fff; font-weight: 500; }
.author__role { font-size: var(--size-small); color: #aab6c7; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .paper-stack img { transition: none; }
}