@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

.resource-card.current-resource { background: #fff5d8; border-color: #dfc46d; }
.resource-card.current-resource:hover { background: var(--yellow); }
.paper-citation { margin-top: 14px !important; font: 11px/1.55 var(--mono); color: var(--ink-soft); }
.paper-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.paper-actions a { display: inline-block; padding: 9px 12px; border: 1px solid var(--line); color: var(--teal); font: 11px var(--mono); }
.paper-actions a:hover { border-color: var(--coral-dark); color: var(--coral-dark); }
.evidence-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.evidence-strip span { padding: 8px 10px; border: 1px solid var(--line); font: 11px var(--mono); }
.evidence-strip .fact { background: var(--mint); }
.evidence-strip .inference { background: #fff5d8; }
.audit-matrix { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 13px; }
.audit-matrix th, .audit-matrix td { padding: 12px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.audit-matrix th { background: var(--ink); color: var(--mint); font: 11px var(--mono); }
.audit-matrix td:first-child { color: var(--coral-dark); font-weight: 800; white-space: nowrap; }

:root { --ink: #12232d; --ink-soft: #29404a; --paper: #f7f5ef; --paper-deep: #ece9df; --coral: #ee6a4d; --coral-dark: #cb4d38; --mint: #bce2d8; --teal: #2e7475; --yellow: #f3c766; --line: rgba(18,35,45,.18); --white: #fffdf8; --mono: 'DM Mono', monospace; --sans: 'Manrope', 'Noto Sans TC', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
.section-wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.site-header { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(32px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); background: rgba(247,245,239,.9); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; line-height: 1.15; letter-spacing: .02em; }
.brand em { color: var(--coral-dark); font-style: normal; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--mint); font: 700 20px/1 var(--mono); }
.main-nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 600; }
.main-nav a, .text-link { transition: color .2s ease; }
.main-nav a:hover, .text-link:hover { color: var(--coral-dark); }
.nav-pill { padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 700; }
.nav-pill span, .button span { margin-left: 8px; }
.hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; min-height: 620px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.eyebrow { margin: 0 0 18px; color: var(--coral-dark); font: 500 12px/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--coral); vertical-align: 1px; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 620px; margin-bottom: 24px; font-size: clamp(48px, 7vw, 91px); line-height: .99; letter-spacing: -.07em; font-weight: 800; }
h1 span, h2 span { color: var(--coral-dark); }
.hero-lede { max-width: 560px; margin-bottom: 32px; color: var(--ink-soft); font-size: 17px; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; padding: 13px 18px; border-radius: 4px; font-size: 14px; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--coral); color: var(--white); }
.button-primary:hover { background: var(--coral-dark); }
.button-light { background: var(--paper); color: var(--ink); }
.text-link { border-bottom: 1px solid var(--ink); padding-bottom: 3px; font-size: 14px; font-weight: 700; }
.hero-board { padding: 25px; background: var(--ink); color: var(--white); min-height: 372px; position: relative; overflow: hidden; box-shadow: 14px 14px 0 var(--mint); }
.hero-board::before { content: ''; position: absolute; right: -84px; top: -100px; width: 230px; height: 230px; border: 1px solid rgba(188,226,216,.55); border-radius: 50%; box-shadow: 0 0 0 22px rgba(188,226,216,.1), 0 0 0 45px rgba(188,226,216,.08); }
.board-top { display: flex; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.2); color: var(--mint); font: 11px var(--mono); letter-spacing: .1em; }
.board-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; padding: 55px 0 45px; position: relative; z-index: 1; }
.flow-step { flex: 1; min-width: 0; }
.flow-step strong { display: block; margin-bottom: 12px; color: var(--coral); font: 500 12px var(--mono); }
.flow-step span { display: block; font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.flow-step small { display: block; margin-top: 9px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.45; }
.flow-step.active span { color: var(--mint); }
.flow-line { flex: 0 0 17px; height: 1px; margin-top: 7px; background: rgba(255,255,255,.32); }
.board-note { display: flex; align-items: center; gap: 12px; position: absolute; right: 25px; bottom: 22px; color: rgba(255,255,255,.72); font-size: 12px; }
.note-pin { color: var(--yellow); font-size: 18px; }
.signal-bar { background: var(--coral); color: var(--white); }
.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.8fr; align-items: center; min-height: 108px; }
.signal-grid div { display: flex; align-items: baseline; gap: 10px; border-right: 1px solid rgba(255,255,255,.4); padding: 0 22px; }
.signal-grid div:first-child { padding-left: 0; }
.signal-grid strong { font: 500 30px var(--mono); }
.signal-grid span { font-size: 12px; }
.signal-grid p { margin: 0; padding-left: 28px; font-size: 13px; line-height: 1.5; }
.course-guide-section { padding-top: 116px; padding-bottom: 116px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.guide-card { min-height: 230px; padding: 25px; border: 1px solid var(--line); background: var(--white); position: relative; }
.guide-card.guide-wide { grid-column: span 2; min-height: 190px; }
.guide-card.guide-project { background: var(--mint); }
.guide-index { display: block; margin-bottom: 35px; color: var(--coral-dark); font: 12px var(--mono); }
.guide-card h3 { margin-bottom: 12px; font-size: 21px; letter-spacing: -.03em; }
.guide-card p { max-width: 690px; margin-bottom: 18px; color: var(--ink-soft); font-size: 15px; }
.guide-line { display: flex; align-items: baseline; gap: 15px; padding-top: 16px; border-top: 1px solid var(--line); }
.guide-start { margin-top: 24px; }
.guide-line strong { color: var(--teal); font: 500 22px var(--mono); }.guide-line span { color: var(--ink-soft); font-size: 13px; }
.compact-list { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14px; }.compact-list li { margin-bottom: 8px; }.compact-list.numbered { list-style: decimal-leading-zero; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 7px; }.guide-tags span { padding: 7px 10px; border: 1px solid rgba(18,35,45,.25); color: var(--teal); font: 11px var(--mono); }
.roadmap-section, .weeks-section, .resources-section { padding-top: 116px; padding-bottom: 116px; }
.section-heading { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 42px; }
.section-heading h2, .split-copy h2, .seminar-copy h2, .assessment-inner h2, .closing-inner h2 { margin-bottom: 0; font-size: clamp(32px, 4vw, 53px); line-height: 1.1; letter-spacing: -.055em; }
.section-heading > p { max-width: 340px; margin-bottom: 3px; color: var(--ink-soft); font-size: 15px; }
.roadmap-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.roadmap-card { min-height: 244px; padding: 20px; color: var(--ink); position: relative; overflow: hidden; }
.roadmap-card::after { content: ''; position: absolute; width: 150px; height: 150px; border: 1px solid rgba(18,35,45,.25); border-radius: 50%; right: -73px; bottom: -70px; box-shadow: 0 0 0 14px rgba(18,35,45,.07); }
.roadmap-card p { margin: 45px 0 7px; font: 11px var(--mono); }
.roadmap-card h3 { margin: 0 0 11px; font-size: 17px; letter-spacing: -.02em; }
.roadmap-card strong { display: block; max-width: 145px; font-size: 14px; line-height: 1.5; }
.card-number { position: absolute; top: 19px; right: 20px; font: 12px var(--mono); }
.card-arrow { position: absolute; right: 19px; bottom: 16px; font-size: 21px; }
.card-understand { background: var(--mint); }.card-communicate { background: #d7e5e6; }.card-diagnose { background: var(--yellow); }.card-explain { background: #f4c2a7; }.card-decide { background: #c5bff0; }
.weeks-section { background: var(--paper-deep); width: 100%; padding-left: max(32px, calc((100vw - 1180px) / 2)); padding-right: max(32px, calc((100vw - 1180px) / 2)); }
.weeks-section .section-heading { max-width: 1180px; margin-left: auto; margin-right: auto; }
.week-filter { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.filter-button { border: 1px solid var(--line); background: transparent; padding: 8px 12px; border-radius: 999px; color: var(--ink-soft); cursor: pointer; font: 12px var(--sans); }
.filter-button:hover, .filter-button.active { border-color: var(--ink); background: var(--ink); color: var(--white); }
.week-list { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.week-item { display: grid; grid-template-columns: 70px 1fr 34px; gap: 18px; align-items: center; padding: 21px 24px; border: 1px solid rgba(18,35,45,.14); background: var(--paper); transition: transform .2s ease, border-color .2s ease; }
.week-item:hover { transform: translateX(4px); border-color: var(--ink); }
.week-link { color: inherit; }.week-pending { opacity: .72; }.week-pending:hover { transform: none; border-color: rgba(18,35,45,.14); }.week-link .week-open { transition: transform .2s ease; }.week-link:hover .week-open { transform: translate(3px, -3px); }
.week-code { color: var(--coral-dark); font: 500 13px var(--mono); }
.week-item h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.02em; }
.week-item p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.week-stage { color: var(--teal); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.week-open { color: var(--coral-dark); font-size: 20px; text-align: right; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 670px; }
.split-visual { display: flex; flex-direction: column; justify-content: space-between; padding: 42px max(32px, calc((100vw - 1180px) / 2)) 42px 10%; background: var(--teal); color: var(--white); position: relative; overflow: hidden; }
.split-visual::before { content: ''; position: absolute; width: 470px; height: 470px; right: -190px; top: 105px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.07), 0 0 0 70px rgba(255,255,255,.05); }
.visual-label { font: 11px var(--mono); color: var(--mint); letter-spacing: .1em; }
.workbook-stamp { position: relative; z-index: 1; font: 800 clamp(46px, 6vw, 88px)/.92 var(--sans); letter-spacing: -.09em; transform: rotate(-5deg); }
.workbook-stamp em { color: var(--yellow); font-style: normal; }
.visual-caption { position: relative; z-index: 1; max-width: 220px; color: rgba(255,255,255,.7); font-size: 13px; }
.split-copy { padding: 115px max(32px, calc((100vw - 1180px) / 2)) 100px 11%; }
.split-copy h2 { max-width: 530px; margin-bottom: 25px; }
.split-copy > p { max-width: 490px; color: var(--ink-soft); }
.workbook-list { max-width: 520px; padding: 0; margin: 40px 0 30px; list-style: none; }
.workbook-list li { display: flex; gap: 18px; padding: 17px 0; border-top: 1px solid var(--line); }
.workbook-list li > span { color: var(--coral-dark); font: 12px var(--mono); }
.workbook-list strong, .workbook-list small { display: block; }
.workbook-list strong { margin-bottom: 3px; font-size: 14px; }
.workbook-list small { color: var(--ink-soft); font-size: 13px; }
.seminar-section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; padding-top: 116px; padding-bottom: 116px; }
.seminar-callout { padding: 42px 42px 38px; background: var(--yellow); position: relative; }
.quote-mark { position: absolute; top: 10px; left: 28px; color: rgba(18,35,45,.35); font: 800 76px/1 Georgia, serif; }
.seminar-callout p { position: relative; max-width: 450px; margin: 40px 0 25px; font-size: clamp(22px, 3vw, 34px); font-weight: 800; line-height: 1.2; letter-spacing: -.04em; }
.quote-source { color: var(--ink-soft); font: 11px var(--mono); }
.seminar-copy h2 { margin-bottom: 24px; }.seminar-copy > p:not(.eyebrow) { max-width: 480px; color: var(--ink-soft); }
.five-questions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }.five-questions span { padding: 8px 10px; border: 1px solid var(--line); color: var(--teal); font: 11px var(--mono); }
.assessment-section { background: var(--ink); color: var(--white); }.assessment-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; padding-top: 116px; padding-bottom: 116px; align-items: start; }.assessment-inner .eyebrow { color: var(--mint); }.assessment-inner h2 span { color: var(--yellow); }.assessment-lede { max-width: 360px; margin-top: 25px; color: rgba(255,255,255,.65); }
.assessment-table { border-top: 1px solid rgba(255,255,255,.3); }.assessment-row { display: grid; grid-template-columns: 1fr 70px; gap: 20px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.74); font-size: 14px; }.assessment-row strong { color: var(--mint); font: 500 14px var(--mono); text-align: right; }.assessment-row.header { padding: 0 0 10px; border: 0; color: var(--mint); font: 11px var(--mono); text-transform: uppercase; }.assessment-row.header span:last-child { text-align: right; }.assessment-row.accent { color: var(--white); }.assessment-row.accent strong { color: var(--yellow); }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.resource-card { display: grid; grid-template-columns: 34px 1fr 20px; gap: 12px; padding: 25px; border: 1px solid var(--line); min-height: 210px; transition: background .2s ease, transform .2s ease; }.resource-card:hover { background: var(--mint); transform: translateY(-4px); }.resource-card > span { color: var(--coral-dark); font: 12px var(--mono); }.resource-card small { color: var(--teal); font: 11px var(--mono); }.resource-card h3 { margin: 10px 0 8px; font-size: 18px; line-height: 1.2; }.resource-card p { margin: 0; color: var(--ink-soft); font-size: 13px; }.resource-card b { color: var(--coral-dark); font-size: 20px; text-align: right; }.resource-action { display: inline-block; margin-top: 18px; color: var(--coral-dark); font: 700 11px var(--mono); letter-spacing: .02em; }
.preclass-reading { padding-top: 24px; padding-bottom: 24px; }.preclass-reading-inner { display: grid; grid-template-columns: minmax(220px, .65fr) 1.35fr; gap: 28px; align-items: center; padding: 25px 28px; border: 1px solid #dfc46d; background: #fff5d8; }.preclass-reading h2 { margin: 8px 0 9px; font-size: clamp(25px, 3vw, 38px); }.preclass-reading-note { margin: 0; color: var(--ink-soft); font-size: 13px; }.preclass-paper-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.preclass-paper-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid rgba(52,64,62,.16); }.preclass-paper-list li:last-child { border-bottom: 0; }.preclass-paper-list li > span { color: var(--coral-dark); font: 11px var(--mono); }.preclass-paper-list strong { font-size: 13px; line-height: 1.55; }.preclass-reading-empty { padding: 15px 17px; border: 1px dashed rgba(52,64,62,.3); color: var(--ink-soft); font-size: 13px; }.preclass-reading-link { grid-column: 2; justify-self: start; margin-top: -8px; }
.closing-section { background: var(--coral); color: var(--white); }.closing-inner { width: min(760px, calc(100% - 64px)); padding: 120px 0 126px; margin: 0 auto; text-align: center; }.closing-inner .eyebrow { color: var(--yellow); }.closing-inner h2 { font-size: clamp(43px, 7vw, 82px); }.closing-inner h2 span { color: var(--ink); }.closing-inner > p:not(.eyebrow) { max-width: 480px; margin: 25px auto 32px; font-size: 17px; }.site-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 28px; padding-bottom: 28px; color: var(--ink-soft); font: 11px var(--mono); }
.section-note { max-width: 1180px; margin: 20px auto 0; color: var(--ink-soft); font: 12px var(--mono); }
.detail-page { background: var(--paper); }.detail-hero { padding: 90px 0 76px; border-bottom: 1px solid var(--line); }.detail-hero h1 { max-width: 820px; margin-bottom: 22px; font-size: clamp(43px, 6vw, 76px); }.detail-lede { max-width: 700px; color: var(--ink-soft); font-size: 18px; }.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }.detail-meta span { padding: 8px 11px; border: 1px solid var(--line); color: var(--teal); font: 11px var(--mono); }
.lecture-deck { padding: 82px 0 92px; }.deck-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 25px; }.deck-heading h2 { margin: 0; font-size: clamp(31px, 4vw, 50px); line-height: 1.08; letter-spacing: -.055em; }.deck-heading h2 span { color: var(--coral-dark); }.deck-note { margin: 0 0 5px; color: var(--ink-soft); font: 11px var(--mono); }.deck-frame { overflow: hidden; background: var(--ink); color: var(--white); box-shadow: 14px 14px 0 var(--mint); }.deck-progress { height: 5px; background: rgba(255,255,255,.12); }.deck-progress span { display: block; height: 100%; width: 10%; background: var(--coral); transition: width .25s ease; }.deck-slides { min-height: 455px; }.deck-slide { display: none; min-height: 455px; padding: 45px clamp(28px, 7vw, 92px) 37px; position: relative; overflow: hidden; }.deck-slide::after { content: ''; position: absolute; width: 340px; height: 340px; right: -155px; bottom: -195px; border: 1px solid rgba(188,226,216,.32); border-radius: 50%; box-shadow: 0 0 0 24px rgba(188,226,216,.08), 0 0 0 48px rgba(188,226,216,.05); }.deck-slide.is-active { display: block; animation: deck-in .3s ease both; }.slide-number, .slide-kicker { color: var(--mint); font: 11px var(--mono); letter-spacing: .1em; }.slide-number { margin-bottom: 60px; }.slide-kicker { margin-bottom: 18px; color: var(--coral); }.deck-slide h3 { max-width: 760px; margin-bottom: 22px; font-size: clamp(30px, 5vw, 62px); line-height: 1.06; letter-spacing: -.06em; }.deck-slide h3 span { color: var(--coral); }.slide-lead { max-width: 750px; margin-bottom: 26px; color: var(--mint); font-size: clamp(34px, 6vw, 72px); line-height: 1; font-weight: 800; letter-spacing: -.06em; }.slide-foot { position: absolute; left: clamp(28px, 7vw, 92px); bottom: 37px; max-width: 650px; margin: 0; color: rgba(255,255,255,.65); font-size: 14px; }.slide-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 750px; margin-top: 42px; }.slide-flow span { padding: 12px 15px; border: 1px solid rgba(188,226,216,.45); color: var(--mint); font-weight: 700; }.slide-flow b { color: var(--coral); font-size: 20px; }.slide-compare, .slide-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; gap: 10px; margin-top: 38px; }.slide-compare > div, .slide-columns > div { padding: 20px; background: rgba(255,255,255,.08); border-left: 3px solid var(--coral); }.slide-compare small, .slide-columns small { display: block; margin-bottom: 8px; color: var(--mint); font: 11px var(--mono); }.slide-compare strong { font-size: 23px; }.slide-columns strong { font-size: 19px; line-height: 1.55; }.slide-pills { display: flex; flex-wrap: wrap; gap: 9px; max-width: 720px; margin-top: 35px; }.slide-pills span { padding: 11px 15px; border-radius: 999px; background: var(--mint); color: var(--ink); font-weight: 700; }.slide-pills-large { max-width: 610px; }.slide-pills-large span:nth-child(3n) { background: var(--yellow); }.slide-quote { max-width: 680px; margin: 38px 0 0; padding-left: 20px; border-left: 3px solid var(--yellow); color: var(--yellow); font-size: clamp(22px, 3vw, 34px); font-weight: 800; line-height: 1.25; }.equity-equation { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; max-width: 820px; margin-top: 42px; }.equity-equation span, .equity-equation strong { padding: 15px 18px; background: rgba(255,255,255,.08); }.equity-equation strong { background: var(--coral); color: var(--white); }.equity-equation b { color: var(--mint); font-size: 24px; }.slide-cycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; gap: 8px; margin-top: 40px; }.slide-cycle span { padding: 18px 14px; background: var(--mint); color: var(--ink); font-weight: 800; }.slide-cycle span:nth-child(2) { background: var(--yellow); }.slide-cycle span:nth-child(3) { background: #d7e5e6; }.slide-cycle span:nth-child(4) { background: #f4c2a7; }.slide-tasks { max-width: 650px; margin: 34px 0 0; padding-left: 25px; color: var(--mint); font-size: 20px; font-weight: 700; }.slide-tasks li { margin-bottom: 10px; }.deck-controls { display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; border-top: 1px solid rgba(255,255,255,.16); color: var(--mint); font: 12px var(--mono); }.deck-button { width: 40px; height: 34px; border: 1px solid rgba(188,226,216,.5); background: transparent; color: var(--mint); cursor: pointer; font-size: 20px; }.deck-button:hover, .deck-button:focus-visible { border-color: var(--yellow); color: var(--yellow); outline: none; }
@keyframes deck-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.detail-shell { display: grid; grid-template-columns: 250px 1fr; gap: 70px; padding-top: 72px; padding-bottom: 100px; }.detail-aside { align-self: start; position: sticky; top: 110px; }.detail-aside p { margin-bottom: 12px; color: var(--coral-dark); font: 11px var(--mono); }.detail-aside a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }.detail-aside a:hover { color: var(--coral-dark); }.detail-content { min-width: 0; }.detail-block { padding-bottom: 60px; margin-bottom: 60px; border-bottom: 1px solid var(--line); }.detail-block:last-child { border-bottom: 0; }.detail-block h2 { margin-bottom: 18px; font-size: clamp(28px, 4vw, 46px); line-height: 1.1; letter-spacing: -.055em; }.detail-block h2 span { color: var(--coral-dark); }.detail-block h3 { margin: 30px 0 10px; font-size: 20px; }.detail-block p { max-width: 760px; color: var(--ink-soft); }.outcome-grid, .paper-grid, .case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.outcome-card, .paper-card, .case-card { padding: 22px; border: 1px solid var(--line); background: var(--white); }.outcome-card strong, .paper-card strong { display: block; margin-bottom: 8px; color: var(--teal); font-size: 16px; }.outcome-card p, .paper-card p, .case-card p { margin: 0; font-size: 14px; }.paper-card.feature { grid-column: span 2; background: var(--yellow); }.paper-card.feature strong { color: var(--ink); }.reading-path { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 28px 0; }.reading-path span { padding: 14px 10px; background: var(--ink); color: var(--mint); font: 11px var(--mono); text-align: center; }.keyword-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 14px; }.keyword-table th, .keyword-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }.keyword-table th { color: var(--teal); font: 11px var(--mono); }.keyword-table td:nth-child(2) { color: var(--coral-dark); font-weight: 700; white-space: nowrap; }.case-card { min-height: 150px; }.case-card h3 { margin: 0 0 8px; font-size: 18px; }.case-card p { color: var(--ink-soft); }.selection-box { padding: 25px; background: var(--mint); }.selection-box ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }.deliverable-list { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }.deliverable-list li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }.deliverable-list span { color: var(--coral-dark); font: 12px var(--mono); }.next-box { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px; background: var(--ink); color: var(--white); }.next-box p { margin: 0; color: rgba(255,255,255,.7); }.next-box a { color: var(--yellow); font-weight: 800; white-space: nowrap; }
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 26px; }.review-card { border: 1px solid var(--line); background: var(--white); }.review-card summary { display: flex; align-items: baseline; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 800; }.review-card summary::-webkit-details-marker { display: none; }.review-card summary::after { content: '+'; margin-left: auto; color: var(--coral-dark); font: 20px var(--mono); }.review-card[open] summary::after { content: '−'; }.review-card summary span { color: var(--coral-dark); font: 11px var(--mono); }.review-card summary em { margin-left: auto; color: var(--teal); font: 11px var(--mono); font-style: normal; font-weight: 500; }.review-card > div { padding: 0 20px 20px; }.review-card p { margin: 0 0 15px; font-size: 14px; }.review-card strong, .review-card small { display: block; }.review-card strong { margin-bottom: 4px; color: var(--coral-dark); font: 11px var(--mono); }.review-card small { color: var(--ink-soft); font-size: 13px; }.review-card.review-accent { background: #fff5d8; }
.detail-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; }.student-notes-page .detail-hero { background: var(--paper-deep); }.student-notes-page .detail-lede { max-width: 760px; }.note-overview { padding-top: 70px; padding-bottom: 26px; }.note-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }.note-overview-card, .note-card { padding: 22px; border: 1px solid var(--line); background: var(--white); }.note-overview-card strong, .note-card strong { display: block; margin-bottom: 8px; color: var(--teal); font-size: 17px; }.note-overview-card p, .note-card p { margin: 0; color: var(--ink-soft); }.note-quote { margin: 28px 0 0; padding: 25px 28px; background: var(--ink); color: var(--white); }.note-quote small { display: block; margin-bottom: 8px; color: var(--mint); font: 11px var(--mono); letter-spacing: .1em; }.note-quote strong { display: block; max-width: 850px; color: var(--yellow); font-size: clamp(22px, 3vw, 34px); line-height: 1.3; }.note-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 25px; }.note-card ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); }.note-card li { margin-bottom: 7px; }.note-callout { margin-top: 25px; padding: 22px; background: var(--yellow); }.note-callout strong { display: block; margin-bottom: 6px; }.note-callout p { margin: 0; color: var(--ink-soft); }.note-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }.note-pills span { padding: 10px 14px; background: var(--mint); color: var(--ink); font-weight: 700; }.note-pills span:nth-child(3n) { background: var(--yellow); }.note-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }.note-process div { min-height: 120px; padding: 18px; background: var(--ink); color: var(--white); }.note-process span { display: block; margin-bottom: 18px; color: var(--mint); font: 11px var(--mono); }.note-process strong { display: block; color: var(--yellow); font-size: 18px; }.note-process p { margin-top: 8px; color: rgba(255,255,255,.72); font-size: 14px; }.note-question-list { margin: 25px 0 0; padding-left: 24px; }.note-question-list li { margin-bottom: 12px; padding-left: 5px; }.note-template { margin-top: 25px; padding: 24px; border: 1px solid var(--line); background: var(--mint); }.note-template p { margin: 0; color: var(--ink-soft); font-weight: 700; }.note-template em { color: var(--coral-dark); font-style: normal; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 50px; }.hero-board { max-width: 720px; }.roadmap-cards { grid-template-columns: repeat(3, 1fr); }.roadmap-card:last-child { grid-column: span 2; }.signal-grid { grid-template-columns: repeat(4, 1fr); }.signal-grid p { display: none; }.split-copy { padding-left: 8%; }.split-visual { padding-left: 8%; }.seminar-section, .assessment-inner { gap: 55px; }.main-nav { gap: 16px; }.nav-pill { display: none; }.detail-shell { grid-template-columns: 1fr; gap: 35px; }.detail-aside { position: static; }.detail-aside a { display: inline-block; margin-right: 15px; border-bottom: 0; }.reading-path { grid-template-columns: repeat(3, 1fr); }.deck-heading { display: block; }.deck-note { margin-top: 17px; }.slide-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }.note-overview-grid, .note-columns { grid-template-columns: 1fr 1fr; }.note-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .section-wrap { width: min(100% - 36px, 1180px); }.site-header { height: 72px; padding: 0 18px; }.main-nav { display: none; }.hero { padding-top: 64px; padding-bottom: 70px; min-height: 0; }.hero-board { padding: 18px; box-shadow: 8px 8px 0 var(--mint); }.board-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 15px; padding: 35px 0 48px; }.flow-line { display: none; }.board-note { position: static; font-size: 11px; }.signal-grid { min-height: 92px; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px 0; }.signal-grid div, .signal-grid div:first-child { border: 0; padding: 0; }.signal-grid strong { font-size: 24px; }.course-guide-section, .roadmap-section, .weeks-section, .resources-section { padding-top: 78px; padding-bottom: 78px; }.section-heading { display: block; }.section-heading > p { margin-top: 22px; }.guide-grid, .outcome-grid, .paper-grid, .case-grid, .review-grid { grid-template-columns: 1fr; }.guide-card.guide-wide, .paper-card.feature { grid-column: auto; }.roadmap-cards { grid-template-columns: 1fr 1fr; }.roadmap-card { min-height: 205px; }.roadmap-card:last-child { grid-column: auto; }.week-list { grid-template-columns: 1fr; }.week-filter { justify-content: flex-start; margin-top: 25px; }.week-item { grid-template-columns: 45px 1fr 20px; gap: 10px; padding: 17px 15px; }.week-item p { font-size: 12px; }.split-section, .seminar-section, .assessment-inner { grid-template-columns: 1fr; }.split-visual { min-height: 390px; padding: 30px 25px; }.split-copy { padding: 75px 25px; }.seminar-section { gap: 50px; padding-top: 78px; padding-bottom: 78px; }.seminar-callout { padding: 30px 25px; }.assessment-inner { padding-top: 78px; padding-bottom: 78px; gap: 45px; }.resource-grid { grid-template-columns: 1fr; }.closing-inner { width: calc(100% - 36px); padding: 82px 0 88px; }.site-footer { width: calc(100% - 36px); display: block; }.site-footer span { display: block; margin-bottom: 8px; }.detail-hero { padding-top: 62px; }.detail-hero-actions { align-items: flex-start; }.lecture-deck { padding-top: 55px; padding-bottom: 65px; }.deck-frame { box-shadow: 8px 8px 0 var(--mint); }.deck-slides, .deck-slide { min-height: 515px; }.deck-slide { padding: 30px 22px 34px; }.slide-number { margin-bottom: 52px; }.slide-flow, .slide-compare, .slide-columns, .equity-equation { margin-top: 30px; }.slide-flow { display: grid; grid-template-columns: 1fr 20px 1fr; gap: 8px; }.slide-flow span { padding: 10px 8px; font-size: 13px; }.slide-flow b { text-align: center; }.slide-compare, .slide-columns { grid-template-columns: 1fr; }.slide-pills span { padding: 9px 11px; font-size: 13px; }.equity-equation { display: grid; grid-template-columns: 1fr 20px 1fr; gap: 8px; font-size: 13px; }.equity-equation strong { grid-column: 1 / -1; text-align: center; }.slide-tasks { font-size: 18px; }.slide-foot { left: 22px; right: 22px; bottom: 34px; font-size: 13px; }.deck-controls { padding-left: 17px; padding-right: 17px; }.detail-shell { padding-top: 50px; }.reading-path { grid-template-columns: 1fr 1fr; }.keyword-table { font-size: 12px; }.keyword-table th, .keyword-table td { padding: 9px 6px; }.keyword-table td:nth-child(2) { white-space: normal; }.review-card summary { display: block; }.review-card summary::after { float: right; }.review-card summary em { display: block; margin: 6px 0 0 23px; }.next-box { display: block; }.next-box a { display: inline-block; margin-top: 15px; }.note-overview { padding-top: 50px; }.note-overview-grid, .note-columns, .note-process { grid-template-columns: 1fr; }.note-quote { padding: 22px; }.note-process div { min-height: 100px; } }
@media (max-width: 900px) { .preclass-reading-inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .preclass-reading { padding-top: 16px; padding-bottom: 16px; }.preclass-reading-inner { padding: 21px 20px; }.preclass-paper-list strong { font-size: 12px; }.preclass-reading-link { grid-column: auto; margin-top: 0; } }