/* Bearing Forward: a series identity distinct from the rest of the JSW site.
   Loaded only on /bearing-forward/ pages, so these tokens do not leak into the product site.
   Terrain appears exactly three times: the hero, the thin horizon rules, and the closing band.
   Everything else is typography and whitespace. Type: Georgia (serif) + a system Aptos fallback (sans). */

:root {
  --bf-deep-earth:#1E2824;
  --bf-forest:#10241F;
  --bf-night:#0D1716;
  --bf-cream:#FAF1DA;
  --bf-sand:#EFE3C4;
  --bf-linen:#E9DFC5;
  --bf-ochre:#C4872B;
  --bf-clay:#A94A23;
  --bf-olive:#6F7563;
  --bf-gold:#E7B861;
  --bf-serif: Georgia, "Times New Roman", serif;
  --bf-sans: Aptos, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body.bf {
  margin:0;
  background:var(--bf-cream);
  color:var(--bf-deep-earth);
  font-family:var(--bf-sans);
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.bf img { max-width:100%; display:block; }
.bf a { color:var(--bf-clay); text-decoration:underline; text-underline-offset:2px; }
.bf a:hover { color:#8f3d1d; }
.bf :focus-visible { outline:2px solid var(--bf-gold); outline-offset:2px; }
.bf-wrap { width:min(720px, calc(100% - 44px)); margin-inline:auto; }

/* ---------- top bar ---------- */
.bf-topbar { border-bottom:1px solid var(--bf-linen); }
.bf-topbar .bf-wrap { display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:16px; }
.bf-home { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--bf-deep-earth); }
.bf-home:hover { color:var(--bf-deep-earth); }
.bf-mark { width:26px; height:26px; display:block; }
.bf-home-text { font-family:var(--bf-sans); font-weight:700; font-size:14px; }
.bf-series-tag { font-family:var(--bf-sans); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--bf-olive); text-decoration:none; }
.bf-series-tag:hover { color:var(--bf-clay); }
.bf-backlink { display:block; padding:14px 0 2px; }
.bf-backlink a { font-family:var(--bf-sans); font-size:14px; color:var(--bf-deep-earth); text-decoration:none; }
.bf-backlink a:hover { color:var(--bf-clay); text-decoration:underline; }

/* ---------- hero with HTML title overlay + lite-youtube play affordance ---------- */
.bf-hero { position:relative; container-type:inline-size; width:100%; background:var(--bf-forest); overflow:hidden; }
.bf-hero-media { position:relative; }
.bf-hero-img { width:100%; height:auto; display:block; }
.bf-hero-titleblock { position:absolute; left:5.5cqw; top:24.5%; width:46cqw; color:var(--bf-cream); z-index:2; }
.bf-eyebrow { font-family:var(--bf-sans); font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--bf-gold); font-size:1.4cqw; margin:0; }
.bf-hero-title { font-family:var(--bf-serif); font-weight:700; font-size:4.5cqw; line-height:1.04; margin:.55em 0 .4em; }
.bf-hero-dek { font-family:var(--bf-serif); font-weight:400; font-size:1.8cqw; line-height:1.25; margin:0; }
.bf-hero-byline { margin-top:1.5em; }
.bf-hero-byline .bf-name { display:block; font-family:var(--bf-serif); font-weight:700; font-size:1.6cqw; line-height:1.1; }
.bf-hero-byline .bf-role { display:block; font-family:var(--bf-sans); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:1cqw; margin-top:.4em; }
.bf-hero-byline a { color:var(--bf-cream); text-decoration:none; }
.bf-hero-byline a:hover { text-decoration:underline; }
/* play pill, lower-right of the hero media */
.bf-hero-play {
  position:absolute; right:3.5cqw; bottom:7%; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--bf-sans); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--bf-cream); background:rgba(16,36,31,.85);
  border:1px solid rgba(250,241,218,.4); border-radius:999px;
  padding:9px 15px; cursor:pointer;
}
.bf-hero-play:hover { border-color:var(--bf-gold); }
.bf-hero-play .bf-play-glyph { font-size:11px; line-height:1; }
.bf-hero-iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:6; }
.bf-hero-playing .bf-hero-img { visibility:hidden; }
.bf-hero-playing .bf-hero-titleblock { visibility:hidden; }

/* ---------- full post-meta line ---------- */
.bf-postmeta { font-family:var(--bf-sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--bf-clay); margin:26px auto 0; }

/* ---------- "In this installment" TOC card ---------- */
.bf-toc { background:var(--bf-sand); border:1px solid var(--bf-linen); border-radius:8px; padding:22px 26px; margin:26px 0 6px; }
.bf-toc-title { font-family:var(--bf-sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--bf-olive); margin:0 0 12px; }
.bf-toc ol { margin:0; padding:0; list-style:none; counter-reset:bftoc; }
.bf-toc li { counter-increment:bftoc; margin:.5em 0; font-family:var(--bf-serif); font-size:19px; line-height:1.35; }
.bf-toc li::before { content:counter(bftoc,decimal-leading-zero) "  "; color:var(--bf-clay); font-family:var(--bf-sans); font-weight:700; font-size:13px; }
.bf-toc a { color:var(--bf-deep-earth); text-decoration:none; }
.bf-toc a:hover { color:var(--bf-clay); text-decoration:underline; }

/* ---------- article body + section rhythm ---------- */
.bf-body { padding:14px 0 0; }
.bf-body p { margin:0 0 .6em; max-width:70ch; }
.bf-body strong { font-weight:700; color:var(--bf-deep-earth); }
.bf-secno { font-family:var(--bf-sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--bf-clay); margin:4rem 0 .3em; }
.bf-body h2 { font-family:var(--bf-serif); font-weight:700; font-size:30px; line-height:1.18; color:var(--bf-deep-earth); margin:0 0 .8em; }
.bf-body ul, .bf-body ol { margin:1.6em 0; }
/* terrain rule between sections (terrain as a line) */
.bf-terrain { width:100%; height:28px; margin:2.4rem 0 0; }
.bf-terrain svg { width:100%; height:100%; display:block; }

/* ---------- pull quotes + agent-instruction blockquote ---------- */
.bf-pull { font-family:var(--bf-serif); font-weight:700; font-size:27px; line-height:1.28; color:var(--bf-deep-earth); border-left:3px solid var(--bf-gold); margin:2.4rem 0; padding-left:1.5rem; }
.bf-quote { font-family:var(--bf-serif); font-style:italic; font-weight:400; font-size:21px; line-height:1.4; color:var(--bf-olive); border-left:3px solid var(--bf-olive); margin:1.9rem 0; padding-left:1.4rem; }

/* ---------- callout card wrapping the only list ---------- */
.bf-callout { background:var(--bf-linen); border:1px solid var(--bf-sand); border-radius:8px; padding:1.5rem 1.75rem; margin:1.6em 0; }
.bf-callout-title { font-family:var(--bf-sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--bf-olive); margin:0 0 14px; }
.bf-callout ul { columns:2; column-gap:36px; margin:0; padding:0; list-style:none; }
.bf-callout li { break-inside:avoid; position:relative; padding-left:16px; margin:.34em 0; font-family:var(--bf-sans); font-size:17px; color:var(--bf-deep-earth); }
.bf-callout li::before { content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; border-radius:50%; background:var(--bf-ochre); }

/* ---------- closing band (full-bleed Forest) ---------- */
.bf-close { background:var(--bf-forest); color:var(--bf-cream); padding:5rem 0; }
.bf-close .bf-wrap { display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
.bf-close-text h3 { font-family:var(--bf-serif); font-weight:700; font-size:34px; line-height:1.22; color:var(--bf-cream); margin:0 0 .5em; }
.bf-close-text p { font-family:var(--bf-serif); font-size:20px; line-height:1.5; color:rgba(250,241,218,.85); margin:0; }
.bf-close-img { width:300px; margin-inline:auto; }
.bf-close-img img { width:100%; height:auto; border-radius:8px; }
.bf-close-img.placeholder { display:flex; align-items:center; justify-content:center; width:300px; max-width:60%; aspect-ratio:3/4; border:1px dashed rgba(250,241,218,.4); border-radius:8px; color:rgba(250,241,218,.6); font-family:var(--bf-sans); font-size:12px; text-align:center; padding:16px; }

/* ---------- after: author, CTA, series nav ---------- */
.bf-after { padding-top:8px; }
.bf-author { display:flex; gap:16px; align-items:flex-start; padding:36px 0; border-bottom:1px solid var(--bf-linen); }
.bf-author-photo { flex:none; width:56px; height:56px; border-radius:50%; background:var(--bf-linen); object-fit:cover; }
.bf-author-name { font-family:var(--bf-serif); font-weight:700; font-size:20px; margin:0; }
.bf-author-name a { color:var(--bf-deep-earth); text-decoration:none; }
.bf-author-name a:hover { color:var(--bf-clay); text-decoration:underline; }
.bf-author-role { font-family:var(--bf-sans); font-size:15px; color:var(--bf-olive); margin:2px 0 8px; }
.bf-author-bio { font-family:var(--bf-sans); font-size:15px; color:var(--bf-deep-earth); margin:0; max-width:60ch; }

.bf-cta { background:var(--bf-forest); color:var(--bf-cream); border-radius:12px; padding:34px 32px; margin:36px 0; }
.bf-cta h2 { font-family:var(--bf-serif); font-weight:700; font-size:26px; color:var(--bf-cream); margin:0 0 .4em; }
.bf-cta p { font-family:var(--bf-sans); font-size:17px; color:rgba(250,241,218,.9); margin:0 0 22px; max-width:52ch; }
.bf-cta-actions { display:flex; flex-wrap:wrap; gap:12px; }
.bf .bf-btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--bf-sans); font-weight:700; font-size:15px; border-radius:6px; padding:12px 20px; text-decoration:none; border:1px solid transparent; }
.bf .bf-btn-primary { background:var(--bf-clay); color:var(--bf-cream); }
.bf .bf-btn-primary:hover { background:#8f3d1d; color:var(--bf-cream); }
.bf .bf-btn-ghost { background:transparent; color:var(--bf-cream); border-color:rgba(250,241,218,.55); }
.bf .bf-btn-ghost:hover { border-color:var(--bf-cream); color:var(--bf-cream); }

.bf-series-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 8px; }
.bf-series-cell { border:1px solid var(--bf-linen); border-radius:8px; padding:18px 20px; }
.bf-series-cell .bf-series-dir { font-family:var(--bf-sans); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--bf-olive); display:block; margin-bottom:6px; }
.bf-series-cell .bf-series-what { font-family:var(--bf-serif); font-size:17px; color:var(--bf-olive); }
.bf-series-cell.disabled { opacity:.75; }

/* ---------- series footer + page footer ---------- */
.bf-series-footer { background:var(--bf-sand); margin-top:44px; }
.bf-series-footer .bf-wrap { padding:30px 22px; }
.bf-series-footer p { margin:0; font-family:var(--bf-sans); font-size:15.5px; line-height:1.6; color:var(--bf-deep-earth); }
.bf-series-footer .bf-series-name { font-weight:700; }
.bf-foot { background:var(--bf-forest); color:var(--bf-cream); }
.bf-foot .bf-wrap { padding:26px 22px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:space-between; font-family:var(--bf-sans); font-size:13px; }
.bf-foot a { color:var(--bf-gold); text-decoration:none; }
.bf-foot a:hover { text-decoration:underline; }

/* ---------- series index ---------- */
.bf-index-head { padding:56px 0 8px; }
.bf-index-head .bf-index-eyebrow { font-family:var(--bf-sans); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--bf-clay); margin:0; }
.bf-index-head h1 { font-family:var(--bf-serif); font-weight:700; font-size:2.4em; line-height:1.1; margin:.25em 0 .3em; color:var(--bf-deep-earth); }
.bf-index-head p { font-family:var(--bf-sans); font-size:18px; color:var(--bf-olive); max-width:60ch; margin:0; }
.bf-list { list-style:none; margin:36px 0 0; padding:0; }
.bf-list li { border-top:1px solid var(--bf-linen); padding:26px 0; }
.bf-list a { text-decoration:none; color:var(--bf-deep-earth); display:block; }
.bf-list a:hover .bf-list-title { color:var(--bf-clay); }
.bf-list .bf-list-no { font-family:var(--bf-sans); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--bf-clay); }
.bf-list .bf-list-title { font-family:var(--bf-serif); font-weight:700; font-size:1.5em; line-height:1.2; margin:.25em 0 .2em; color:var(--bf-deep-earth); }
.bf-list .bf-list-dek { font-family:var(--bf-sans); font-size:16px; color:var(--bf-olive); margin:0; }

/* ---------- responsive ---------- */
@media (min-width:900px) {
  .bf-close .bf-wrap { grid-template-columns:1fr auto; }
  .bf-close-img { justify-self:end; }
}
@media (max-width:760px) {
  body.bf { font-size:18px; }
  .bf-hero-titleblock { position:static; width:auto; left:auto; top:auto; background:var(--bf-forest); color:var(--bf-cream); padding:26px 22px 30px; }
  .bf-hero-playing .bf-hero-titleblock { visibility:visible; }
  .bf-eyebrow { font-size:12px; }
  .bf-hero-title { font-size:30px; line-height:1.08; margin:.5em 0 .4em; }
  .bf-hero-dek { font-size:18px; }
  .bf-hero-byline .bf-name { font-size:20px; }
  .bf-hero-byline .bf-role { font-size:12px; }
  .bf-hero-play { right:16px; bottom:16px; }
  .bf-body h2 { font-size:25px; }
  .bf-pull { font-size:23px; }
  .bf-close-text h3 { font-size:27px; }
  .bf-close-img { width:60%; }
  .bf-index-head h1 { font-size:2em; }
}
@media (max-width:640px) {
  .bf-callout ul { columns:1; }
  .bf-series-nav { grid-template-columns:1fr; }
}

/* ---------- 0002 additions: light-sky hero, H3 section spine, linked series nav ---------- */
/* Light-sky hero variant: for art whose quiet area is pale sky, where cream/gold type fails.
   Deep Earth type, no scrim. Mobile falls back to the standard Forest band below the image. */
.bf-hero--light .bf-hero-titleblock { color:var(--bf-deep-earth); top:5%; width:62cqw; }
.bf-hero--light .bf-eyebrow { color:var(--bf-deep-earth); font-size:max(1cqw, 8.5px); }
.bf-hero--light .bf-hero-title { font-size:3cqw; margin:.3em 0 .3em; }
.bf-hero--light .bf-hero-dek { font-size:max(1.35cqw, 11px); }
.bf-hero--light .bf-hero-byline { margin-top:1.1cqw; }
.bf-hero--light .bf-hero-byline .bf-name { font-size:1.25cqw; }
.bf-hero--light .bf-hero-byline .bf-role { font-size:max(.8cqw, 8px); }
.bf-hero--light .bf-hero-byline a { color:var(--bf-deep-earth); }
.bf-line { display:block; }
/* topbar links: .bf a (Clay, underlined) was out-ranking these on specificity */
.bf .bf-home, .bf .bf-home:hover { color:var(--bf-deep-earth); text-decoration:none; }
.bf .bf-series-tag { color:var(--bf-olive); text-decoration:none; }
.bf .bf-series-tag:hover { color:var(--bf-clay); }
/* numbered H3 sections (posts whose spine is H3 rather than H2) */
.bf-body h3 { font-family:var(--bf-serif); font-weight:700; font-size:26px; line-height:1.22; color:var(--bf-deep-earth); margin:0 0 .8em; }
.bf-pull .bf-pull-lead { font-weight:400; }
.bf-close-text .bf-close-lead { font-family:var(--bf-serif); font-weight:700; font-size:34px; line-height:1.22; color:var(--bf-cream); margin:0 0 .5em; }
.bf a.bf-series-cell { display:block; text-decoration:none; }
.bf a.bf-series-cell .bf-series-what { color:var(--bf-deep-earth); }
.bf a.bf-series-cell:hover { border-color:var(--bf-clay); }
.bf a.bf-series-cell:hover .bf-series-what { color:var(--bf-clay); }
@media (max-width:760px) {
  .bf-hero--light .bf-hero-titleblock { color:var(--bf-cream); width:auto; top:auto; }
  .bf-hero--light .bf-eyebrow { color:var(--bf-gold); font-size:12px; }
  .bf-hero--light .bf-hero-title { font-size:30px; margin:.5em 0 .4em; }
  .bf-hero--light .bf-hero-dek { font-size:18px; }
  .bf-hero--light .bf-hero-byline { margin-top:1.5em; }
  .bf-hero--light .bf-hero-byline .bf-name { font-size:20px; }
  .bf-hero--light .bf-hero-byline .bf-role { font-size:12px; }
  .bf-hero--light .bf-hero-byline a { color:var(--bf-cream); }
  .bf-line { display:inline; }
  .bf-body h3 { font-size:23px; }
  .bf-close-text .bf-close-lead { font-size:27px; }
}