/* Reading routes use the existing editorial palette and stay readable without motion. */
.qf-guide-category-nav,
.qf-guide-start,
.qf-guide-category-intro,
.qf-guide-context-links {
  --qf-guide-ground: #dce7e2;
  --qf-guide-ink: #101e24;
  --qf-guide-secondary: #39545c;
  --qf-guide-accent: #ff794d;
  color: var(--qf-guide-ink);
  box-sizing: border-box;
}
.qf-guide-category-nav { margin-block: 36px !important; }
.qf-guide-category-nav ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.qf-guide-category-nav li { margin: 0; }
.qf-guide-category-nav a { display: block; padding: 11px 16px; min-height: 44px; background: var(--qf-guide-ground); color: var(--qf-guide-ink); text-decoration: none; font-size: 16px; line-height: 1.4; }
.qf-guide-category-nav a[aria-current="page"] { background: var(--qf-guide-ink); color: var(--qf-guide-ground); }
.qf-guide-category-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.qf-guide-start { margin-block: 36px 56px !important; padding: clamp(24px, 3vw, 36px); background: var(--qf-guide-ground); }
.qf-guide-start h2,
.qf-guide-category-intro h2,
.qf-guide-context-links h2 { margin: 0 0 16px; font-size: clamp(25px, 2.8vw, 32px); font-weight: 500; line-height: 1.45; letter-spacing: -.025em; }
.qf-guide-start .qf-guide-start-intro { margin: 0 0 28px; max-width: 860px; font-size: 17px; line-height: 1.8; }
.qf-guide-start ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; padding-left: 25px; margin: 0; }
.qf-guide-start li { min-width: 0; padding-left: 4px; font-size: 18px; line-height: 1.6; }
.qf-guide-start li::marker { color: var(--qf-guide-secondary); }
.qf-guide-start li a { font-size: 21px; line-height: 1.5; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.qf-guide-start li p { margin: 10px 0 0; color: var(--qf-guide-secondary); font-size: 16px; line-height: 1.75; }
.qf-guide-category-intro { margin-block: 24px 36px !important; }
.qf-guide-category-intro > p { max-width: 940px; margin: 0 0 32px; font-size: 18px; line-height: 1.85; }
.qf-guide-category-intro nav { padding: clamp(24px, 3vw, 32px); background: var(--qf-guide-ground); }
.qf-guide-context-links { margin-block: 52px 36px; padding: clamp(24px, 3vw, 32px); background: var(--qf-guide-ground); }
.qf-guide-context-links > p { margin: 0 0 20px; font-size: 17px; line-height: 1.85; }
.qf-guide-link-list { margin: 0; padding-left: 23px; display: grid; gap: 14px; }
.qf-guide-link-list li { margin: 0 !important; font-size: 18px; line-height: 1.75; overflow-wrap: anywhere; }
.qf-guide-link-list a { color: inherit; text-underline-offset: 5px; }
.qf-guide-category-nav a:focus-visible,
.qf-guide-start a:focus-visible,
.qf-guide-category-intro a:focus-visible,
.qf-guide-context-links a:focus-visible { outline: 3px solid var(--qf-guide-ink); outline-offset: 4px; }
@media (max-width: 1000px) { .qf-guide-start ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .qf-guide-category-nav { margin-block: 28px !important; }
  .qf-guide-category-nav a { padding-inline: 12px; }
  .qf-guide-start { margin-bottom: 36px !important; padding: 24px 20px; }
  .qf-guide-start ol { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .qf-guide-start li p { margin-top: 5px; }
  .qf-guide-category-intro > p { font-size: 17px; }
  .qf-guide-link-list li { font-size: 17px; }
}