/* Uses the site's existing Roboto font and colour tokens. */
.question-hero { margin-block: 0; }
.question-hero picture, .question-hero img { display: block; width: 100%; }
.question-hero img { height: auto; }
.question-hero figcaption { color: var(--ink-2); font-size: .78rem; padding-top: .55rem; }
.question-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.question-jumps { border-block: 1px solid var(--line); padding: 1rem 0; margin-bottom: 2.5rem; }
.question-jumps ol { padding-left: 1.4rem; }
.question-jumps li + li { margin-top: .55rem; }
.question-jumps a { color: var(--teal-txt); text-decoration-thickness: 1px; text-underline-offset: .2em; }
h2[id^="question-"] { scroll-margin-top: 6rem; }
.question-posts { padding: 0; margin: 1.5rem 0 0; list-style: none; }
.question-posts > li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.4rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.question-posts img { display: block; width: 100%; height: auto; }
.question-posts strong { display: inline-block; font-size: 1.14rem; line-height: 1.25; margin-bottom: .55rem; }
@media (max-width: 600px) {
  .question-posts > li { grid-template-columns: 1fr; gap: .9rem; }
  .question-posts > li > a { max-width: 100%; }
}