/* Learn — mobile-first placeholder landing page.
   Single-column by default; grows to a grid once there's room.
   Tuned for a ~390–430px logical viewport (iPhone Pro-class phones)
   as much as for desktop. Colors/fonts/spacing come from modernist.css. */

body {
  padding-bottom: env(safe-area-inset-bottom);
}
.nav {
  padding-top: calc(var(--space-2) + env(safe-area-inset-top));
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.learn-hero { padding-block: clamp(28px, 6vw, 64px) clamp(20px, 4vw, 40px); }
.learn-hero h1 {
  font-size: clamp(28px, 7vw, 48px); line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 0 -0.03em;
}
.learn-hero .sub { font-size: clamp(15px, 2vw, 17px); line-height: 1.6; max-width: 56ch; margin: 16px 0 0; }

/* ── topic grid ─────────────────────────────────────────────────────────── */
.learn-topics { padding-block: clamp(8px, 2vw, 16px) clamp(40px, 6vw, 72px); }
.topic-grid {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.topic-card { gap: var(--space-2); }
.topic-card .card-title { margin-top: 2px; }
.topic-card .card-body { margin-bottom: var(--space-1); }
.topic-card .tag { align-self: flex-start; }

/* Comfortable single-column reading width and tap targets on narrow phones. */
@media (max-width: 420px) {
  .topic-grid { grid-template-columns: 1fr; }
  .card { padding: var(--space-4); }
}