/* 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.
*/

/* Chrome width and horizontal padding now tokenized at the root
   (tokens.css --w-chrome and heritage.css --pad-x), so this surface
   no longer carries its own override; the chrome aligns with body
   content automatically. Earlier override block removed during the
   2026-04-27 unification width pass. */

/* "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);
}

/* Library hero. Mirrors body.bgai-studio .article-head and the
   page-essay article-head grammar so the Learn library reads on-brand
   with sales and Almanac essay surfaces (rotated rail on the left,
   sheen-swell axis-cascade headline, italic standfirst deck). The
   library-masthead block is retired in favor of <header class="article-head">;
   the exemplar at templates/exemplars/library.exemplar.body.html and
   the parity_check shell expect article-head now. */
body.bgai-learn .article-head {
  max-width: var(--w-wide);
  margin: var(--sp-xl) auto var(--sp-md);
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--gap-lg);
  align-items: stretch;
}
body.bgai-learn .article-head .rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--barn);
  border-right: 1px solid var(--rule);
  padding: var(--sp-xs) 0;
  align-self: stretch;
}
body.bgai-learn .article-head .headline {
  font-family: var(--display);
  font-size: var(--fs-disp-lg);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 22ch;
  color: var(--ink);
  margin: 0;
}
body.bgai-learn .article-head .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 .article-head .deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  margin: 0.9rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

body.bgai-learn .library-toc {
  display: grid;
  gap: var(--gap-xl);
  max-width: var(--w-wide);
  margin: var(--sp-xl) 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: var(--fs-2xl);
  margin: 0 0 var(--sp-sm);
  color: var(--indigo);
}

body.bgai-learn .library-toc .eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  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: var(--fs-md);
  line-height: 1.3;
  margin: 0 0 var(--sp-3xs);
  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: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-sec);
  margin: 0 0 var(--sp-3xs);
}

/* Soft CTA block. Used once per article, at the end. Understated. */
body.bgai-learn .soft-cta {
  margin: var(--sp-3xl) auto;
  max-width: var(--w-wide);
  padding: var(--sp-lg) 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: var(--fs-sm);
  color: var(--ink-sec);
}

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

body.bgai-learn .library-start-here .eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  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: var(--fs-3xl);
  margin: var(--sp-3xs) 0 var(--sp-xs);
  max-width: 32ch;
  color: var(--ink);
}

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

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: var(--gap-md);
  align-items: start;
  padding: var(--sp-md) 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: var(--fs-3xl);
  color: var(--indigo);
  line-height: 1;
}

body.bgai-learn .library-start-here h3 {
  font-family: var(--fraunces);
  font-size: var(--fs-lg);
  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: var(--fs-sm);
  color: var(--ink-sec);
  margin: 0 0 var(--sp-3xs);
}

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

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

body.bgai-learn .library-editorial h2 {
  font-family: var(--fraunces);
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-sm);
  color: var(--indigo);
}

/* reading-meta sits between the rail and the body in Learn article
   headers. Size it small and spaced so it reads as metadata, not as
   a second deck. The review flagged the prior 19px as competing with
   the body-open drop cap. */
body.bgai-learn .reading-meta {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
  margin: var(--sp-xs) 0 0;
}

/* ----------------------------------------------------------------------
   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: var(--sp-2xl) auto var(--sp-md);
  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: var(--fs-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
  padding: 0.35rem var(--sp-sm) 0.35rem 0;
  border-right: 1px solid var(--rule);
  align-self: stretch;
}

body.bgai-learn .headline {
  font-family: var(--display);
  font-size: var(--fs-disp-lg);
  line-height: 1.04;
  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: var(--fs-md);
  line-height: 1.5;
  margin: 0.9rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

body.bgai-learn .article-body {
  /* Wider reading column matches sales + Almanac essay grammar
     (the chrome and content share the --w-wide column edge). The
     !important earlier was a guard against a specificity issue
     during the 2026-04-23 rebuild; removed during the 2026-04-27
     unification width pass when the heritage page-essay rule
     also moved to --w-wide. */
  max-width: var(--w-wide);
}

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

/* Drop cap on the opening paragraph of every Learn article. The
   heritage.css rule is scoped to body.page-essay, which Learn
   articles carry, but the rule was not landing visibly in the
   2026-04-23 PicViewer captures. Explicit rule here removes any
   specificity ambiguity and ties the drop cap to the bgai-learn
   body class directly. Numeric values match the heritage rule. */
body.bgai-learn .body-open::first-letter {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 120, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: 4.4rem;
  line-height: 0.9;
  float: left;
  padding: 0.3rem 0.6rem 0 0;
  color: var(--warm);
}

body.bgai-learn .library-colophon {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: var(--sp-md) var(--pad-x) var(--sp-3xl);
}

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

body.bgai-learn .library-colophon p {
  font-family: var(--serif);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-sec);
  margin: var(--sp-sm) 0;
}