/* ============================================================
   LEARN · the hub (/learn) and every /learn/* page.
   Built on tokens.css, components.css and pages.css.
   The pages are written by _dev/tools/build-learn.js.
   ============================================================ */

/* ── Hub ── */
.learn-intro { max-width: 760px; }
.learn-intro .lead { margin-top: var(--space-5); }
.learn-h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); margin-bottom: var(--space-6); }
.learn-intro + .learn-h2 { margin-top: var(--space-8); }
.learn-sub { max-width: 62ch; margin: calc(-1 * var(--space-4)) 0 var(--space-6); color: var(--ink-muted); }

.learn-start, .learn-cards { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .learn-start, .learn-cards { grid-template-columns: 1fr 1fr; } }
.learn-card { height: 100%; }
.learn-card .way-title { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); }
.learn-card.is-large { padding: var(--space-7) var(--space-6); }
.learn-card.is-large .way-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); }
.learn-card p:not(.learn-time) { color: var(--ink-muted); }
.learn-card .learn-time {
    margin-top: auto; padding-top: var(--space-2);
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
}
.learn-group {
    margin: var(--space-7) 0 var(--space-4);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent-text);
}
.learn-h2 + .learn-group { margin-top: 0; }

.books { max-width: 760px; border-top: 1px solid var(--line); }
/* Ten books: two columns from 768 px (corrections v6) */
@media (min-width: 768px) { .books { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); } }
.book { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); color: var(--ink-muted); }
.book strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--ink); }

/* ── Article, method and research pages ── */
.learn-article {
    max-width: 68ch; margin: 0 auto;
    font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem); /* 17px on phones, 18 to 19 on desktop */
}
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--text-sm); color: var(--ink-muted); }
.crumbs li + li::before { content: "\203A" / ""; margin: 0 var(--space-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent-text); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.learn-h1 {
    margin-top: var(--space-3);
    font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em;
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
    overflow-wrap: break-word;
}
.learn-article .article-meta a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); }
.learn-article .article-meta a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.learn-article .article-meta img { flex: none; object-position: 50% 20%; }

.short-answer {
    margin-top: var(--space-6); padding: var(--space-5) var(--space-6);
    background: var(--surface-2); border-radius: 14px;
    font-size: var(--text-lg); line-height: 1.55;
}
.short-answer a { text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }

.toc { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.toc-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.toc ol { margin-top: var(--space-2); font-size: var(--text-sm); }
@media (min-width: 768px) { .toc ol { columns: 2; column-gap: var(--space-6); } }
.toc li { break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.25em; }
.toc a:hover { text-decoration-color: var(--accent); }

.learn-body { margin-top: var(--space-7); line-height: 1.7; }
.learn-body > * + * { margin-top: var(--space-4); }
.learn-body h2 {
    margin-top: var(--space-8);
    font-family: var(--font-display); font-weight: 400; line-height: 1.15;
    font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
    scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}
.learn-body h3 {
    margin-top: var(--space-6);
    font-family: var(--font-display); font-weight: 500; line-height: 1.2; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
    scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}
.learn-body h3.sublabel {
    margin-top: var(--space-6);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-muted);
}
.learn-body h2 + *, .learn-body h3 + * { margin-top: var(--space-3); }
.learn-body ul, .learn-body ol { padding-left: 1.3em; }
.learn-body ul { list-style: disc; }
.learn-body ol { list-style: decimal; }
.learn-body li + li { margin-top: var(--space-2); }
.learn-body li::marker { color: var(--ink-muted); }
.learn-body .note { font-size: 0.92em; color: var(--ink-muted); font-style: italic; padding-left: var(--space-4); border-left: 2px solid var(--line); }
.learn-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }
.learn-body a, .sources a { overflow-wrap: anywhere; }

.related { margin-top: var(--space-8); }
.related > h2, .sources > h2 {
    margin-bottom: var(--space-4);
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem);
}
.related .learn-card { padding: var(--space-5); }

.sources { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.sources ol { padding-left: 1.6em; list-style: decimal; font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); }
.sources li + li { margin-top: var(--space-3); }
.sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

.learn-end .learn-end-lead { max-width: 56ch; margin: 0 auto var(--space-5); text-align: center; font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; }
.learn-end .learn-end-lead a { text-decoration: underline; text-underline-offset: 0.2em; }
.learn-article .article-meta > span { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.35em; }

/* ── Photo hero on Learn pages: content lines up with the article column ── */
.learn-hero .f-hero-content { padding-left: var(--gutter); padding-right: var(--gutter); }
.learn-hero-in { width: 100%; max-width: 1400px; margin: 0 auto; }
.learn-hero .learn-article { margin: 0 auto; }
.learn-hero .learn-h1 { color: var(--on-dark); }
.learn-hero .crumbs ol { color: var(--on-dark-muted); }
.learn-hero .article-meta { color: var(--on-dark-muted); }
.learn-hero .article-meta a { color: var(--on-dark); }
.learn-hero .lead { max-width: 640px; margin-top: var(--space-4); }
.learn-hero-title { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5rem); }
.learn-after { padding-top: var(--space-7); }
.learn-after .short-answer { margin-top: 0; }