.learning-section, .guide-hub { padding-block: 80px 32px; }
.learning-intro { max-width: 720px; color: var(--muted); margin-top: 24px; font-size: 1.08rem; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 40px 24px; }
.guide-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.guide-card h3 { font-size: 1.4rem; letter-spacing: -.025em; }
.guide-card h3 a:hover { color: var(--accent); }
.guide-card p { color: var(--muted); margin-block: 18px; }
.guide-card > .text-link { align-self: flex-start; margin-top: auto; color: var(--accent); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; color: var(--muted); font-size: .85rem; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 4px; }
.guide-hub .eyebrow, .guide-heading .eyebrow, .related-guides .eyebrow { color: var(--accent); }
.guide-hub h1, .guide-heading h1 { max-width: 880px; font-size: clamp(2.6rem, 5vw, 4.5rem); letter-spacing: -.045em; margin-top: 24px; }
.guide-hub h1 em { color: var(--accent); }
.guide-intro { max-width: 760px; color: var(--muted); font-size: 1.15rem; margin-top: 24px; }
.guide-intro a, .guide-prose a { text-decoration: underline; text-underline-offset: 4px; color: var(--accent); }
.learning-article { max-width: 840px; padding-block: 40px 72px; }
.guide-heading { margin-bottom: 40px; }
.guide-byline { color: var(--muted); font-size: .85rem; margin-top: 24px; }
.guide-byline a { text-decoration: underline; text-underline-offset: 4px; }
.guide-prose { max-width: 740px; font-size: 1.075rem; line-height: 1.8; }
.guide-prose p { margin-block: 20px; }
.guide-prose h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); letter-spacing: -.025em; line-height: 1.2; margin-top: 48px; }
.guide-prose h3 { font-size: 1.35rem; line-height: 1.3; margin-top: 32px; }
.guide-prose li { margin-block: 12px; padding-left: 4px; }
.guide-prose ol, .guide-prose ul { padding-left: 24px; }
.guide-prose .guide-answer { padding: 24px 28px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.guide-exercise { background: var(--paper); color: var(--ink); padding: 28px; margin-top: 40px; border-radius: var(--radius-card); }
.guide-exercise h2 { margin-top: 0; }
.guide-exercise p:last-child { margin-bottom: 0; }
.guide-table-wrap { overflow-x: auto; margin-block: 24px; }
.guide-prose table { width: 100%; min-width: 480px; border-collapse: collapse; text-align: left; font-size: .95rem; }
.guide-prose caption { text-align: left; color: var(--muted); font-size: .85rem; margin-bottom: 12px; }
.guide-prose th { color: var(--accent); background: var(--surface); }
.guide-prose th, .guide-prose td { padding: 16px; border: 1px solid var(--line); vertical-align: top; }
.related-guides { border-top: 1px solid var(--line); padding-top: 48px; }
.related-guides h2 { margin-top: 20px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: .85rem; }
.site-footer nav a { padding-block: 12px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1000px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .guide-grid { grid-template-columns: 1fr; }
  .learning-section, .guide-hub { padding-top: 48px; }
  .breadcrumbs { margin-bottom: 32px; }
  .guide-card, .guide-exercise { padding: 24px; }
  .guide-prose .guide-answer { padding: 20px; }
  .guide-intro { font-size: 1.05rem; }
  .learning-article { padding-bottom: 48px; }
}