/* Alder: the learn pages (/learn, categories, lessons, study guides,
   quizzes, the walkthrough, video and document pages, and the preview
   modal). Linked after learn.css by partials/_learn-head, so it re-points
   the learn tokens at Alder's and restyles the parts in Alder terms: Golos
   headings (the Lora token stays for the italic numerals and signatures),
   pill buttons, sand and paper panels in place of hairlines and side rules,
   and the page gutters and header height Alder uses. The body.al-theme
   prefix outranks learn.css whatever the link order. */

body.al-theme .lrn, body.al-theme .lrn-modal {
  --lrn-cream: var(--al-sand);
  --lrn-ink: var(--al-ink);
  --lrn-green: var(--al-moss);
  --lrn-accent: var(--al-brand);
  --lrn-muted: var(--al-muted);
  --lrn-line: rgba(14, 42, 27, .14);
  --lrn-tint: var(--al-paper);
  --lrn-body: var(--al-body);
  --lrn-page: var(--al-page);
  --ocd-font-ui: var(--al-sans);
  --ocd-font-display: var(--al-display);
  font-family: var(--al-sans);
}

/* Headings: Golos */
body.al-theme :is(.lrn, .lrn-modal) :is(
  .lrn-note h2, .lrn-guide h2, .lrn-cat__head h2, .lrn-group h2, .lrn-nav__cat, .lrn-author__name,
  .lrn-sources h2, .lrn-docs h2, .lrn-quiz h2, .lrn-quiz__question, .lrn-quiz__score, .lrn-quizidx h2,
  .lrn-guide-lesson h2, .lrn-guideidx h3, .lrn-watch__back strong, .lrn-seq strong, .lrn-modal__doc :is(h1, h2, h3)
) {
  font-family: var(--al-display); font-style: normal; font-weight: 800; letter-spacing: -.022em; color: var(--al-ink);
}
body.al-theme .lrn :is(.lrn-item h3, .lrn-doc__title, .lrn-seq strong, .lrn-nav__cat, .lrn-author__name, .lrn-watch__back strong, .lrn-quiz__question) {
  font-family: var(--al-display); font-weight: 700; letter-spacing: -.014em;
}
body.al-theme .lrn .lrn-cat__head h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; }

/* Widths: Alder's gutter, and the hero lines up with the column under it */
body.al-theme .lrn-main { width: min(100% - 2 * var(--al-gutter), var(--al-max)); max-width: none; padding: 24px 0 72px; }
body.al-theme :is(.lrn-quizidx, .lrn-quizpage, .lrn-watch) { width: min(100% - 2 * var(--al-gutter), 48rem); max-width: none; padding-left: 0; padding-right: 0; }
body.al-theme .lrn-layout { width: min(100% - 2 * var(--al-gutter), 48rem); max-width: none; padding-left: 0; padding-right: 0; }
body.al-theme .lrn .al-chead { padding-bottom: 24px; }
@media (min-width: 1024px) {
  body.al-theme :is(.lrn--lesson, .lrn--category) .al-chead__wrap { width: min(100% - 2 * var(--al-gutter), calc(260px + 56px + 48rem)); }
  body.al-theme .lrn-layout { width: min(100% - 2 * var(--al-gutter), calc(260px + 56px + 48rem)); padding-top: 8px; padding-bottom: 96px; }
  body.al-theme .lrn-nav__fold { top: calc(var(--al-hdr-h) + 24px); }
  body.al-theme .lrn-nav__body { max-height: calc(100vh - var(--al-hdr-h) - 48px); }
}

/* Landing fold */
.al-lfold { padding: 4px 0 56px; }
.al-lfold__wrap { display: grid; gap: 40px; width: min(100% - 2 * var(--al-gutter), var(--al-max)); margin-inline: auto; }
.al-lfold__copy { min-width: 0; }
.al-lfold .al-label { margin-bottom: 10px; }
.al-lfold__h {
  font: 800 clamp(2.5rem, 7vw, 5rem)/1 var(--al-display);
  letter-spacing: -.035em; color: var(--al-ink); text-wrap: balance;
}
.al-lfold__mission { margin-top: 24px; max-width: 38em; }
.al-lfold__mission p { font-size: 17px; line-height: 1.7; color: var(--al-body); }
.al-lfold__mission p + p { margin-top: 14px; }
.al-lfold__watch {
  display: flex; align-items: center; gap: 14px; max-width: 30rem; margin-top: 28px; padding: 10px 18px 10px 10px;
  min-height: 44px; border-radius: var(--al-r); background: var(--al-sand); color: var(--al-ink); transition: background-color .18s;
}
@media (hover: hover) { .al-lfold__watch:hover { background: var(--al-sand-2); } }
.al-lfold__thumb { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--al-ink); }
.al-lfold__thumb img { width: 100%; height: 100%; object-fit: cover; }
.al-lfold__thumb svg { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); color: var(--al-ink); }
.al-lfold__watchtext { display: grid; gap: 2px; min-width: 0; }
.al-lfold__watchtext strong { font: 600 15px/1.3 var(--al-sans); }
.al-lfold__watchtext span { font: 400 13.5px/1.4 var(--al-sans); color: var(--al-muted); }
.al-lfold__sig { margin-top: 24px; font: italic 400 18px/1.4 var(--al-serif); color: var(--al-ink); }
.al-lfold__video { display: flex; justify-content: center; }
.al-lfold__video video { display: block; width: auto; height: auto; max-width: 100%; max-height: min(78vh, 620px); border-radius: var(--al-r); background: var(--al-ink); }
@media (min-width: 921px) {
  .al-lfold { padding: 24px 0 96px; }
  .al-lfold__wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; }
  .al-lfold__mission p { font-size: 18px; }
}

/* Landing body: the note and the guide panels, the category strip and rows */
body.al-theme .lrn-note { padding: 24px 20px; border: 0; border-radius: var(--al-r); background: var(--al-paper); }
body.al-theme .lrn-note h2, body.al-theme .lrn-guide h2 { font-size: 24px; line-height: 1.15; }
body.al-theme .lrn-note__link, body.al-theme .lrn-subs a { color: var(--al-moss); text-decoration-color: var(--al-sage); }
body.al-theme .lrn-guide { padding: 24px 20px; border: 0; border-radius: var(--al-r); background: var(--al-sand); }
body.al-theme .lrn-guide__link {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--al-pill); color: #fff; font: 600 15px/1.2 var(--al-sans);
}
@media (hover: hover) { body.al-theme .lrn-guide__link:hover { background: var(--al-moss); } }
@media (min-width: 900px) { body.al-theme :is(.lrn-note, .lrn-guide) { padding: 32px 36px; } }

body.al-theme .lrn-catbar {
  top: var(--al-hdr-h); margin: 8px calc(var(--al-gutter) * -1) 0; padding: 10px 0;
  border-bottom: 0; background: var(--al-page);
}
body.al-theme .lrn-catnav { padding: 0 var(--al-gutter); scroll-padding-inline: var(--al-gutter); }
body.al-theme .lrn-catnav a { border: 0; background: var(--al-sand); color: var(--al-ink); font: 600 14px/1.2 var(--al-sans); }
@media (hover: hover) { body.al-theme .lrn-catnav a:hover { background: var(--al-sand-2); } }
@media (min-width: 921px) {
  body.al-theme .lrn-catbar { margin-inline: 0; }
  body.al-theme .lrn-catnav { padding: 0; scroll-padding-inline: 0; }
}
body.al-theme .lrn-cat { margin-top: 0; padding: 56px 0 8px; border-top: 0; scroll-margin-top: calc(var(--al-hdr-h) + 68px); }
body.al-theme .lrn-cat:first-of-type { padding-top: 32px; }
body.al-theme .lrn-cat__desc { font: italic 400 17px/1.5 var(--al-serif); color: var(--al-body); }
body.al-theme .lrn-cards { border-top: 0; }
body.al-theme .lrn-item { border-bottom: 0; border-radius: var(--al-r); }
@media (hover: hover) { body.al-theme .lrn-item:hover h3 { color: var(--al-moss); text-decoration-color: transparent; } }
body.al-theme .lrn-item:focus-visible { outline: 2px solid var(--al-brand); outline-offset: 2px; }
body.al-theme .lrn-item__sub { color: var(--al-moss); font-weight: 600; }
body.al-theme .lrn-group { scroll-margin-top: calc(var(--al-hdr-h) + 16px); }
body.al-theme .lrn-group h2 { font-size: 26px; line-height: 1.1; }
body.al-theme .lrn-group__desc { font: italic 400 17px/1.5 var(--al-serif); color: var(--al-body); }

/* Lesson navigator */
body.al-theme .lrn-nav__fold { border: 0; border-radius: var(--al-r); background: var(--al-sand); }
body.al-theme .lrn-nav__sum { min-height: 52px; padding: 8px 18px; color: var(--al-body); }
body.al-theme .lrn-nav__body { border-top: 0; }
body.al-theme .lrn-nav__link { border-left: 0; border-radius: 10px; }
body.al-theme .lrn-nav__link[aria-current="page"] { background: rgba(255, 255, 255, .7); box-shadow: inset 2px 0 0 var(--al-moss); border-radius: 0 10px 10px 0; }
@media (hover: hover) { body.al-theme .lrn-nav__link:hover { background: rgba(14, 42, 27, .05); color: var(--al-ink); } }
@media (min-width: 1024px) {
  body.al-theme .lrn-nav__fold { border-radius: 0; background: transparent; }
  body.al-theme .lrn-nav__cat { border-bottom: 0; padding-bottom: 0; font-size: 22px; }
}

/* Author, sources, documents, the sequence buttons */
body.al-theme .lrn-author { padding: 24px 20px; border-top: 0; border-radius: var(--al-r); background: var(--al-sand); }
body.al-theme .lrn-author__photo { border: 0; }
body.al-theme .lrn-author__creds, body.al-theme .lrn-author__link, body.al-theme .lrn-nav__all { color: var(--al-moss); }
@media (min-width: 1024px) { body.al-theme .lrn-author { padding: 20px 18px; } }
body.al-theme :is(.lrn-sources, .lrn-docs, .lrn-guide-lesson, .lrn-guideidx) { margin-top: 56px; padding-top: 0; border-top: 0; }
body.al-theme :is(.lrn-sources, .lrn-docs, .lrn-guide-lesson) h2, body.al-theme .lrn-guideidx .lrn-guideidx__h { font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.1; }
body.al-theme .lrn-cite::marker { color: var(--al-moss); }
body.al-theme .lrn-cite__title a { text-decoration-color: var(--al-sage); }
body.al-theme .lrn-docmap { padding: 16px 18px 8px; border-left: 0; border-radius: var(--al-r); background: var(--al-paper); }
body.al-theme .lrn-docmap__list li + li, body.al-theme .lrn-docmap__all { border-top: 0; }
body.al-theme .lrn-doc { padding: 16px 0; border-bottom: 0; }
body.al-theme .lrn-doc + .lrn-doc { margin-top: 4px; }
body.al-theme .lrn-btn { border-radius: 999px; border-color: var(--al-line); background: transparent; color: var(--al-ink); font: 600 14px/1.2 var(--al-sans); }
@media (hover: hover) { body.al-theme .lrn-btn:hover { background: rgba(14, 42, 27, .05); border-color: var(--al-ink); } }
body.al-theme .lrn-btn--solid { border-color: var(--al-pill); background: var(--al-pill); color: #fff; }
@media (hover: hover) { body.al-theme .lrn-btn--solid:hover { border-color: var(--al-moss); background: var(--al-moss); } }
body.al-theme .lrn-seq { margin-top: 56px; padding-top: 0; border-top: 0; }
body.al-theme .lrn-seq--top { margin: 0 0 24px; }
body.al-theme .lrn-seq a { border: 0; border-radius: var(--al-r); background: var(--al-sand); padding: 12px 16px 14px; }
@media (hover: hover) { body.al-theme .lrn-seq a:hover { background: var(--al-sand-2); } }
body.al-theme .lrn-seq a:focus-visible { background: var(--al-sand-2); }
body.al-theme .lrn-video__link { color: var(--al-moss); }

/* Lesson and study guide prose: the article prose, at the learn size */
body.al-theme .lrn .ocd-prose { max-width: none; font-family: var(--al-sans); line-height: 1.7; color: var(--al-body); overflow-wrap: break-word; }
body.al-theme .lrn .ocd-prose :is(h2, h3, h4) { font-family: var(--al-display); font-style: normal; color: var(--al-ink); text-wrap: balance; scroll-margin-top: calc(var(--al-hdr-h) + 24px); }
body.al-theme .lrn .ocd-prose h2 { margin: 1.9em 0 .6em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -.022em; }
body.al-theme .lrn .ocd-prose h3 { margin: 1.6em 0 .5em; font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
body.al-theme .lrn .ocd-prose > :first-child { margin-top: 0; }
body.al-theme .lrn .ocd-prose :is(p, ul, ol, blockquote, figure) { margin-top: 0; margin-bottom: 1.1em; }
body.al-theme .lrn .ocd-prose ul { padding-left: 1.3em; list-style: disc; }
body.al-theme .lrn .ocd-prose ol { padding-left: 1.4em; list-style: decimal; }
body.al-theme .lrn .ocd-prose li { margin-bottom: .45em; }
body.al-theme .lrn .ocd-prose li::marker { color: var(--al-moss); }
body.al-theme .lrn .ocd-prose :is(strong, b) { color: var(--al-ink); font-weight: 600; }
body.al-theme .lrn .ocd-prose a { color: var(--al-moss); text-decoration: underline; text-decoration-color: var(--al-sage); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
body.al-theme .lrn .ocd-prose a:hover { color: var(--al-ink); text-decoration-color: currentColor; }
body.al-theme .lrn .ocd-prose blockquote { padding: 2px 0 2px 18px; border-left: 3px solid var(--al-sage); color: var(--al-ink); }
body.al-theme .lrn .ocd-prose img { border-radius: 12px; }
body.al-theme .lrn .ocd-prose :is(th, td) { border-bottom-color: var(--al-sand-2); }
body.al-theme .lrn .ocd-prose thead th { background: var(--al-sand); color: var(--al-ink); }
body.al-theme .lrn .ocd-prose hr { height: 0; margin: 2.2em 0; border: 0; }
@media (min-width: 921px) { body.al-theme .lrn-lesson .ocd-prose { font-size: 18px; } }

/* Quiz */
body.al-theme .lrn-quiz {
  --lrn-quiz-line: rgba(14, 42, 27, .14);
  --lrn-right: var(--al-paper);
  padding: 24px 20px; border: 0; border-radius: var(--al-r); background: var(--al-sand);
}
body.al-theme .lrn-quiz__q + .lrn-quiz__q { border-top: 0; }
body.al-theme .lrn-quiz__count { color: var(--al-moss); }
body.al-theme .lrn-quiz__opt { border-radius: 14px; border-color: transparent; background: #fff; }
@media (hover: hover) { body.al-theme .lrn-quiz__q:not(.is-answered) .lrn-quiz__opt:hover { border-color: var(--al-ink); } }
body.al-theme .lrn-quiz__opt.is-right { border-color: var(--al-moss); }
body.al-theme .lrn-quiz__hint summary { border: 0; border-radius: 999px; background: #fff; color: var(--al-ink); }
body.al-theme .lrn-quiz__why { border-left: 0; border-radius: 12px; }
body.al-theme .lrn-quiz .lrn-btn { border-radius: 999px; border-color: var(--al-line); background: #fff; color: var(--al-ink); }
body.al-theme .lrn-quiz .lrn-btn--solid { border-color: var(--al-pill); background: var(--al-pill); color: #fff; }
@media (hover: hover) {
  body.al-theme .lrn-quiz .lrn-btn:not(:disabled):hover { background: var(--al-page); border-color: var(--al-ink); }
  body.al-theme .lrn-quiz .lrn-btn--solid:not(:disabled):hover { background: var(--al-moss); border-color: var(--al-moss); }
}
@media (min-width: 640px) { body.al-theme .lrn-quiz { padding: 32px 36px 36px; } }

/* Quiz and study guide indexes */
body.al-theme .lrn-quizidx h2 { font-size: 24px; line-height: 1.15; }
body.al-theme .lrn-quizidx__group + .lrn-quizidx__group { margin-top: 48px; }
body.al-theme .lrn-quizidx__list { border-top: 0; }
body.al-theme .lrn-quizidx__row { padding: 8px 0 12px; border-bottom: 0; }
body.al-theme .lrn-quizidx__take { text-decoration-color: var(--al-sage); }
body.al-theme .lrn-quizidx__meta a, body.al-theme :is(.lrn-quizpage__back, .lrn-guide-lesson__open) a { color: var(--al-moss); }

/* Video and walkthrough pages, and the preview modal */
body.al-theme .lrn-embed { border-radius: 12px; }
body.al-theme .lrn-watch__back { border: 0; border-radius: var(--al-r); background: var(--al-sand); }
@media (hover: hover) { body.al-theme .lrn-watch__back:hover { background: var(--al-sand-2); } }
body.al-theme .lrn-watch__back svg { color: var(--al-moss); }
body.al-theme .lrn-modal__head { border-bottom: 0; }
body.al-theme .lrn-modal__close { border-radius: 999px; }
body.al-theme .lrn-modal__doc :is(td, th) { border-color: var(--al-sand-2); }