/* Study library, on top of site.css and home.css */
.library { padding-bottom: 64px; }
.lib-hero { padding: 48px 0 26px; max-width: 760px; }
.lib-hero h1 { margin-top: 8px; max-width: 22ch; }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lib-grid { grid-template-columns: 1fr; } }
.lib-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.lib-title { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--ink); text-decoration: none; line-height: 1.2; }
.lib-title:hover { color: var(--accent); }
.lib-meta { margin: 0; color: var(--muted); font-size: 0.85rem; }
.lib-sum { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.lib-card .cr-by { margin-top: auto; padding-top: 10px; }
.lib-empty { padding: 26px; border-radius: 16px; border: 1px dashed var(--line-strong); color: var(--ink-2); }
.lib-how { margin-top: 48px; max-width: 760px; }
.lib-how h2, .lib-h2 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin: 30px 0 12px; }
.lib-how ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }

.cr-by { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.cr-by span { display: flex; flex-direction: column; line-height: 1.25; }
.cr-by strong { font-size: 0.92rem; }
.cr-by small { color: var(--muted); font-size: 0.8rem; }
.cr-photo { flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--serif); font-weight: 600; }
.cr-photo img { width: 100%; height: 100%; object-fit: cover; }
.cr-photo.sm { width: 36px; height: 36px; font-size: 1rem; }
.cr-photo.md { width: 72px; height: 72px; font-size: 1.8rem; }
.cr-photo.lg { width: 132px; height: 132px; font-size: 3rem; }

.crumbs { padding-top: 34px; font-size: 0.88rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.lib-study { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; padding-top: 14px; }
@media (max-width: 860px) { .lib-study { grid-template-columns: 1fr; } }
.lib-study h1 { margin-top: 8px; max-width: none; }
.lib-skills { color: var(--ink-2); }
.lib-study .cta-row { margin-top: 18px; }
.lib-weeks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lib-weeks li { display: flex; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.lib-weeks .wk-n { flex: none; width: 64px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); padding-top: 2px; }
.lib-weeks div { display: flex; flex-direction: column; gap: 2px; }
.lib-weeks div span { color: var(--muted); font-size: 0.9rem; }
.lib-author { position: sticky; top: 90px; }
.cr-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); margin-top: 8px; }
.cr-name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--ink); text-decoration: none; margin-top: 6px; }
.cr-title, .cr-org { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.cr-bio { margin: 6px 0; color: var(--ink-2); font-size: 0.92rem; }
.cr-profile { display: flex; gap: 32px; align-items: flex-start; padding: 22px 0 10px; max-width: 900px; }
@media (max-width: 640px) { .cr-profile { flex-direction: column; gap: 16px; } }
.cr-profile h1 { margin-top: 6px; }
.cr-bio-full { white-space: pre-line; color: var(--ink-2); max-width: 64ch; }