/* Teaching pages extend the existing black and gold resource design. */
.topic-page .topic-hero { background:#111; color:#f7f5f0; padding:30px 0 32px; }
.topic-page .topic-hero h1 { color:#fff; max-width:900px; font:700 clamp(2rem,4.2vw,3.6rem)/1.12 Georgia,serif; margin:12px 0 18px; letter-spacing:-.02em; }
.topic-page .topic-breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; color:#ead9b6; font-size:.9rem; }
.topic-page .topic-kicker { margin:0 0 8px; font-size:.9rem; font-weight:750; color:#72531c; }
.topic-page .topic-hero .topic-kicker { color:#ead9b6; margin-top:20px; }
.topic-page .topic-lede { max-width:820px; font-size:1.1rem; color:#eee8dc; margin:0 0 12px; }
.topic-page .topic-byline { font-size:.9rem; color:#ead9b6; }
.topic-page .topic-jumps { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.topic-page .topic-jumps a { display:inline-flex; align-items:center; min-height:44px; padding:9px 15px; background:#fff; border:1px solid #cbb894; border-radius:6px; color:#49340f; font-size:.95rem; font-weight:700; text-decoration:none; }
.topic-page .topic-hero .topic-jumps a { background:#ead9b6; color:#211b11; }
.topic-page a { text-underline-offset:4px; }
.topic-page .topic-article a,.topic-page .topic-sidebar a { color:#72531c; }
.topic-page .topic-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; align-items:start; padding-top:32px; }
.topic-page .topic-article { min-width:0; }
.topic-page .topic-article section { margin:0 0 36px; scroll-margin-top:100px; }
.topic-page h2 { font-size:1.5rem; line-height:1.3; letter-spacing:-.02em; }
.topic-page .topic-steps { padding-left:24px; }
.topic-page li { margin-bottom:9px; }
.topic-page .topic-note { padding:18px 22px; background:#eee8dc; border-left:4px solid #8a6526; color:#393329; margin-bottom:34px; }
.topic-page .topic-note h2 { font-size:1.1rem; margin:0 0 10px; }
.topic-page .topic-note ul { margin:0; padding-left:20px; }
.topic-page .topic-question { padding:18px 22px; background:#111; color:#fff; border-top:3px solid #b69250; border-radius:8px 8px 0 0; }
.topic-page .topic-question p:first-child { margin-top:0; }
.topic-page .topic-question p:last-child { margin-bottom:0; }
.topic-page .topic-solution { padding:14px 22px; border:1px solid #d9d0c0; background:#fff; color:#28231b; border-radius:0 0 8px 8px; }
.topic-page .math-line { font:1.13rem/1.75 Georgia,serif; overflow-wrap:anywhere; margin:16px 0; }
.topic-page .topic-reveal { border:1px solid #cdbfA7; background:#fff; color:#28231b; margin-top:10px; border-radius:7px; }
.topic-page .topic-reveal summary { cursor:pointer; padding:13px 18px; font-size:1rem; font-weight:700; color:#634614; }
.topic-page .topic-reveal > div { padding:0 18px 12px; }
.topic-page .topic-review { border-left:3px solid #8a6526; padding-left:15px; }
.topic-page .topic-resources { padding-left:20px; }
.topic-page .topic-resources a { font-weight:700; }
.topic-page .topic-resources p { margin:4px 0 15px; }
.topic-page .topic-credit { font-size:.9rem; color:#5d564b; }
.topic-page .topic-sidebar { background:#fff; color:#332b1f; border:1px solid #d9d0c0; border-radius:8px; padding:20px; }
.topic-page .topic-sidebar h2 { font-size:1.1rem; margin:0 0 12px; }
.topic-page .topic-sidebar nav { display:flex; flex-direction:column; }
.topic-page .topic-sidebar nav a { padding:10px 0; font-size:.95rem; }
.topic-page .topic-sidebar nav a[aria-current] { color:#111; font-weight:800; }
.topic-page .topic-sidebar p { font-size:.9rem; }
.topic-page .topic-start { max-width:880px; padding:22px 0 10px; }
.topic-page .topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:15px 0 36px; scroll-margin-top:95px; }
.topic-page .topic-card { display:flex; flex-direction:column; padding:24px; background:#fff; color:#28231b; border:1px solid #d9d0c0; border-top:3px solid #8a6526; border-radius:9px; min-width:0; }
.topic-page .topic-card h2 { margin:0 0 10px; font-size:1.4rem; }
.topic-page .topic-card h2 a { text-decoration:none; }
.topic-page .topic-card p { margin-top:0; }
.topic-page .topic-card-link { margin-top:auto; color:#634614; font-weight:750; min-height:44px; padding-top:12px; }
.topic-page .topic-return { padding:22px; background:#eee8dc; color:#393329; border-radius:8px; margin-bottom:30px; }
.topic-page .topic-return h2 { margin-top:0; }
.topic-page .topic-tuition { display:flex; flex-wrap:wrap; gap:20px; align-items:center; padding:26px; margin:20px 0 45px; background:#111; color:#eee8dc; border-radius:9px; }
.topic-page .topic-tuition > div { flex:1 1 450px; }
.topic-page .topic-tuition h2 { margin:0 0 10px; color:#ead9b6; }
.topic-page .topic-tuition p { margin:0; color:#eee8dc; }
.topic-page .topic-tuition .resource-button { background:#ead9b6; color:#211b11 !important; text-align:center; }
.topic-page .topic-tuition .resource-button:hover,.topic-page .topic-tuition .resource-button:focus-visible { background:#72531c; color:#fff !important; }
.topic-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.topic-page :focus-visible { outline:3px solid #856020; outline-offset:4px; }
.topic-page .topic-hero :focus-visible,.topic-page .topic-tuition :focus-visible { outline-color:#ead9b6; }
@media(max-width:1000px) { .topic-page .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .topic-page .topic-layout { grid-template-columns:minmax(0,1fr); gap:12px; } .topic-page .topic-sidebar { margin-bottom:25px; } }
@media(max-width:620px) { .topic-page .topic-grid { grid-template-columns:minmax(0,1fr); } .topic-page .topic-card { padding:20px; } .topic-page .topic-question,.topic-page .topic-solution { padding:16px; } }
@media print { .topic-page .site-header,.topic-page .paper-archive-bar,.topic-page .topic-sidebar,.topic-page .topic-tuition,.topic-page footer,.topic-page .topic-jumps { display:none; } .topic-page .topic-layout { display:block; } .topic-page .topic-hero,.topic-page .topic-question { background:#fff; color:#111; } .topic-page .topic-hero h1,.topic-page .topic-hero p { color:#111; } }