/* Page composition over the reused TeaHubery hub design system in hub.css. */
.landing-main, .library-main, .prose-main { width: min(92vw, 72rem); margin: 0 auto; flex: 1; }
.landing-main { padding: clamp(3rem, 9vw, 7rem) 0 5rem; }
.language-hero { max-width: 50rem; }
.kicker { margin: 0 0 var(--space-3); color: var(--accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.language-hero h1, .library-head h1, .prose-main h1 { margin: 0; font-family: "ET Book", Georgia, serif; font-size: clamp(2.7rem, 7vw, 5.8rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.hero-lead { max-width: 42rem; margin: var(--space-5) 0 0; color: var(--muted); font-family: "ET Book", Georgia, serif; font-size: clamp(1.2rem, 2.5vw, 1.7rem); line-height: 1.45; }
.hero-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.text-link, .top-link { color: var(--accent); font-weight: 700; }
.quote-panel { margin: clamp(4rem, 10vw, 8rem) 0; padding: clamp(1.5rem, 5vw, 3.5rem); border-left: 3px solid var(--accent); background: var(--accent-tint); }
.quote-panel p { margin: 0; font-family: "ET Book", Georgia, serif; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.35; }
.quote-panel rt { color: var(--accent); font-family: "Lato", sans-serif; font-size: .35em; }
.quote-panel span { display: block; margin-top: var(--space-3); color: var(--muted); font-family: "ET Book", Georgia, serif; font-size: var(--text-lg); font-style: italic; }
.landing-section { scroll-margin-top: 6rem; }
.section-intro { max-width: 46rem; }
.section-intro h2 { margin: 0; font-family: "ET Book", Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; }
.feature-grid, .course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.feature-card, .course-card, .empty-card { border: 1px solid var(--line); border-radius: 12px; background: var(--raised); box-shadow: var(--shadow-sm); }
.feature-card { padding: var(--space-5); }
.feature-card > span, .course-language, .course-count { color: var(--accent); font-family: var(--mono); font-size: var(--text-xs); }
.feature-card h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-lg); }
.feature-card p, .course-card > p { margin: 0; color: var(--muted); }
.library-main { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.library-head { max-width: 48rem; }
.library-head h1 { font-size: clamp(2.5rem, 6vw, 4.7rem); }
.library-head > p:last-child { max-width: 38rem; color: var(--muted); font-family: "ET Book", Georgia, serif; font-size: var(--text-lg); }
.course-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.course-card { display: flex; flex-direction: column; padding: var(--space-5); }
.course-card-head { display: flex; justify-content: space-between; gap: var(--space-3); }
.course-count { color: var(--muted); }
.course-card h2 { margin: var(--space-4) 0 var(--space-2); font-family: "ET Book", Georgia, serif; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 400; }
.course-meta { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-5) 0; color: var(--muted); font-size: var(--text-sm); }
.course-meta dt { color: var(--ink); font-weight: 700; }
.course-meta dd { margin: 0; text-align: right; }
.course-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; flex-wrap: wrap; }
.course-actions span, .loading-copy { color: var(--muted); font-size: var(--text-xs); }
.empty-card { padding: var(--space-6); }
.prose-main { max-width: 44rem; padding: clamp(3rem, 9vw, 7rem) 0; }
.prose-main h1 { font-size: clamp(2.4rem, 6vw, 4.3rem); }
.prose-main > p:not(.kicker) { color: var(--muted); font-family: "ET Book", Georgia, serif; font-size: var(--text-lg); line-height: 1.6; }
.topbar-utils form { display: contents; }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } .language-hero h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }