/*
 * Clef Learn (css/learn.css): /learn and /learn/<slug>. Loaded after css/clef.css and css/docs.css: the guides use the
 * docs layout (side nav, .doc column) and add figures, lists, the next-guide link and the index list.
 */

.learn-head .lede { max-width: 680px; }
.learn-crumb { color: inherit; text-decoration: none; }
.learn-crumb:hover { text-decoration: underline; text-underline-offset: 3px; }

/* lists inside a guide */
.learn-ul { display: grid; gap: 10px; margin: 4px 0 20px; padding-left: 22px; list-style: disc; }
.learn-ul li { font-size: 16px; line-height: 1.68; color: var(--body); padding-left: 2px; }
.learn-ul li::marker { color: var(--orange); }
.learn-doc .code { margin: 18px 0 22px; }
.learn-doc .mathbox { margin: 8px 0 18px; }

/* screenshots from the live site */
.learn-fig { margin: 8px 0 26px; display: grid; gap: 10px; }
.learn-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-1); }
.learn-fig figcaption { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* the next guide */
.learn-end { display: block; padding-top: 12px; }
.learn-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 20px 22px; border: 1.5px solid var(--amber); border-radius: var(--r-md); background: var(--cream); color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.learn-next:hover { border-color: var(--orange); background: var(--cream-2); }
.learn-next-k { grid-column: 1; font: 600 11.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--orange-text); }
.learn-next-t { grid-column: 1; font: 600 clamp(17px, 2vw, 20px)/1.3 var(--display); letter-spacing: -.01em; }
.learn-next .ico { grid-column: 2; grid-row: 1 / 3; color: var(--orange); width: 20px; height: 20px; }

/* the index */
.learn-index { padding-block: clamp(28px, 4vw, 44px) clamp(56px, 8vw, 96px); }
.learn-list { display: grid; border-top: 1px solid var(--line); }
.learn-item { border-bottom: 1px solid var(--line); }
.learn-link { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 26px 4px; color: inherit; text-decoration: none; }
.learn-num { font: 500 15px/1.3 var(--mono); color: var(--orange-text); font-variant-numeric: tabular-nums; }
.learn-text { display: grid; gap: 8px; min-width: 0; }
.learn-title { font: 600 clamp(20px, 2.4vw, 26px)/1.2 var(--display); letter-spacing: -.018em; color: var(--ink); text-wrap: balance; transition: color .2s var(--ease); }
.learn-sum { font-size: 15.5px; line-height: 1.6; color: var(--body); max-width: 64ch; }
.learn-meta { font: 500 12.5px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.learn-link:hover .learn-title { color: var(--orange-text); }
.learn-foot { margin-top: 26px; font-size: 15px; color: var(--body); }
@media (max-width: 640px) {
  .learn-link { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
  .learn-meta { order: 3; }
}
.learn-head .h1 { max-width: 17ch; text-wrap: balance; }