/* Haiku Journal — Learning section (hub + articles). Uses the site design tokens. */
.learn-hero { max-width: var(--reading-w); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-4); text-align: center; }
.learn-hero .eyebrow { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--persimmon); }
.learn-hero h1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-2xl); line-height: 1.1; margin: var(--space-2) 0 var(--space-3); color: var(--ink); }
.learn-hero p { font-family: var(--serif-body); font-size: var(--fs-md); line-height: 1.7; color: var(--ink-soft); }

.learn-grid { max-width: var(--max-w); margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--space-4); }
.learn-card { display: block; background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-4); text-decoration: none; color: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.learn-card:hover { border-color: var(--moss); transform: translateY(-2px); }
.learn-card .num { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--persimmon); }
.learn-card h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-lg); margin: var(--space-1) 0 var(--space-2); color: var(--ink); }
.learn-card p { font-family: var(--serif-body); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }
.learn-card .go { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--moss); margin-top: var(--space-3); display: inline-block; }

.learn-article { max-width: var(--reading-w); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-4); }
.learn-crumb { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--muted); margin-bottom: var(--space-4); }
.learn-crumb a { color: var(--muted); text-decoration: none; }
.learn-crumb a:hover { color: var(--moss); }
.learn-article > .eyebrow { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--persimmon); }
.learn-article h1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-2xl); line-height: 1.1; margin: var(--space-2) 0 var(--space-3); color: var(--ink); }
.learn-article .lede { font-family: var(--serif-body); font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.7; margin-bottom: var(--space-4); }
.learn-article h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-xl); line-height: 1.2; margin: var(--space-5) 0 var(--space-2); color: var(--ink); }
.learn-article p { font-family: var(--serif-body); font-size: var(--fs-base); line-height: 1.8; color: var(--ink-soft); margin: 0 0 var(--space-3); }
.learn-article ul { font-family: var(--serif-body); font-size: var(--fs-base); line-height: 1.7; color: var(--ink-soft); margin: 0 0 var(--space-3); padding-left: 1.3rem; }
.learn-article li { margin: 0.3rem 0; }
.learn-article a { color: var(--persimmon); text-decoration: underline; text-underline-offset: 2px; }
.learn-article strong { color: var(--ink); }
.haiku-eg { font-family: var(--serif); font-style: italic; font-size: var(--fs-md); line-height: 2; text-align: center; color: var(--ink); white-space: pre-line; margin: var(--space-4) 0; padding: var(--space-3) 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.haiku-eg .by { display: block; font-family: var(--sans); font-style: normal; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: var(--space-2); }
.haiku-eg .by a { color: var(--muted); }

.learn-related { max-width: var(--reading-w); margin: var(--space-5) auto var(--space-6); padding: var(--space-4) var(--space-4) 0; border-top: 1px solid var(--rule); }
.learn-related h4 { font-family: var(--sans); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-2); }
.learn-related a { display: block; font-family: var(--serif); font-size: var(--fs-md); color: var(--moss-deep); text-decoration: none; padding: 0.35rem 0; }
.learn-related a:hover { color: var(--persimmon); }