/* Research landing (/MAGS/RESEARCH/). The map strip is the one loud thing:
   the corridor's two lakes as the publication's flag. A study is a boxed
   dossier: what it covers, its counts with their source and date, and
   everything it has produced. */

.research-map { margin: .5rem 0 0; }
.research-map img { display: block; width: 100%; height: clamp(8rem, 20vw, 13rem); max-width: none; object-fit: cover; object-position: 55% 45%; border: 1px solid var(--ink); }
.research-map figcaption { margin-top: .35rem; text-align: right; font-size: .72rem; color: var(--ink-soft); }
.research-map figcaption a { color: inherit; }
:root[data-theme="dark"] .research-map img { filter: saturate(.75) brightness(.85); }

.research-mast { margin: 1.25rem 0 2.5rem; padding-bottom: 1.1rem; border-bottom: 5px solid var(--ink); }
.research-mast__title { margin: 0; font: 800 clamp(3.5rem, 12vw, 7.5rem)/.85 var(--sans); letter-spacing: -.04em; }
.research-mast__byline { margin: .9rem 0 0; font: 1.45rem/1.3 var(--hand); }
.research-mast__lede { margin: .35rem 0 0; max-width: 60ch; color: var(--ink-soft); }

.research-method h2, .research-studies > h2, .research-more h2 { margin: 0 0 1rem; font-size: 1.25rem; }
/* A real sequence, so the steps are counted. */
.research-method__steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.research-method__steps li { counter-increment: step; padding: .85rem 1rem 1rem 0; }
.research-method__steps li + li { padding-left: 1rem; border-left: 1px solid var(--rule); }
.research-method__steps b { display: block; font-size: 1.05rem; }
.research-method__steps b::before { content: counter(step) ". "; font: 400 1rem var(--hand); color: var(--ink-soft); }
.research-method__steps span { display: block; margin-top: .3rem; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }

.research-studies { margin-top: 3rem; }
.research-study { position: relative; padding: 1.5rem; border: 1.4px solid var(--ink); }
.sketched .research-study { border-color: transparent; }
.research-study__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.research-study__head h3 { margin: 0; font-size: 1.6rem; line-height: 1.15; }
.research-study__head h3 a { color: var(--ink); }
.research-study__where { margin: 0; font: 1.05rem var(--hand); color: var(--ink-soft); }
.research-study__status { display: inline-block; margin: 0; padding: .3rem .6rem; background: var(--field); border: 1px dashed var(--ink-soft); font-size: .88rem; }
.research-study__figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 1.25rem 0 .5rem; border-block: 1px solid var(--rule); }
.research-study__figures div { padding: .75rem .9rem .75rem 0; }
.research-study__figures div + div { padding-left: .9rem; border-left: 1px solid var(--rule); }
.research-study__figures dt { font-size: .78rem; color: var(--ink-soft); }
.research-study__figures dd { margin: .2rem 0 0; font: 700 1.6rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.research-study__source { margin: 0 0 1.25rem; font-size: .8rem; color: var(--ink-soft); }
.research-study__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.research-study__cols h4 { margin: 0 0 .5rem; font: 1.05rem var(--hand); }
.research-study__list { margin: 0; padding: 0; list-style: none; }
.research-study__list li { padding: .45rem 0; border-top: 1px solid var(--rule); line-height: 1.4; }
.research-study__list span { display: block; font-size: .8rem; color: var(--ink-soft); }
.research-study__list .issue-list__arrow { margin-left: .35rem; }

.research-more { margin-top: 2.5rem; }
.research-more > p { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0 0 2rem; }

@media (max-width: 52rem) {
  .research-method__steps, .research-study__figures { grid-template-columns: 1fr 1fr; }
  .research-method__steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .research-study__figures div:nth-child(3) { padding-left: 0; border-left: 0; }
  .research-study__cols { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 36rem) {
  .research-map img { height: 9rem; }
  .research-study { padding: 1.1rem; }
  .research-study__figures dd { font-size: 1.35rem; }
}