.problem-main {
  width: min(800px, calc(100% - 44px));
  margin: 0 auto;
  padding: 80px 0 48px;
}

.problem-section + .problem-section { margin-top: 48px; }
.problem-main h1 { font-size: 40px; line-height: 1.1; text-wrap: pretty; }
.problem-main h2 { font-size: 28px; line-height: 1.2; text-wrap: pretty; }
.problem-main p { margin: 20px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
.problem-main h2 + p { margin-top: 16px; }
.problem-main strong { color: var(--ink); font-weight: 600; }
.problem-main .citation {
  color: var(--teal-dark);
  font-size: .88em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(35, 111, 110, .35);
  text-underline-offset: 3px;
}
.problem-main .citation:hover { text-decoration-color: currentColor; }
.problem-page a:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 5px; }
.problem-skip { position: fixed; top: -100px; left: 22px; z-index: 100; padding: 12px 20px; background: var(--paper-strong); }
.problem-skip:focus { top: 12px; }

@media (max-width: 620px) {
  .problem-main { width: calc(100% - 36px); padding: 44px 0 28px; }
  .problem-section + .problem-section { margin-top: 36px; }
  .problem-main h1 { font-size: 34px; }
  .problem-main h2 { font-size: 26px; }
  .problem-main p { font-size: 15px; }
}

@media print {
  .problem-page .site-header, .problem-page .site-footer, .problem-page .demo-bg, .problem-skip { display: none; }
  .problem-page, .problem-page::before { background: white; }
  .problem-main { width: 100%; padding: 0; }
  .problem-main h1, .problem-main h2 { break-after: avoid; }
  .problem-main p { orphans: 3; widows: 3; }
}