/* Research article pages. Tokens, nav, buttons, cards and footer come from styles.css. */
.articlepage .nav { background: rgba(247, 246, 242, .94); }
.article { padding: clamp(112px, 15vh, 160px) var(--gutter) 0; }

.ahead { max-width: 900px; margin-inline: auto; text-align: center; }
.aback { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 15px; font-weight: 500; transition: background-color .3s, color .3s; }
.aback::before { content: "\2190"; margin-right: 8px; }
.atag { margin-top: clamp(20px, 3vh, 32px); color: var(--accent); font-size: 16px; font-weight: 500; }
.ahead h1 { margin-top: 10px; font-size: clamp(38px, 5.6vw, 76px); line-height: 1.06; text-wrap: balance; }
.ameta { margin-top: 16px; color: var(--ink-3); font-size: 16px; }

/* Same green tint as the homepage cards */
.acover { max-width: 960px; margin: clamp(32px, 5vh, 56px) auto 0; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--r-lg); background: #0E4A35; }
.acover img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: .92; }
.acover--crop img { object-position: 78% 30%; transform: scale(1.7); transform-origin: 80% 30%; }

.aprose { max-width: 700px; margin: clamp(40px, 6vh, 72px) auto 0; font-size: clamp(18px, 1.4vw, 19.5px); line-height: 1.62; color: var(--ink); }
.aprose > p + p { margin-top: 1.1em; }
.aprose > p:first-child { font-size: 1.16em; line-height: 1.5; letter-spacing: -.008em; }
.aprose h2 { margin-top: 1.9em; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: var(--display-track); font-weight: 300; text-wrap: balance; }
.aprose h2 + p { margin-top: .75em; }
.aprose strong { font-weight: 600; }

/* Charts keep their real colors: the color carries the data */
.article-figure { margin: 2em auto 0; width: min(860px, calc(100vw - 2 * var(--gutter))); position: relative; left: 50%; transform: translateX(-50%); padding: 12px; border-radius: var(--r-md); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.article-figure img { display: block; width: 100%; height: auto; border-radius: 14px; }
.aprose p.caption { margin: 12px auto 2em; color: var(--ink-3); font-size: 15px; line-height: 1.4; text-align: center; }

.amore { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(72px, 10vw, 130px) var(--gutter) clamp(32px, 4vw, 56px); }
.amore h2 { font-size: clamp(32px, 4vw, 56px); }
.amore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3.4vw, 44px); }

@media (hover: hover) {
  .aback:hover { background: var(--sage); color: var(--ink); }
}
@media (max-width: 860px), (max-height: 520px) {
  .acover { border-radius: var(--r-md); aspect-ratio: 16 / 10; }
  .article-figure { padding: 8px; border-radius: 18px; }
}
@media (max-width: 760px) {
  .amore__grid { grid-template-columns: minmax(0, 1fr); }
}