/* BgAI Learn overlay. Sits on top of heritage.css (scoped to
   body.almanac-heritage) and adds Learn-specific chrome touches.
   Token-only; no color literals. See docs/BRAND-ALIGNMENT.md.
*/

/* "Learn" section label inside the wordmark. */
body.bgai-learn .bgai-wm--learn .w-section {
  margin-left: 0.5em;
  padding-left: 0.5em;
  border-left: 1px solid currentColor;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 0.75em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-ter);
}

body.bgai-learn .library-masthead {
  padding: 3rem var(--pad-x) 1rem;
  max-width: var(--w-wide);
  margin: 0 auto;
}

body.bgai-learn .library-masthead .eyebrow {
  font-family: var(--ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

body.bgai-learn .library-masthead h1 {
  font-family: var(--fraunces);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 1rem;
  max-width: 32ch;
  color: var(--ink);
}

body.bgai-learn .library-masthead .deck {
  font-family: var(--serif);
  font-size: 1.125rem;
  max-width: 40rem;
  color: var(--ink-sec);
}

body.bgai-learn .library-toc {
  display: grid;
  gap: 2rem;
  max-width: var(--w-wide);
  margin: 2rem auto;
  padding: 0 var(--pad-x);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  body.bgai-learn .library-toc {
    grid-template-columns: 1fr;
  }
}

body.bgai-learn .library-toc h2 {
  font-family: var(--fraunces);
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  color: var(--indigo);
}

body.bgai-learn .library-toc .eyebrow {
  font-family: var(--ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
}

body.bgai-learn .library-toc .toc-item {
  margin-bottom: 1.5rem;
}

body.bgai-learn .library-toc .toc-item h3 {
  font-family: var(--fraunces);
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 0.25rem;
  color: var(--ink);
}

body.bgai-learn .library-toc .toc-item h3 a {
  color: inherit;
  text-decoration: none;
}

body.bgai-learn .library-toc .toc-item h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rule);
}

body.bgai-learn .library-toc .toc-item p {
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-sec);
  margin: 0 0 0.25rem;
}

/* Soft CTA block. Used once per article, at the end. Understated. */
body.bgai-learn .soft-cta {
  margin: 3rem auto;
  max-width: var(--w-read);
  padding: 1.5rem var(--pad-x);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

body.bgai-learn .soft-cta a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.bgai-learn .soft-cta p {
  margin: 0.35rem 0;
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink-sec);
}

/* Start Here sequence on the library cover. */
body.bgai-learn .library-start-here {
  max-width: var(--w-wide);
  margin: 3rem auto 2rem;
  padding: 0 var(--pad-x);
}

body.bgai-learn .library-start-here .eyebrow {
  font-family: var(--ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
}

body.bgai-learn .library-start-here h2 {
  font-family: var(--fraunces);
  font-size: 1.625rem;
  margin: 0.25rem 0 0.5rem;
  max-width: 32ch;
  color: var(--ink);
}

body.bgai-learn .library-start-here .start-here-deck {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-sec);
  max-width: 40rem;
  margin: 0 0 1.5rem;
}

body.bgai-learn .library-start-here ol.start-here-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

body.bgai-learn .library-start-here ol.start-here-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

body.bgai-learn .library-start-here ol.start-here-list .num {
  font-family: var(--fraunces);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--indigo);
  line-height: 1;
}

body.bgai-learn .library-start-here h3 {
  font-family: var(--fraunces);
  font-size: 1.125rem;
  margin: 0 0 0.35rem;
  line-height: 1.3;
  color: var(--ink);
}

body.bgai-learn .library-start-here h3 a {
  color: inherit;
  text-decoration: none;
}

body.bgai-learn .library-start-here h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rule);
}

body.bgai-learn .library-start-here p {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink-sec);
  margin: 0 0 0.25rem;
}

body.bgai-learn .library-start-here .reading-time {
  font-family: var(--ui);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-ter);
}

body.bgai-learn .library-editorial {
  max-width: var(--w-wide);
  margin: 2rem auto;
  padding: 0 var(--pad-x);
}

body.bgai-learn .library-editorial h2 {
  font-family: var(--fraunces);
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  color: var(--indigo);
}

body.bgai-learn .reading-meta {
  font-family: var(--ui);
  color: var(--ink-ter);
}

/* ----------------------------------------------------------------------
   Motion parity for Learn articles.
   Learn article pages use the heritage article-head / article-body
   structure but their body classes are .page-what-is-ai-search,
   .page-aieo-explained, etc., not .page-essay. Broaden the sheen and
   headline typography to apply to any body.bgai-learn with an
   .article-head > .headline inside.
   ---------------------------------------------------------------------- */

body.bgai-learn .article-head {
  max-width: var(--w-wide);
  margin: 2.5rem auto 1rem;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}

body.bgai-learn .article-head .rail {
  font-family: var(--ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
  padding: 0.35rem 0.75rem 0.35rem 0;
  border-right: 1px solid var(--rule);
  align-self: stretch;
}

body.bgai-learn .headline {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 24ch;
  color: var(--ink);
  margin: 0;
}

body.bgai-learn .headline.sheen-swell {
  font-family: var(--fraunces);
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--warm) 50%,
    var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheenPan 8s ease-in-out infinite, axisSwell 12s ease-in-out infinite;
}

body.bgai-learn .deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0.9rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

body.bgai-learn .article-body {
  max-width: var(--w-read) !important;
}

body.bgai-learn .article-body h2 {
  font-family: var(--fraunces);
  color: var(--ink);
  margin-top: 2.5rem;
}