/* Articles: a single column of reading on the landing's own colours and type. */

.art-nav { border-bottom: 1px solid var(--line); }
.art-nav .nav { padding-block: 16px; }
.art-nav .nav-links { gap: 20px; align-items: center; }
.art-nav .nav-links a.btn-dl { padding: 10px 16px; font-size: 14px; color: #06202b; }

.art { padding-block: clamp(48px, 8vw, 96px) clamp(56px, 8vw, 104px); }
.art-col { max-width: 760px; }
.art h1 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-2xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 14px 0 22px;
}
.art .lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--text2); }
.art .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.art .note { color: var(--dim); font-size: var(--t-sm); }

.art h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  margin: clamp(48px, 7vw, 72px) 0 18px;
}
.art h3 { font-size: var(--t-lg); font-weight: 600; margin: 26px 0 8px; }
.art p, .art li { font-size: 17px; line-height: 1.7; color: var(--text2); }
.art p + p { margin-top: 14px; }
.art ul, .art ol { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.art li::marker { color: var(--beam); }
.art strong { color: var(--text); font-weight: 600; }
/* the shared small labels keep their own look inside the article's text */
.art p.kicker { color: var(--beam); font-size: var(--t-xs); line-height: 1.4; }
.art p.mono { font-size: var(--t-xs); line-height: 1.5; }
.art a:not(.btn-dl) { color: var(--beam); }

.art figure { margin: 32px 0 0; }
.art figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.art figcaption { margin-top: 10px; color: var(--dim); }

.callout {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--line2);
  border-left: 3px solid var(--live);
  border-radius: var(--radius);
  background: var(--surface);
}
.callout p { color: var(--text); }

.art .faq { margin-top: 18px; }
.art .faq summary { font-size: 17px; }
.art .faq p { padding-bottom: 18px; }

.art-end {
  margin-top: clamp(56px, 8vw, 88px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.art-end h2 { margin-top: 0; }

@media (max-width: 760px) {
  .art-nav .nav-links { display: flex; }
  .art-nav .nav-links a:not(.btn-dl) { display: none; }
  .art p, .art li { font-size: 16px; }
}