/* BeargrassPublishing v2 — legacy-overrides.css.

   Loaded as the FINAL layer on top of the legacy stack (heritage.css,
   bgai-sales.css, bgai-learn.css, sunrise.css) for Pattern X heritage,
   home, and Learn pages. Carries v2-era polish that the legacy layer
   lacks:

   1. Mode-toggle active state = accent gold (var(--warm)) instead of
      barn red, per Mark 2026-05-04 — the active mode now reads as a
      distinct accent on every chrome.
   2. Learn library hero = tight one-viewport opener with the "Start
      Here" 3-article list visible above the fold. Mark 2026-05-04: the
      Learn library hero was a "trainwreck"; readers need to enter the
      library FAST.
   3. Open-mode body prose lift for Pattern X and Learn pages — black
      ink text on a transparent card riding the dark scene was the
      "black text doesn't work when the animation is dark" bug.
*/

/* ============================================================
   Mode-toggle accent — every chrome
   ============================================================ */

.mode-toggle__btn[aria-pressed="true"] {
  background: #d4a25a;
  color: #231f1a;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(35, 31, 26, 0.18);
}
body.bgai-studio .mode-toggle__btn[aria-pressed="true"],
body.bgai-learn  .mode-toggle__btn[aria-pressed="true"],
body[data-sunrise] .mode-toggle__btn[aria-pressed="true"] {
  background: #d4a25a;
  color: #231f1a;
  font-weight: 800;
  text-shadow: none;
}
html[data-mode="night"] .mode-toggle__btn[aria-pressed="true"] {
  background: #d4a25a;
  color: #231f1a;
  font-weight: 800;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   Hero — exactly one viewport on every page
   Pattern X heritage hero (.article-head--hero) + Learn library
   article-head get pinned to 100vh on load so each page opens with
   one cinematic moment, then the content opens.
   ============================================================ */

body.bgai-studio.layout-heritage .article-head--hero,
body.page-index .home-hero,
body.page-about .article-head--hero {
  min-height: 100vh;
  height: 100vh;
}

/* ============================================================
   Learn library — compact reading-oriented hero
   The Learn library opens onto a hero zone that holds the headline
   AND the "Start Here" 3-article list inside one viewport. Visitors
   land in the library and can click a first article without scrolling.

   Markup the legacy fragment ships:
     <aside class="hero-convo hero-convo--card" data-hero-convo="learn">
     <header class="article-head"> headline + deck </header>
     <section class="library-start-here"> Start here + 3-article list </section>
     <section class="library-toc"> 3-column library TOC </section>

   v2 treatment: wrap the article-head and library-start-here into a
   tight cream-paper opener that fits one viewport. The library-toc
   below is the deeper browse.
   ============================================================ */

body.bgai-learn .article-head {
  margin: 0 auto;
  padding: var(--sp-xl) var(--pad-x) var(--sp-md);
  max-width: var(--w-wide);
  align-items: end;
}
body.bgai-learn .article-head .headline {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.06;
  max-width: 24ch;
}
body.bgai-learn .article-head .deck {
  font-size: var(--fs-md);
  line-height: 1.45;
  max-width: 56ch;
  margin-top: 0.7rem;
}

body.bgai-learn .library-start-here {
  max-width: var(--w-wide);
  margin: 0 auto var(--sp-xl);
  padding: var(--sp-md) var(--pad-x) var(--sp-xl);
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18),
              0 0 0 1px rgba(35, 31, 26, 0.06);
}
body.bgai-learn .library-start-here .start-here-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--sp-md);
  margin-bottom: var(--sp-md);
}
body.bgai-learn .library-start-here .eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 700;
}
body.bgai-learn .library-start-here h2 {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 96, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0.2rem 0 0.4rem;
}
body.bgai-learn .library-start-here .start-here-deck {
  font-family: var(--fraunces);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--ink-sec);
  margin: 0;
  max-width: 60ch;
}
body.bgai-learn .library-start-here .start-here-list {
  display: grid;
  gap: var(--sp-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
body.bgai-learn .library-start-here .start-here-list > li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  border-top: 1px solid var(--rule);
}
body.bgai-learn .library-start-here .start-here-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}
body.bgai-learn .library-start-here .start-here-list .num {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 144, "wght" 600;
  font-size: 1.6rem;
  color: var(--barn);
  line-height: 1;
}
body.bgai-learn .library-start-here .start-here-list h3 {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 40;
  font-size: var(--fs-lg);
  line-height: 1.25;
  margin: 0 0 0.3rem;
  color: var(--indigo);
}
body.bgai-learn .library-start-here .start-here-list h3 a {
  color: inherit;
  text-decoration: none;
}
body.bgai-learn .library-start-here .start-here-list h3 a:hover {
  color: var(--barn);
}
body.bgai-learn .library-start-here .start-here-list p {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-sec);
  margin: 0 0 0.3rem;
}
body.bgai-learn .library-start-here .start-here-list .reading-time {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ter);
}

/* The hero conversation card on the Learn library — sit it floating top-right
   inside the article-head zone, not stretched to a wide pill. */
body.bgai-learn .hero-convo--card {
  margin-top: var(--sp-md);
}

/* ============================================================
   Open mode — Pattern X heritage + Learn body prose contrast lift
   When the cream paper card is stripped in Open mode, body type was
   left as ink-color over the dark scene. Lift to cream with a strong
   shadow stack so prose stays legible across all SMIL phases.
   ============================================================ */

html[data-mode="open"] body.bgai-studio:not(.layout-banded) main p,
html[data-mode="open"] body.bgai-studio:not(.layout-banded) main li,
html[data-mode="open"] body.bgai-studio:not(.layout-banded) main h2,
html[data-mode="open"] body.bgai-studio:not(.layout-banded) main h3,
html[data-mode="open"] body.bgai-learn main p,
html[data-mode="open"] body.bgai-learn main li,
html[data-mode="open"] body.bgai-learn main h2,
html[data-mode="open"] body.bgai-learn main h3,
html[data-mode="open"] body.bgai-learn .library-start-here p,
html[data-mode="open"] body.bgai-learn .library-start-here h2,
html[data-mode="open"] body.bgai-learn .library-toc p,
html[data-mode="open"] body.bgai-learn .library-toc h2,
html[data-mode="open"] body.bgai-learn .library-toc h3 {
  color: #f0e6cf;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.75),
               0 0 14px rgba(10, 16, 36, 0.45);
}
html[data-mode="open"] body.bgai-learn .library-start-here {
  background: rgba(10, 16, 36, 0.42);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 230, 207, 0.18);
}

/* ============================================================
   C1 + C2 fix — Learn pages mode parity for cards (CRITICAL)
   The legacy bgai-learn.css hard-codes cream backgrounds on every
   library card and on the .article-body for essays. In Night that
   produces cream-on-cream invisible body text; in Open the half-cream
   alpha washes prose to ghost. Override per mode so all 11 Learn
   pages stay readable in every mode.
   ============================================================ */

html[data-mode="night"] body.bgai-learn .article-head,
html[data-mode="night"] body.bgai-learn .library-start-here,
html[data-mode="night"] body.bgai-learn .library-toc > div,
html[data-mode="night"] body.bgai-learn .library-editorial > div,
html[data-mode="night"] body.bgai-learn .soft-cta,
html[data-mode="night"] body.bgai-learn .article-body,
html[data-mode="night"] body.bgai-learn .pattern-x-card {
  background: rgba(22, 33, 46, 0.94);
  border: 1px solid rgba(240, 230, 207, 0.18);
  color: #f0e6cf;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(240, 230, 207, 0.06);
}
html[data-mode="night"] body.bgai-learn .article-body p,
html[data-mode="night"] body.bgai-learn .article-body li,
html[data-mode="night"] body.bgai-learn .library-toc p,
html[data-mode="night"] body.bgai-learn .library-toc h2,
html[data-mode="night"] body.bgai-learn .library-toc h3,
html[data-mode="night"] body.bgai-learn .library-editorial p,
html[data-mode="night"] body.bgai-learn .library-editorial h2,
html[data-mode="night"] body.bgai-learn .library-editorial h3,
html[data-mode="night"] body.bgai-learn .library-start-here p,
html[data-mode="night"] body.bgai-learn .library-start-here h2,
html[data-mode="night"] body.bgai-learn .library-start-here h3,
html[data-mode="night"] body.bgai-learn .soft-cta p {
  color: #f0e6cf;
}
html[data-mode="night"] body.bgai-learn .article-head .deck,
html[data-mode="night"] body.bgai-learn .library-start-here p,
html[data-mode="night"] body.bgai-learn .library-toc p,
html[data-mode="night"] body.bgai-learn .article-body .body-text,
html[data-mode="night"] body.bgai-learn .article-body p {
  color: #c9bea4;
}

html[data-mode="open"] body.bgai-learn .article-head,
html[data-mode="open"] body.bgai-learn .library-start-here,
html[data-mode="open"] body.bgai-learn .library-toc > div,
html[data-mode="open"] body.bgai-learn .library-editorial > div,
html[data-mode="open"] body.bgai-learn .soft-cta,
html[data-mode="open"] body.bgai-learn .article-body,
html[data-mode="open"] body.bgai-learn .pattern-x-card {
  background: rgba(10, 16, 36, 0.55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 230, 207, 0.18);
  color: #f0e6cf;
  box-shadow: none;
}
html[data-mode="open"] body.bgai-learn p,
html[data-mode="open"] body.bgai-learn li,
html[data-mode="open"] body.bgai-learn h1,
html[data-mode="open"] body.bgai-learn h2,
html[data-mode="open"] body.bgai-learn h3,
html[data-mode="open"] body.bgai-learn h4 {
  color: #f0e6cf;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.85),
               0 0 18px rgba(10, 16, 36, 0.5);
}
html[data-mode="open"] body.bgai-learn .reading-time,
html[data-mode="open"] body.bgai-learn .eyebrow {
  color: #d4a25a;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.7);
}
html[data-mode="open"] body.bgai-learn .article-head .rail {
  color: #d4a25a;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.7);
}

/* C3 fix — Open banded body prose lift (stronger shadow stack so cream
   reads at every SMIL phase, including the bright peak). Matches the
   pullquote-band shadow stack so banded prose stays legible. */
html[data-mode="open"] body.layout-banded .band__content p,
html[data-mode="open"] body.layout-banded .band__content li {
  color: #f0e6cf;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.85),
               0 0 18px rgba(10, 16, 36, 0.5);
}
html[data-mode="open"] body.layout-banded .band__content b,
html[data-mode="open"] body.layout-banded .band__content strong {
  color: #f0e6cf;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.95),
               0 0 18px rgba(10, 16, 36, 0.65);
}
html[data-mode="open"] body.layout-banded .band__content a {
  color: #f4c45a;
  text-shadow: 0 1px 4px rgba(10, 16, 36, 0.85);
}

/* C7 fix — Open mode body H2 frosted strip clones per wrapped line so
   multi-line headings ("Where the work comes from") get the strip on
   each line, not just the longest. */
html[data-mode="open"] body.layout-banded .band__content .sec-heading,
html[data-mode="open"] body.layout-banded .band__content h2,
html[data-mode="open"] body.layout-banded .band__content h3 {
  display: inline;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  width: auto;
  padding: 0.18em 0.55em;
  line-height: 1.45;
}

/* H8 fix — Open mode drop-cap lift. The dropped letter needs the
   same drop-shadow stack the hero gets so it reads against any
   SMIL phase. */
html[data-mode="open"] .drop-cap::first-letter {
  color: #d4a25a;
  text-shadow: 0 2px 8px rgba(10, 16, 36, 0.85),
               0 0 24px rgba(10, 16, 36, 0.55);
  filter: drop-shadow(0 0 1px rgba(244, 196, 90, 0.45));
}

/* H6 fix — Heritage Pattern X heroes are exactly one viewport on load,
   matching the banded hero contract. */
body.bgai-studio.layout-heritage > .article-head:first-of-type,
body.bgai-studio.layout-heritage > .layout-heritage-main > .article-head:first-of-type,
body.bgai-studio.layout-heritage main > .article-head:first-of-type {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
body.page-index .home-hero,
body.page-about .article-head--hero {
  min-height: 100vh;
}

/* H1 fix — Footer + chrome share one canonical column edge. The triptych
   and the footer-inner align with the chrome's --w-chrome plate. */
.site-foot__inner,
.sss-triptych__inner {
  max-width: var(--w-plate);
}
@media (min-width: 1280px) {
  .site-foot__inner,
  .sss-triptych__inner { max-width: var(--w-plate); }
}

/* H2 fix — SSS triptych sentence punchier so it reads against
   paper-elev card without ghosting. */
.sss-triptych__sentence {
  color: var(--ink);
  font-weight: 400;
  opacity: 0.92;
}

/* SSS triptych is sales surface. Suppress on Learn chromes so reading
   register dominates. */
body.bgai-learn .sss-triptych { display: none; }

/* C5 — Learn library hero scene: replace the empty sky-only persistent
   sunrise-bg behind the Learn library + topics + colophon with one of
   the named scenes (Many Glacier morning) so place is established the
   moment the reader lands. The CSS swaps the persistent sunrise SVG
   per body class. */
body.bgai-learn .sunrise-bg {
  background: var(--page-bg-deep);
}
body.bgai-learn .sunrise-bg object,
body.bgai-learn .sunrise-bg img {
  content: url('/static/images/scenes/scene_sunrise_many_glacier_desktop.svg');
}
@media (max-width: 768px) {
  body.bgai-learn .sunrise-bg object,
  body.bgai-learn .sunrise-bg img {
    content: url('/static/images/scenes/scene_sunrise_many_glacier_mobile.svg');
  }
}

/* Night — keep the cream cards + dark surfaces working on legacy
   pages too. Card surface gets dark, body type already cream by
   token swap, no further fix needed. */

/* ============================================================
   Skip-to-content link — visually hidden until focused.
   Required for keyboard users; lands on every page via the
   chrome template.
   ============================================================ */

.skip-link {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #231f1a;
  color: #f0e6cf;
  padding: 0.6rem 1rem;
  font-family: var(--ui, "Public Sans", system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  border-radius: 3px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  outline: 2px solid #d4a25a;
  outline-offset: 2px;
}

/* ============================================================
   Mobile burger nav — when burger opens on cream chrome (Paper
   mode on Pattern Y / banded), nav links must read against the
   cream paper-elev backdrop, not against the dark scene gradient.
   ============================================================ */

@media (max-width: 820px) {
  body.bgai-studio .heritage-sitenav.is-open,
  body.bgai-learn  .heritage-sitenav.is-open {
    background: var(--paper-elev, #efe4ca);
    color: var(--ink, #231f1a);
    text-shadow: none;
  }
  body.bgai-studio .heritage-sitenav.is-open a,
  body.bgai-learn  .heritage-sitenav.is-open a {
    color: var(--ink-sec, #4d453c);
    text-shadow: none;
  }
  body.bgai-studio .heritage-sitenav.is-open a.is-active,
  body.bgai-learn  .heritage-sitenav.is-open a.is-active {
    color: var(--barn, #a64b3b);
  }
}

/* ============================================================
   Reduced-motion — guard every legacy keyframe animation.
   sunrise.css has dozens of unguarded animations; v2 layer
   guards the v2 ones; this file catches anything that slipped
   through.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sec-heading.sheen-swell,
  .headline.sheen-swell,
  :root[data-mode="open"] .band__content .sec-heading,
  :root[data-mode="open"] .band__content h2,
  :root[data-mode="open"] .band__content h3,
  :root[data-mode="night"] .band__hero-headline,
  body.bgai-studio .headline,
  body.bgai-learn .headline {
    animation: none !important;
    background-position: 50% 0% !important;
  }
  .article-head--hero__cue-arrow,
  .home-hero__cue-arrow,
  .band__hero-cue-arrow {
    animation: none !important;
  }
}