:root { scroll-behavior: smooth; }
.course-directory-page { --page: 1320px; }
.course-directory { max-width: var(--page); margin: 0 auto; padding: 62px 32px 88px; }
.course-directory-hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(360px,.75fr); gap: 64px; align-items: end; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.course-directory-hero p { margin: 0 0 14px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.course-directory-hero h1 { margin: 0; color: var(--ink); font-size: clamp(36px,5vw,64px); line-height: 1.12; letter-spacing: -.05em; }
.course-directory-hero > div > span { display: block; max-width: 720px; margin-top: 20px; color: #626d69; font-size: 15px; line-height: 1.9; }
.course-directory-hero dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; }
.course-directory-hero dl div { padding-left: 20px; border-left: 1px solid var(--line); }
.course-directory-hero dt { color: var(--ink); font-size: 25px; font-weight: 700; }
.course-directory-hero dd { margin: 5px 0 0; color: #808680; font-size: 11px; }
.course-jump-nav { position: sticky; z-index: 8; top: 76px; display: grid; grid-template-columns: repeat(6,1fr); margin: 0; border-bottom: 1px solid var(--line); background: rgba(248,244,236,.96); backdrop-filter: blur(14px); }
.course-jump-nav a { padding: 18px 12px; color: #59635f; text-align: center; font-size: 12px; font-weight: 650; }
.course-jump-nav a:hover,.course-jump-nav a:focus-visible { color: var(--accent); background: #f3e9df; outline: none; }
.course-access-note { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: #7a807b; font-size: 11px; }
.course-access-note .material-symbols-rounded { color: var(--accent); font-size: 17px; }
.course-series { --series-accent: #b64f25; scroll-margin-top: 136px; padding: 70px 0; border-bottom: 1px solid var(--line); }
.course-series--caidao { --series-accent: #315f7e; }.course-series--qa { --series-accent: #55745d; }.course-series--writing { --series-accent: #916b33; }.course-series--zhihu { --series-accent: #566b8a; }.course-series--overseas { --series-accent: #716b64; }
.course-series > header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 36px; align-items: end; margin-bottom: 30px; padding-left: 22px; border-left: 4px solid var(--series-accent); }
.course-series > header span { color: var(--series-accent); font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.course-series > header h2 { margin: 7px 0 6px; color: var(--ink); font-size: 30px; line-height: 1.25; }
.course-series > header p { max-width: 760px; margin: 0; color: #68716e; font-size: 13px; line-height: 1.75; }
.course-series > header strong { align-self: center; padding: 9px 13px; border: 1px solid color-mix(in srgb,var(--series-accent) 28%,var(--line)); border-radius: 999px; color: var(--series-accent); font-size: 11px; white-space: nowrap; }
.course-essence-inline { display: inline-flex; align-items: center; gap: 4px; margin-top: 11px; color: var(--series-accent); font-size: 11px; font-weight: 700; }
.course-essence-inline .material-symbols-rounded { font-size: 15px; transition: transform .18s ease; }
.course-essence-inline:hover .material-symbols-rounded,.course-essence-inline:focus-visible .material-symbols-rounded { transform: translate(2px,-2px); }
.course-chapter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: start; }.course-chapter-grid--two { grid-template-columns: 1.4fr 1fr; }
.course-chapter { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,253,250,.82); }
.course-chapter h3 { display: flex; justify-content: space-between; margin: 0; padding: 17px 18px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; }.course-chapter h3 span { color: #858a84; font-size: 10px; font-weight: 600; }
.course-chapter ol,.lesson-grid { margin: 0; padding: 0; list-style: none; }
.course-chapter li + li,.lesson-grid li { border-top: 1px solid #ebe5da; }.lesson-grid li:nth-child(-n+2) { border-top: 0; }
.course-chapter a,.lesson-grid a { display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; gap: 10px; align-items: center; min-height: 52px; padding: 10px 16px; color: #45524f; transition: color .18s ease, background .18s ease; }
.course-chapter a:hover,.course-chapter a:focus-visible,.lesson-grid a:hover,.lesson-grid a:focus-visible { color: var(--ink); background: #f4e9df; outline: none; }
.course-chapter b,.lesson-grid b { color: var(--series-accent); font-size: 10px; letter-spacing: .06em; }.course-chapter a span,.lesson-grid a span { font-size: 12px; line-height: 1.5; }.course-chapter i,.lesson-grid i { color: var(--series-accent); font-size: 16px; font-style: normal; opacity: .55; }
.lesson-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,253,250,.82); }.lesson-grid li:nth-child(odd) { border-right: 1px solid #ebe5da; }.lesson-grid--compact a { min-height: 58px; }
.course-essence-link { display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 17px; border: 1px solid color-mix(in srgb,var(--series-accent) 22%,var(--line)); border-radius: 9px; background: color-mix(in srgb,var(--series-accent) 5%,#fffdfa); color: var(--ink); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.course-essence-link > .material-symbols-rounded:first-child { color: var(--series-accent); font-size: 21px; }
.course-essence-link span:nth-child(2) { font-size: 12px; font-weight: 700; }
.course-essence-link small { display: block; margin-bottom: 2px; color: #858b86; font-size: 9px; font-weight: 600; letter-spacing: .08em; }
.course-essence-link i { color: var(--series-accent); font-size: 17px; font-style: normal; }
.course-essence-link:hover,.course-essence-link:focus-visible { border-color: color-mix(in srgb,var(--series-accent) 48%,var(--line)); background: color-mix(in srgb,var(--series-accent) 9%,#fffdfa); outline: none; transform: translateY(-1px); }
.course-directory-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 34px; }.course-directory-footer a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 650; }.course-directory-footer a:hover { color: var(--accent); }.course-directory-footer .material-symbols-rounded { font-size: 17px; }
@media (max-width: 980px) { .course-directory-hero { grid-template-columns: 1fr; gap: 30px; }.course-jump-nav { grid-template-columns: repeat(3,1fr); }.course-chapter-grid,.course-chapter-grid--two { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .course-directory { padding: 36px 18px 64px; }.course-directory-hero { padding-bottom: 28px; }.course-directory-hero h1 { font-size: 36px; }.course-directory-hero > div > span { font-size: 13px; }.course-directory-hero dl div { padding-left: 12px; }.course-directory-hero dt { font-size: 19px; }.course-jump-nav { top: 62px; margin: 0 -18px; }.course-jump-nav a { padding: 13px 6px; font-size: 10px; }.course-access-note { align-items: flex-start; line-height: 1.6; }.course-series { scroll-margin-top: 150px; padding: 46px 0; }.course-series > header { grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; padding-left: 15px; }.course-series > header h2 { font-size: 24px; }.course-series > header strong { justify-self: start; }.lesson-grid { grid-template-columns: 1fr; }.lesson-grid li:nth-child(odd) { border-right: 0; }.lesson-grid li:nth-child(2) { border-top: 1px solid #ebe5da; }.course-directory-footer { flex-direction: column; } }