/* Body baseline for Learn layouts — deep navy underneath everything
   so the body doesn't fall back to cream paper between bands. The
   article-body / library-band carry their own per-mode plates above
   this surface. */
body.layout-learn-library,
body.layout-learn-essay {
  background: var(--page-bg-deep);
  position: relative;
}
:root[data-mode="paper"] body.layout-learn-library,
:root[data-mode="paper"] body.layout-learn-essay {
  background: var(--paper);
}

/* Persistent sunrise SVG behind the body. Replaces the legacy
   sunrise.css `.sunrise-bg` rule that was load-bearing for the
   scene-behind-content on Learn pages. The chrome template renders
   one `<div class="sunrise-bg">` per page; this rule pins it
   absolute to the body so it stretches to full document height. */
body { position: relative; }
.sunrise-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--page-bg-deep);
}
.sunrise-bg object {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
:root[data-mode="paper"] .sunrise-bg { display: none; }
.sunrise-bg--dim { filter: brightness(0.78) saturate(0.92); }
:root[data-mode="open"] .sunrise-bg--dim { filter: brightness(0.92) saturate(0.96); }

body.layout-learn-library > main,
body.layout-learn-library > .article-body,
body.layout-learn-library > footer,
body.layout-learn-library > .soft-cta,
body.layout-learn-library > .bio-wrap,
body.layout-learn-library > .related-reading,
body.layout-learn-library > section,
body.layout-learn-essay > main,
body.layout-learn-essay > .article-body,
body.layout-learn-essay > footer,
body.layout-learn-essay > .soft-cta,
body.layout-learn-essay > .bio-wrap,
body.layout-learn-essay > .related-reading,
body.layout-learn-essay > section { position: relative; z-index: 1; }

/* BeargrassPublishing v2 — learn.css.

   Self-contained ruleset for Learn library + essay surfaces. Replaces
   the legacy stack (heritage.css + bgai-learn.css + sunrise.css) that
   was layered on top of v2 and produced specificity wars.

   Loaded only by the `learn-library` and `learn-essay` layouts on top
   of the canonical v2 stack (tokens, publication, chrome, bands,
   legacy-overrides). With this file, every page in the site loads
   the same v2 stack — no more legacy CSS layered underneath.

   What lives here:
   - `.article-body` — essay reading container with per-mode plate
   - `.body-open` — first-paragraph hook (drop-cap, larger lead)
   - `.soft-cta` — "continue reading" footer block
   - `.bio-wrap` / `.bio-divider` / `.bio-fin` — author bio block
   - `.reading-meta`, `.reading-time` — meta typography
   - `.related-reading` — wrapper around the 3-up grid (the grid
     itself lives in publication.css `.related-reading__list`)

   No `!important`. Mode-aware via `:root[data-mode]` qualifiers.
*/

/* ============================================================
   Article-body — essay reading container
   ============================================================ */

.article-body {
  max-width: var(--w-essay);
  width: 100%;
  box-sizing: border-box;
  margin: var(--sp-2xl) auto;
  padding: var(--sp-2xl) var(--sp-2xl) var(--sp-xl);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18),
              0 0 0 1px rgba(35, 31, 26, 0.06);
  font-family: var(--type-body);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}
.article-body p {
  margin: 0 0 0.95rem;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body b,
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body a { color: var(--indigo); }

/* Drop cap on the first lead paragraph. The generator extracts the
   `body-open` paragraph for the hero excerpt; this rule is kept so
   inline `body-open` paragraphs that DON'T get extracted still get
   the lead treatment. */
.article-body .body-open {
  font-family: var(--type-italic);
  font-style: italic;
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 50;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-sec);
  margin: 0 0 var(--sp-md);
}

/* Reading meta line under the H1 in essays — small uppercase. */
.reading-meta {
  font-family: var(--type-ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ter);
  margin: 0.6rem 0 0;
}

/* Night plate */
:root[data-mode="night"] .article-body {
  background: rgba(22, 33, 46, 0.94);
  border: 1px solid rgba(240, 230, 207, 0.18);
  color: var(--cream-fixed);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
:root[data-mode="night"] .article-body p { color: rgba(240, 230, 207, 0.92); }
:root[data-mode="night"] .article-body .body-open { color: rgba(240, 230, 207, 0.78); }
:root[data-mode="night"] .article-body b,
:root[data-mode="night"] .article-body strong { color: var(--cream-fixed); }

/* Open frosted plate — same treatment as v2 .band__content in Open. */
:root[data-mode="open"] .article-body {
  background: rgba(10, 16, 36, 0.38);
  -webkit-backdrop-filter: blur(8px) saturate(0.95);
          backdrop-filter: blur(8px) saturate(0.95);
  border: 1px solid rgba(240, 230, 207, 0.14);
  box-shadow: 0 18px 36px rgba(10, 16, 36, 0.32);
  color: var(--cream-fixed);
}
:root[data-mode="open"] .article-body p { color: var(--cream-fixed); }
:root[data-mode="open"] .article-body .body-open { color: rgba(240, 230, 207, 0.92); }
:root[data-mode="open"] .article-body b,
:root[data-mode="open"] .article-body strong { color: var(--cream-fixed); }

/* ============================================================
   Soft CTA — "continue reading" / "tell Mark" tail blocks
   ============================================================ */

.soft-cta {
  max-width: var(--w-essay);
  margin: var(--sp-xl) auto;
  padding: var(--sp-md) var(--sp-2xl);
  background: var(--paper-elev);
  color: var(--ink-sec);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-family: var(--type-italic);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
}
.soft-cta p { margin: 0.4rem 0; }
.soft-cta a { color: var(--barn); text-decoration: underline; text-underline-offset: 0.18em; }
.soft-cta a:hover { color: var(--ink); }

:root[data-mode="night"] .soft-cta {
  background: rgba(22, 33, 46, 0.78);
  border-color: rgba(240, 230, 207, 0.18);
  color: rgba(240, 230, 207, 0.85);
}
:root[data-mode="night"] .soft-cta a { color: var(--warm-bright, #f4c45a); }

:root[data-mode="open"] .soft-cta {
  background: rgba(10, 16, 36, 0.42);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-color: rgba(240, 230, 207, 0.18);
  color: rgba(240, 230, 207, 0.94);
}
:root[data-mode="open"] .soft-cta a { color: var(--warm-bright, #f4c45a); }

/* ============================================================
   Author bio block (.bio-wrap, .bio-fin, .bio-divider)
   ============================================================ */

.bio-fin {
  text-align: center;
  font-family: var(--type-italic);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-ter);
  margin: var(--sp-xl) 0 var(--sp-md);
}

.bio-wrap {
  max-width: var(--w-essay);
  margin: var(--sp-md) auto var(--sp-xl);
  padding: var(--sp-md) var(--sp-2xl);
  text-align: center;
  font-family: var(--type-body);
  font-size: var(--fs-sm);
  color: var(--ink-sec);
}
.bio-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0 auto var(--sp-sm);
}
.bio-sprig {
  width: 32px;
  height: 32px;
  color: var(--barn);
  opacity: 0.75;
}
.bio-trio {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.bio-trio span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
}
.bio-trio .d1 { background: var(--barn); }
.bio-trio .d2 { background: var(--indigo); }
.bio-trio .d3 { background: var(--olive); }
.bio-body {
  max-width: 60ch;
  margin: 0 auto;
  font-family: var(--type-italic);
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-sec);
}

:root[data-mode="night"] .bio-fin,
:root[data-mode="night"] .bio-body,
:root[data-mode="open"]  .bio-fin,
:root[data-mode="open"]  .bio-body { color: rgba(240, 230, 207, 0.78); }

:root[data-mode="night"] .bio-sprig,
:root[data-mode="open"]  .bio-sprig { color: var(--warm-bright, #f4c45a); opacity: 1; }

/* ============================================================
   Related-reading wrapper — the inner grid is in publication.css
   ============================================================ */

.related-reading {
  max-width: var(--w-essay);
  margin: var(--sp-xl) auto;
  padding: 0 var(--sp-2xl);
}
.related-reading__eyebrow {
  font-family: var(--type-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--barn);
  margin: 0 0 var(--sp-md);
}
:root[data-mode="night"] .related-reading__eyebrow,
:root[data-mode="open"]  .related-reading__eyebrow { color: var(--warm-bright, #f4c45a); }

/* ============================================================
   Section breaks (.sec-break--mark / --buds) — preserved here
   so the legacy stack can be unloaded entirely.
   ============================================================ */

.article-body .sec-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: var(--sp-lg) auto;
  color: var(--barn);
  opacity: 0.85;
  max-width: 480px;
}
.article-body .sec-break .rule-line {
  flex: 1;
  max-width: 140px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.article-body .sec-break svg {
  width: 32px;
  height: 32px;
  color: currentColor;
}
:root[data-mode="night"] .article-body .sec-break,
:root[data-mode="open"]  .article-body .sec-break {
  color: var(--warm-bright, #f4c45a);
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 720px) {
  .article-body { padding: var(--sp-lg) var(--sp-md); margin: var(--sp-md) auto; }
  .soft-cta     { padding: var(--sp-sm) var(--sp-md); margin: var(--sp-md) auto; }
  .bio-wrap     { padding: var(--sp-sm) var(--sp-md); }
  .related-reading { padding: 0 var(--sp-md); }
}

/* ============================================================
   Library bands on the Topics page — flat sections wrapping a
   library-list grid each. No card surface; the toc-items inside
   carry their own card per mode. Centered to --w-content.
   ============================================================ */
.library-band {
  max-width: var(--w-content);
  margin: var(--sp-2xl) auto;
  padding: 0 var(--pad-x);
  color: var(--ink);
}
.library-band > p {
  max-width: 64ch;
  color: var(--ink-sec);
  margin: 0 0 var(--sp-md);
}
:root[data-mode="night"] .library-band,
:root[data-mode="open"]  .library-band { color: var(--cream-fixed); }
:root[data-mode="night"] .library-band > p { color: rgba(240, 230, 207, 0.85); }
:root[data-mode="open"]  .library-band > p {
  color: var(--cream-fixed);
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.85);
}