.topic-intro { max-width: 820px; }
.topic-intro h1 { line-height: 1.3; overflow-wrap: anywhere; }
.topic-intro .topic-byline { font-size: 12px; color: #777a76; }
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.topic-card { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; }
.topic-card h2 { margin: 8px 0 14px; font-size: 21px; line-height: 1.5; letter-spacing: -.5px; }
.topic-card p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.topic-card .topic-count { margin: 0; color: #556a54; font-size: 12px; font-weight: 600; }
.topic-card .text-button { margin-top: auto; }
.topic-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; color: var(--muted); font-size: 13px; }
.topic-guide { max-width: 900px; margin: 0 auto; }
.topic-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.topic-context { padding: 24px; }
.topic-context h2, .topic-editor-note h2, .topic-reading-order h2, .topic-related > h2 { margin: 0 0 12px; font-size: 17px; font-weight: 650; }
.topic-context p, .topic-editor-note p, .topic-reading-order p { margin: 0; font-size: 14px; line-height: 1.95; color: var(--muted); }
.topic-reading-order { margin: 32px 0 24px; padding: 0 4px; }
.topic-resources { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.topic-resource { padding: 28px; }
.topic-resource-heading { display: flex; align-items: flex-start; gap: 16px; }
.topic-step { display: inline-grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 10px; background: #eef2e9; color: #53644b; font-size: 13px; font-weight: 650; }
.topic-domain { margin: 0 0 5px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.topic-resource h2 { margin: 0; font-size: 21px; line-height: 1.5; letter-spacing: -.4px; overflow-wrap: anywhere; }
.topic-reason { margin: 20px 0; font-size: 15px; line-height: 1.95; color: #484d48; }
.topic-exercise { padding: 17px 20px; border-radius: 12px; background: #f7f8f3; }
.topic-exercise h3 { margin: 0 0 8px; font-size: 13px; color: #51644d; }
.topic-exercise p { margin: 0; color: #585f56; font-size: 14px; line-height: 1.85; }
.topic-resource-note { margin: 15px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.topic-resource-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.topic-editor-note { margin-top: 28px; padding: 26px; }
.topic-editor-note .text-button { display: inline-flex; margin-top: 16px; }
.topic-editor-note .topic-source-note { margin-top: 13px; font-size: 12px; }
.topic-related { margin-top: 38px; }
.topic-related .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic-related-link { display: block; padding: 22px; }
.topic-related-link strong { display: block; font-size: 16px; line-height: 1.6; }
.topic-related-link span { display: block; margin-top: 9px; font-size: 13px; line-height: 1.8; color: var(--muted); }
@media (max-width: 1100px) { .topic-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .topic-context-grid, .topic-related .topic-grid { grid-template-columns: 1fr; }
  .topic-card, .topic-context, .topic-resource, .topic-editor-note { padding: 21px; }
  .topic-card h2, .topic-resource h2 { font-size: 19px; }
  .topic-resource-heading { gap: 12px; }
  .topic-reason { font-size: 14px; }
}