/* =========================================================
   THE SCHOLARISE JOURNAL (blog landing, articles, resources)
   Pages are generated by _tools/build_blog.py from _content/blog
   Brand: --primary #035643, --secondary #349C5C, --light #EEFBF2,
          --color-accent #FFC000, --color-accent-soft #FFE8A1
   ========================================================= */

.bj { --bj-ink: #1d2e29; --bj-body: #33443f; --bj-cream: #FFFBEC; --bj-rule: rgba(3, 86, 67, .12); }
.bj > section, .bj > article { overflow-x: clip; }
.bj a:focus-visible, .bj button:focus-visible, .bj input:focus-visible, .bj summary:focus-visible, .bj [tabindex="-1"]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.bj [hidden] { display: none !important; }

.bj-sec-head { max-width: 720px; margin-bottom: 40px; }
.bj-sec-head.is-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.bj-sec-head.is-split .bj-sec-sub { margin-top: 0; }
.bj-sec-title { margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.16; letter-spacing: -.015em; color: var(--primary); text-wrap: balance; }
.bj-sec-sub { margin-top: 14px; font-size: 16.5px; line-height: 1.75; color: var(--muted); }
.bj-text-link { position: relative; display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--primary); }
.bj-text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--color-accent); transform-origin: left; transition: transform .35s var(--ease); }
.bj-text-link:hover::after { transform: scaleX(.45); }
.bj-btn-gold { height: 50px; padding: 0 26px; background: var(--color-accent); color: var(--primary); box-shadow: none; } /* no glow */
.bj-btn-gold:hover { background: #ffcb2e; transform: translateY(-2px); }
.bj-btn-gold svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.bj-btn-gold:hover svg { transform: translateX(3px); }
.bj-draft-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 6px; border-radius: 6px; background: var(--color-accent-soft); color: #6a4d00;
  font-family: var(--font-head); font-weight: 600; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }

.bj-preview-bar { background: var(--color-accent-soft); color: #4d3a00; font-size: 14px; line-height: 1.55; }
.bj-preview-bar .container { padding-top: 11px; padding-bottom: 11px; }
.bj-preview-bar strong { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 6px; background: #fff; color: var(--primary); font-family: var(--font-head); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.bj-preview-bar a { color: var(--primary); font-weight: 600; text-decoration: underline; }

/* =========================================================
   A. HERO
   ========================================================= */
.bj-hero { position: relative; padding: 40px 0 84px; /* same start below the navbar as Library */
  background: radial-gradient(55% 75% at 100% 0%, #fff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--light) 0%, #f7fcf9 100%); }
.bj-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.bj-masthead { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--secondary); }
.bj-masthead::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: currentColor; opacity: .5; }
.bj-hero-title { margin-top: 18px; font-family: var(--font-head); font-weight: 700; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.08; letter-spacing: -.028em; color: var(--primary); text-wrap: balance; }
.bj-hl { position: relative; z-index: 0; white-space: nowrap; }
.bj-hl::after { content: ""; position: absolute; z-index: -1; left: -3px; right: -5px; bottom: .06em; height: .3em; border-radius: 5px; background: var(--color-accent-soft); transform-origin: left; transition: transform .9s cubic-bezier(.22, 1, .36, 1) .6s; }
.bj-hl.is-2 { color: var(--secondary); }
.bj-hl.is-2::after { background: rgba(255, 192, 0, .55); transition-delay: 1s; }
.js .bj-hero-title:not(.is-in) .bj-hl::after { transform: scaleX(0); }
.bj-hero-lead { max-width: 570px; margin-top: 22px; font-size: 17.5px; line-height: 1.75; color: var(--text); }
.bj-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* the specimen: a notebook page reading two sentences closely */
.bj-specimen { position: relative; margin: 0; padding: 26px 28px 24px 46px; border-radius: 26px; background-color: #fff;
  background-image: linear-gradient(90deg, transparent 30px, rgba(52, 156, 92, .28) 30px, rgba(52, 156, 92, .28) 31.5px, transparent 31.5px),
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(3, 86, 67, .055) 35px 36px);
  box-shadow: 20px 20px 0 var(--color-accent-soft), 0 28px 64px rgba(3, 86, 67, .13), 0 0 0 1px rgba(3, 86, 67, .06); }
.bj-spec-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--secondary); }
.bj-spec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(255, 192, 0, .22); }
.bj-spec-row { margin-top: 22px; }
.bj-spec-line { font-family: var(--font-head); font-weight: 600; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.4; color: var(--bj-ink); letter-spacing: -.01em; }
.bj-spec-mark { position: relative; display: inline-block; padding: 0 3px; margin: 0 2px; color: var(--primary); }
.bj-spec-mark::before { content: ""; position: absolute; inset: -5px -6px -4px; border: 2.2px solid var(--secondary); border-radius: 50% 46% 52% 44%; transform: rotate(-3deg); }
.bj-spec-mark.is-soft::before { inset: auto -2px -3px; height: 9px; border: 0; border-radius: 4px; background: var(--color-accent-soft); z-index: -1; transform: none; }
.bj-spec-mark.is-soft { z-index: 0; padding: 0 2px; }
.bj-spec-note { position: relative; margin: 10px 0 0 22px; padding-left: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.bj-spec-note::before { content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 16px; border-left: 2px solid rgba(52, 156, 92, .5); border-bottom: 2px solid rgba(52, 156, 92, .5); border-bottom-left-radius: 6px; }
.bj-spec-note b { color: var(--primary); font-weight: 600; }
.bj-spec-note i { font-style: normal; font-weight: 600; color: var(--secondary); }
.bj-spec-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding-top: 18px; border-top: 1px dashed rgba(3, 86, 67, .18); }
.bj-spec-steps li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px 0 5px; border-radius: 999px; background: var(--light); font-family: var(--font-head); font-weight: 500; font-size: 12.5px; color: var(--primary); }
.bj-spec-steps span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary), var(--primary)); color: #fff; font-size: 11px; font-weight: 700; }
.js .bj-specimen:not(.is-in) .bj-spec-row, .js .bj-specimen:not(.is-in) .bj-spec-steps { opacity: 0; transform: translateY(14px); }
.bj-specimen .bj-spec-row, .bj-specimen .bj-spec-steps { transition: opacity .6s var(--ease), transform .7s var(--ease); }
.bj-specimen .bj-spec-row:nth-of-type(2) { transition-delay: .35s; }
.bj-specimen .bj-spec-row:nth-of-type(3) { transition-delay: .7s; }
.bj-specimen .bj-spec-steps { transition-delay: 1s; }

/* =========================================================
   B. THE LEARNING QUESTION
   ========================================================= */
.bj-lq { position: relative; padding: 96px 0; color: #fff; isolation: isolate;
  background: radial-gradient(70% 90% at 0% 0%, rgba(52, 156, 92, .45) 0%, rgba(52, 156, 92, 0) 60%), linear-gradient(160deg, #035643 0%, #024334 70%, #02382b 100%); }
.bj-lq::before { content: "?"; position: absolute; z-index: -1; right: 4%; top: 50%; transform: translateY(-52%); font-family: var(--font-head); font-weight: 700; font-size: 520px; line-height: 1; color: rgba(255, 255, 255, .035); pointer-events: none; }
.bj-lq-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 72px; align-items: start; }
.bj-lq-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent-soft); }
.bj-lq-q { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px 12px 12px 4px; background: var(--color-accent); color: var(--primary); font-size: 17px; letter-spacing: 0; }
.bj-lq-title { margin-top: 24px; font-family: var(--font-head); font-weight: 700; font-size: clamp(32px, 4.1vw, 54px); line-height: 1.12; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.bj-lq-answer { max-width: 640px; margin-top: 30px; padding-left: 22px; border-left: 3px solid var(--color-accent); font-size: 17.5px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.bj-lq-label { margin-bottom: 6px; font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-soft); }
.bj-lq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }
.bj-lq-meta { display: inline-flex; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.bj-lq-alt { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 192, 0, .7); text-underline-offset: 6px; }
.bj-lq-side { margin-top: 8px; padding: 26px; border-radius: 24px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); backdrop-filter: none; }
.bj-lq-side-title { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.bj-lq-list { margin-top: 14px; }
.bj-lq-list li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.bj-lq-list a, .bj-lq-list.is-plain li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 6px; align-items: baseline; padding: 14px 6px; border-radius: 12px; transition: background-color .3s, padding .3s var(--ease); }
.bj-lq-list a:hover { background: rgba(255, 255, 255, .07); padding-left: 12px; }
.bj-q-n { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--color-accent); }
.bj-q-t { font-family: var(--font-head); font-weight: 500; font-size: 16px; line-height: 1.45; color: #fff; }
.bj-lq-list .bj-draft-tag { grid-column: 2; justify-self: start; margin: 4px 0 0; }

/* =========================================================
   C. BROWSE BY CONCERN
   ========================================================= */
.bj-browse { padding: 96px 0 88px; }
.bj-concerns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
.bj-concern { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; padding: 20px 22px; border: 0; border-radius: 18px; background: var(--light); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(52, 156, 92, .14); transition: transform .35s var(--ease), box-shadow .35s, background-color .35s; }
.bj-concern:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(52, 156, 92, .45), 0 14px 30px rgba(3, 86, 67, .1); }
.bj-concern-t { font-family: var(--font-head); font-weight: 600; font-size: 16.5px; line-height: 1.4; color: var(--primary); }
.bj-concern-c { margin-top: auto; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--secondary); }
.bj-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--bj-rule), 0 12px 30px rgba(3, 86, 67, .06); scroll-margin-top: calc(var(--header-h) + 20px); }
.bj-search { position: relative; flex: 1 1 300px; display: block; }
.bj-search svg { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--secondary); pointer-events: none; }
.bj-search input { width: 100%; height: 48px; padding: 0 16px 0 46px; border: 0; border-radius: 999px; background: var(--light); box-shadow: inset 0 0 0 1px rgba(52, 156, 92, .2); font-size: 15px; color: var(--bj-ink); transition: box-shadow .25s, background-color .25s; }
.bj-search input::placeholder { color: #7c8d88; }
.bj-search input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--secondary); }
.bj-search input::-webkit-search-cancel-button { cursor: pointer; }
.bj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bj-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(3, 86, 67, .18);
  font-family: var(--font-head); font-weight: 500; font-size: 13.5px; color: var(--primary); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.bj-chip:hover { box-shadow: inset 0 0 0 1.5px var(--secondary); }
.bj-chip-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--light); font-size: 11.5px; font-weight: 600; color: var(--secondary); }
.bj-chip.is-on { background: linear-gradient(135deg, var(--secondary), var(--primary)); color: #fff; box-shadow: none; }
.bj-chip.is-on .bj-chip-n { background: rgba(255, 255, 255, .2); color: #fff; }
.bj-chip svg { width: 15px; height: 15px; }
.bj-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 28px 0 6px; }
.bj-count { font-size: 14px; font-weight: 600; color: var(--muted); }
.bj-clear { border: 0; background: none; padding: 6px 0; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--primary); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 5px; cursor: pointer; }
.bj-list { border-top: 1px solid var(--bj-rule); }
.bj-row { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr) 44px; gap: 8px 40px; padding: 28px 0; border-bottom: 1px solid var(--bj-rule); }
.bj-row::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: linear-gradient(90deg, var(--secondary), var(--primary)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.bj-row:hover::before, .bj-row:focus-within::before { transform: scaleX(1); }
.bj-row.is-enter { animation: bjEnter .45s var(--ease) both; }
@keyframes bjEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bj-row-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 4px; }
.bj-row-cat { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.bj-row-time { font-size: 13px; color: var(--muted); }
.bj-row-side .bj-draft-tag { margin: 2px 0 0; }
.bj-row-title { font-family: var(--font-head); font-weight: 600; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; letter-spacing: -.01em; color: var(--primary); }
.bj-row-title a { background: linear-gradient(var(--color-accent-soft), var(--color-accent-soft)) 0 92% / 0 .3em no-repeat; transition: background-size .45s var(--ease); }
.bj-row:hover .bj-row-title a, .bj-row-title a:focus-visible { background-size: 100% .3em; }
.bj-row-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* whole row opens the article */
.bj-row-sum { max-width: 720px; margin-top: 8px; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.bj-row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bj-row-tags li { padding: 2px 10px; border-radius: 999px; background: var(--light); font-size: 12px; font-weight: 500; color: var(--primary); }
.bj-save { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--primary); }
.bj-save.is-icon { align-self: start; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(3, 86, 67, .18); transition: background-color .25s, box-shadow .25s; }
.bj-save.is-icon:hover { box-shadow: inset 0 0 0 1.5px var(--secondary); }
.bj-save svg { width: 19px; height: 19px; transition: fill .25s; }
.bj-save.is-on svg { fill: currentColor; }
.bj-save.is-icon.is-on { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px rgba(255, 192, 0, .7); }
.bj-save.is-pop svg { animation: bjPop .45s var(--ease); }
@keyframes bjPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.bj-save-tip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, -4px); padding: 3px 9px; border-radius: 6px; background: var(--grad-green); color: #fff; font-size: 11.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.bj-save.is-icon:hover .bj-save-tip, .bj-save.is-icon:focus-visible .bj-save-tip { opacity: 1; transform: translate(-50%, 0); }
.bj-empty { padding: 56px 24px; text-align: center; border-bottom: 1px solid var(--bj-rule); }
.bj-empty-title { font-family: var(--font-head); font-weight: 600; font-size: 21px; color: var(--primary); }
.bj-empty-text { max-width: 460px; margin: 8px auto 22px; color: var(--muted); }
.bj-empty .btn { height: 44px; padding: 0 22px; }
.bj-save-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.bj-save-note svg { flex: none; width: 15px; height: 15px; color: var(--secondary); }

/* =========================================================
   D. THE PARENT'S READING DESK
   ========================================================= */
.bj-desk { padding: 96px 0; background: linear-gradient(180deg, var(--light) 0%, #f3fbf6 100%); }
.bj-desk-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.bj-desk-intro { position: sticky; top: calc(var(--header-h) + 32px); }
.bj-desk-list { display: grid; gap: 12px; }
.bj-desk-item { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; padding: 20px 24px 20px 20px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px rgba(52, 156, 92, .14), 0 6px 18px rgba(3, 86, 67, .05); transition: transform .4s var(--ease), box-shadow .4s; }
.bj-desk-item:hover { transform: translateX(6px); box-shadow: 0 0 0 1.5px rgba(52, 156, 92, .4), 0 16px 34px rgba(3, 86, 67, .1); }
.bj-desk-if { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--color-accent-soft); font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--primary); }
.bj-desk-sit { font-family: var(--font-head); font-weight: 500; font-size: 17.5px; line-height: 1.45; color: var(--bj-ink); }
.bj-desk-read { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--secondary); }
.bj-desk-read svg { display: inline-block; vertical-align: -3px; width: 15px; height: 15px; margin-left: 4px; transition: transform .3s var(--ease); }
.bj-desk-item:hover .bj-desk-read svg { transform: translateX(4px); }
.bj-desk-read .bj-draft-tag { margin: 0 0 0 8px; }

/* =========================================================
   E. ONE LEARNING PROBLEM, EXPLAINED
   ========================================================= */
.bj-explained { padding: 96px 0; }
.bj-ex-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px 32px; }
.bj-ex { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; padding: 16px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--bj-rule); transition: box-shadow .35s, transform .35s var(--ease); }
.bj-ex:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px rgba(52, 156, 92, .4), 0 20px 40px rgba(3, 86, 67, .1); }
.bj-ex.is-lead { grid-row: span 2; grid-template-columns: minmax(0, 1fr); align-items: start; padding: 18px 18px 28px; }
.bj-ex-body { padding: 4px 6px; }
.bj-ex:not(.is-lead) { align-items: stretch; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.bj-ex:not(.is-lead) .bj-ph.is-thumb { aspect-ratio: auto !important; height: 100%; min-height: 190px; }
.bj-ex.is-lead .bj-ex-body { padding: 8px 12px 0; }
.bj-ex-cat { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.bj-ex-cat .bj-draft-tag { margin-left: 4px; }
.bj-ex-title { margin-top: 8px; font-family: var(--font-head); font-weight: 600; font-size: 18.5px; line-height: 1.3; color: var(--primary); }
.bj-ex.is-lead .bj-ex-title { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.22; letter-spacing: -.015em; }
.bj-ex-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bj-ex-out { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--text); }
.bj-ex-out span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.bj-ex:not(.is-lead) .bj-ex-out { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bj-ex.is-lead .bj-ex-out { font-size: 16px; }
.bj-ex-meta { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* image placeholders: clearly a slot for a real photo, never a broken image */
.bj-ph { position: relative; margin: 0; width: 100%; overflow: hidden; border-radius: 18px; background-color: var(--light);
  background-image: repeating-linear-gradient(135deg, rgba(3, 86, 67, .045) 0 12px, transparent 12px 24px); box-shadow: inset 0 0 0 1.5px rgba(52, 156, 92, .3); }
.bj-ph::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(52, 156, 92, .35); border-radius: 12px; pointer-events: none; }
.bj-ph.has-img { background: var(--light); box-shadow: none; }
.bj-ph.has-img::before { display: none; }
.bj-ph img { width: 100%; height: 100%; object-fit: cover; }
.bj-ph-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--primary); }
.bj-ph-in svg { width: 38px; height: 38px; color: var(--secondary); opacity: .8; }
.bj-ph-tag { font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); }
.bj-ph-desc { max-width: 380px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.bj-ph-ratio { position: absolute; right: 18px; bottom: 16px; padding: 2px 8px; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 600; color: var(--secondary); box-shadow: 0 0 0 1px rgba(52, 156, 92, .2); }
.bj-ph.is-thumb { border-radius: 16px; }
.bj-ph.is-thumb .bj-ph-in { padding: 14px; }
.bj-ph.is-thumb .bj-ph-in svg { width: 28px; height: 28px; }
.bj-ph.is-thumb .bj-ph-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
.bj-ph.is-thumb .bj-ph-ratio { display: none; }

/* =========================================================
   F. INSIDE THE SENTENCE
   ========================================================= */
.bj-its { padding: 96px 0; background: var(--bj-cream); }
.bj-its-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.bj-its-entry { margin-top: 30px; padding: 24px 26px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 192, 0, .35); }
.bj-its-label { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9a7300; }
.bj-its-title { margin-top: 8px; font-family: var(--font-head); font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--primary); }
.bj-its-sum { margin: 8px 0 16px; font-size: 15px; line-height: 1.7; color: var(--text); }
.bj-its-more { margin-top: 16px; display: grid; gap: 8px; font-size: 15px; }
.bj-its-more a { color: var(--primary); font-weight: 600; }
.bj-dial { margin: 0; padding: 30px; border-radius: 26px; background: #fff; box-shadow: 0 26px 60px rgba(120, 90, 0, .1), 0 0 0 1px rgba(255, 192, 0, .3); }
.bj-dial-cap { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary); }
.bj-dial-list { display: grid; gap: 12px; margin-top: 18px; counter-reset: dial; }
.bj-dial-list li { position: relative; display: grid; gap: 4px; padding: 16px 18px 16px 58px; border-radius: 16px; background: var(--light); transition: transform .4s var(--ease); }
.bj-dial-list li:nth-child(2) { background: #f4f8e7; }
.bj-dial-list li:nth-child(3) { background: #fff6d6; }
.bj-dial-list li:hover { transform: translateX(6px); }
.bj-dial-list li::before { counter-increment: dial; content: ""; position: absolute; left: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--secondary);
  background: conic-gradient(var(--secondary) calc(var(--p, 33) * 1%), transparent 0); }
.bj-dial-list li:nth-child(1)::before { --p: 33; }
.bj-dial-list li:nth-child(2)::before { --p: 66; }
.bj-dial-list li:nth-child(3)::before { --p: 100; background: conic-gradient(var(--color-accent) 100%, transparent 0); box-shadow: inset 0 0 0 2px #e0a800; }
.bj-dial-s { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--bj-ink); }
.bj-dial-t { font-size: 13.5px; color: var(--muted); }
.bj-dial-scale { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.bj-dial-scale i { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--secondary), var(--color-accent)); }

/* =========================================================
   G. PAUSE AND THINK
   ========================================================= */
.bj-pause { padding: 96px 0; background: radial-gradient(60% 70% at 0% 100%, rgba(238, 251, 242, 1) 0%, rgba(238, 251, 242, 0) 70%), #fff; }
.bj-pause-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.bj-pt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.bj-pt-tab { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(3, 86, 67, .2); font-family: var(--font-head); font-weight: 500; font-size: 13.5px; color: var(--primary); cursor: pointer; transition: background-color .25s, color .25s; }
.bj-pt-tab.is-on { background: var(--grad-green); color: #fff; box-shadow: none; }
.bj-pt-card { position: relative; padding: 32px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--bj-rule), 0 30px 70px rgba(3, 86, 67, .12); }
.bj-pt-panel { animation: bjEnter .5s var(--ease) both; }
.bj-pt-count { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary); }
.bj-pt-sit { margin-top: 12px; font-family: var(--font-head); font-weight: 500; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--bj-ink); }
.bj-pt-sit:focus { outline: none; }
.bj-pt-ask { margin-top: 18px; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--primary); }
.bj-pt-ask span { display: block; margin-top: 2px; font-family: var(--font-body); font-weight: 500; font-size: 13.5px; color: var(--muted); }
.bj-pt-opts { display: grid; gap: 10px; margin-top: 16px; }
.bj-pt-opt { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--light); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(52, 156, 92, .15); transition: background-color .25s, box-shadow .25s, transform .25s var(--ease); }
.bj-pt-opt:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--secondary); }
.bj-pt-letter { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--secondary); box-shadow: inset 0 0 0 1.5px rgba(52, 156, 92, .35); transition: background-color .25s, color .25s; }
.bj-pt-text { padding-top: 4px; font-size: 15px; line-height: 1.55; color: var(--bj-ink); }
.bj-pt-li.is-picked .bj-pt-opt { background: #fff; box-shadow: inset 0 0 0 2px var(--secondary); }
.bj-pt-li.is-picked .bj-pt-letter { background: linear-gradient(135deg, var(--secondary), var(--primary)); color: #fff; box-shadow: none; }
.bj-pt-why { margin: 8px 0 4px 44px; padding: 10px 14px; border-left: 3px solid rgba(52, 156, 92, .4); font-size: 14px; line-height: 1.65; color: var(--text); animation: bjEnter .45s var(--ease) both; }
.bj-pt-li.is-picked .bj-pt-why { border-left-color: var(--color-accent); background: #fffaea; border-radius: 0 12px 12px 0; }
.bj-pt-why-k { display: block; margin-bottom: 2px; font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.is-revealed .bj-pt-li:not(.is-picked) .bj-pt-opt { opacity: .82; }
.bj-pt-context { margin-top: 20px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(150deg, var(--primary), #024334); color: rgba(255, 255, 255, .88); font-size: 14.5px; line-height: 1.7; animation: bjEnter .5s var(--ease) both; }
.bj-pt-context-k { margin-bottom: 4px; font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-soft); }
.bj-pt-context .bj-text-link { margin-top: 10px; color: #fff; }
.bj-pt-nav { display: flex; justify-content: flex-end; margin-top: 20px; }
.bj-pt-next { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 0; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--primary); cursor: pointer; }
.bj-pt-next svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.bj-pt-next:hover svg { transform: translateX(4px); }

/* =========================================================
   H. READ IT, USE IT
   ========================================================= */
.bj-use { padding: 96px 0; border-top: 1px solid var(--bj-rule); }
.bj-res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bj-res:only-child { grid-column: 1 / -1; max-width: 820px; }
.bj-res { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; padding: 26px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--bj-rule), 0 10px 26px rgba(3, 86, 67, .05); }
.bj-res > :not(.bj-res-ico) { grid-column: 2; }
.bj-res-ico { grid-row: span 5; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--color-accent-soft); color: var(--primary); }
.bj-res-ico svg { width: 28px; height: 28px; }
.bj-res-kind { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.bj-res-title { font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--primary); }
.bj-res-sum { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--text); }
.bj-res-pair { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.bj-res-pair a { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(52, 156, 92, .4); text-underline-offset: 4px; }
.bj-res-btn { justify-self: start; height: 42px; margin-top: 16px; padding: 0 20px; font-size: 14px; }
.bj-res-btn svg { width: 16px; height: 16px; }

/* =========================================================
   I. CONTINUE EXPLORING
   ========================================================= */
.bj-explore { padding: 96px 0; border-top: 1px solid var(--bj-rule); }
.bj-trails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.bj-trail { padding: 30px; border-radius: 26px; background: linear-gradient(180deg, #fff 0%, var(--light) 100%); box-shadow: 0 0 0 1px rgba(52, 156, 92, .16); }
.bj-trail-title { font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--primary); }
.bj-trail-intro { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.bj-trail-steps { position: relative; display: grid; gap: 4px; margin-top: 22px; }
.bj-trail-steps::before { content: ""; position: absolute; left: 15px; top: 20px; bottom: 30px; width: 2px; background: repeating-linear-gradient(180deg, rgba(52, 156, 92, .5) 0 6px, transparent 6px 12px); }
.bj-trail-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; }
.bj-trail-step > :not(.bj-trail-n) { grid-column: 2; }
.bj-trail-n { grid-row: span 3; position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--secondary); font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--secondary); }
.bj-trail-step:last-child .bj-trail-n { background: linear-gradient(135deg, var(--secondary), var(--primary)); color: #fff; box-shadow: none; }
.bj-trail-link { justify-self: start; font-family: var(--font-head); font-weight: 600; font-size: 16.5px; line-height: 1.4; color: var(--primary); }
.bj-trail-link:hover { color: var(--secondary); }
.bj-trail-why { font-size: 14px; line-height: 1.6; color: var(--muted); }
.bj-trail-step .bj-draft-tag { justify-self: start; margin: 4px 0 0; }

/* =========================================================
   J. CLOSING
   ========================================================= */
.bj-close { padding: 96px 0; color: #fff; background: radial-gradient(60% 90% at 100% 100%, rgba(52, 156, 92, .4) 0%, rgba(52, 156, 92, 0) 65%), linear-gradient(160deg, #035643 0%, #024334 100%); }
.bj-close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.bj-close .eyebrow { color: var(--color-accent-soft); }
.bj-close .bj-sec-title { color: #fff; }
.bj-close .bj-sec-sub { color: rgba(255, 255, 255, .78); }
.bj-close-list { display: grid; gap: 12px; }
.bj-close-link { display: grid; gap: 4px; padding: 20px 24px; border-radius: 20px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background-color .3s, transform .35s var(--ease); }
.bj-close-link:hover { background: rgba(255, 255, 255, .12); transform: translateX(6px); }
.bj-close-l { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: #fff; }
.bj-close-l svg { flex: none; width: 20px; height: 20px; color: var(--color-accent); transition: transform .3s var(--ease); }
.bj-close-link:hover .bj-close-l svg { transform: translateX(4px); }
.bj-close-t { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .75); }

/* =========================================================
   ARTICLE PAGE
   ========================================================= */
.bj-a-head { padding: 44px 0 48px; background: radial-gradient(55% 80% at 100% 0%, #fff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--light) 0%, #f7fcf9 100%); }
.bj-a-head-in, .bj-a-grid { display: grid; grid-template-columns: 230px minmax(0, 720px); gap: 0 64px; justify-content: center; }
.bj-a-head-in > * { grid-column: 2; }
.bj-a-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 30px; font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary); }
.bj-a-kicker a { color: var(--secondary); }
.bj-a-kicker a:hover { color: var(--primary); }
.bj-a-series { padding: 2px 10px; border-radius: 999px; background: var(--color-accent-soft); color: #6a4d00; letter-spacing: .08em; }
.bj-a-title { margin-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 3.9vw, 48px); line-height: 1.14; letter-spacing: -.025em; color: var(--primary); text-wrap: balance; }
.bj-a-sum { margin-top: 18px; font-size: 18.5px; line-height: 1.7; color: var(--text); }
.bj-a-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bj-rule); }
.bj-a-facts { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--muted); }
.bj-a-facts span + span::before { content: "·"; margin: 0 10px; color: var(--secondary); font-weight: 700; }
.bj-a-facts span:first-child { color: var(--primary); font-weight: 600; }
.bj-a-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bj-a-actions .bj-save, .bj-copy { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(3, 86, 67, .2);
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--primary); cursor: pointer; transition: box-shadow .25s, background-color .25s; }
.bj-a-actions .bj-save:hover, .bj-copy:hover { box-shadow: inset 0 0 0 1.5px var(--secondary); }
.bj-a-actions .bj-save.is-on { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px rgba(255, 192, 0, .7); }
.bj-copy svg { width: 17px; height: 17px; }
.bj-copy.is-done { background: var(--light); color: var(--secondary); }
.bj-save-hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); text-align: right; }
.bj-a-fig { display: grid; grid-template-columns: minmax(0, 1014px); justify-content: center; margin-top: -8px; margin-bottom: 8px; }
.bj-ph.is-hero { border-radius: 24px; max-height: 520px; }
.bj-a-grid { padding-top: 48px; padding-bottom: 96px; }
.bj-a-grid:not(.has-toc) .bj-a-col { grid-column: 2; }
.bj-a-col { min-width: 0; }

/* table of contents */
.bj-toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
.bj-toc-box summary { list-style: none; font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary); cursor: pointer; }
.bj-toc-box summary::-webkit-details-marker { display: none; }
.bj-toc-box ol { margin-top: 14px; border-left: 2px solid var(--bj-rule); counter-reset: toc; }
.bj-toc-box a { position: relative; display: block; margin-left: -2px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.45; color: var(--muted); transition: color .25s, border-color .25s; }
.bj-toc-box a:hover { color: var(--primary); }
.bj-toc-box a.is-on { border-left-color: var(--secondary); color: var(--primary); font-weight: 600; }

/* reading column */
.bj-a-question { position: relative; margin-bottom: 36px; padding: 20px 24px 20px 68px; border-radius: 18px; background: var(--light); font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1.45; color: var(--primary); }
.bj-a-question::before { content: "Q"; position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px 10px 10px 3px; background: var(--color-accent); font-size: 15px; color: var(--primary); }
.bj-a-question span { display: block; margin-bottom: 3px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--secondary); }
.bj-prose { font-size: 18px; line-height: 1.8; color: #2c3d38; }
.bj-prose > * + * { margin-top: 1.15em; }
.bj-prose h2 { margin-top: 2.2em; font-family: var(--font-head); font-weight: 700; font-size: clamp(23px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -.015em; color: var(--primary); scroll-margin-top: calc(var(--header-h) + 24px); }
.bj-prose h2 + * { margin-top: .7em; }
.bj-prose > p:first-child { font-size: 19.5px; color: var(--bj-ink); }
.bj-prose strong { color: var(--bj-ink); font-weight: 600; }
.bj-prose em { font-style: italic; }
.bj-prose a { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(52, 156, 92, .45); text-underline-offset: 4px; }
.bj-prose > ul { display: grid; gap: .55em; }
.bj-prose > ul > li { position: relative; padding-left: 26px; }
.bj-prose > ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 4px rgba(52, 156, 92, .14); }
.bj-prose > * + figure, .bj-prose > * + aside, .bj-prose > figure + *, .bj-prose > aside + * { margin-top: 1.8em; }

.bj-compare { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 0; }
.bj-compare-side { padding: 20px 22px; border-radius: 18px; }
.bj-compare-side.is-a { background: #f4f6f5; box-shadow: inset 0 0 0 1px rgba(3, 86, 67, .1); }
.bj-compare-side.is-b { background: #fff; box-shadow: inset 0 0 0 2px rgba(52, 156, 92, .55); }
.bj-compare-label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.bj-compare-side.is-a .bj-compare-label { color: var(--muted); }
.bj-compare-label.is-quote { text-transform: none; letter-spacing: 0; font-size: 14px; }
.bj-compare-text { margin-top: 10px; font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--bj-ink); }
.bj-compare-note { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.bj-compare-vs { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--color-accent); font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--primary); box-shadow: 0 0 0 5px #fff; }

.bj-dialogue { display: grid; gap: 10px; margin: 0; padding: 22px; border-radius: 20px; background: var(--light); }
.bj-line { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.bj-who { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--secondary); box-shadow: inset 0 0 0 1.5px rgba(52, 156, 92, .4); }
.bj-said { justify-self: start; padding: 8px 16px 9px; border-radius: 4px 16px 16px 16px; background: #fff; font-family: var(--font-head); font-weight: 500; font-size: 17px; line-height: 1.5; color: var(--bj-ink); box-shadow: 0 4px 12px rgba(3, 86, 67, .06); }
.bj-stage { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 14.5px; color: var(--muted); }

.bj-callout { position: relative; padding: 22px 24px; border-radius: 18px; font-size: 16.5px; line-height: 1.75; }
.bj-callout-kind { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.bj-callout-kind svg { width: 18px; height: 18px; }
.bj-callout-title { margin-top: 8px; font-family: var(--font-head); font-weight: 600; font-size: 17.5px; line-height: 1.4; color: var(--primary); }
.bj-callout-text { margin-top: 6px; color: var(--bj-body); }
.bj-callout-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; font-size: 14px; line-height: 1.5; }
.bj-callout-src > span { font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bj-callout-src a { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(52, 156, 92, .45); text-underline-offset: 3px; }
.bj-callout-src a.bj-src-n { text-decoration: none; color: var(--secondary); font-size: 12.5px; }
.bj-callout.is-evidence { background: #fff; box-shadow: inset 0 0 0 1px rgba(3, 86, 67, .14), inset 4px 0 0 var(--secondary); padding-left: 30px; }
.bj-callout.is-evidence .bj-callout-kind { color: var(--secondary); }
.bj-callout.is-interpretation { background: var(--light); }
.bj-callout.is-interpretation .bj-callout-kind { color: var(--primary); }
.bj-callout.is-practice { background: #fffaea; box-shadow: inset 0 0 0 1px rgba(255, 192, 0, .45); }
.bj-callout.is-practice .bj-callout-kind { color: #8a6700; }
.bj-callout.is-philosophy { background: linear-gradient(150deg, var(--primary), #024334); }
.bj-callout.is-philosophy .bj-callout-kind { color: var(--color-accent-soft); }
.bj-callout.is-philosophy .bj-callout-title { color: #fff; }
.bj-callout.is-philosophy .bj-callout-text { color: rgba(255, 255, 255, .86); }

.bj-takeaway { margin-top: 2.6em !important; padding: 28px 30px 30px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 192, 0, .5), 0 20px 46px rgba(120, 90, 0, .09); background-image: linear-gradient(180deg, #fff8dc 0, #fff8dc 6px, #fff 6px); }
.bj-takeaway-kicker { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9a7300; }
.bj-takeaway h2 { margin-top: 6px; font-family: var(--font-head); font-weight: 700; font-size: 23px; line-height: 1.3; color: var(--primary); scroll-margin-top: calc(var(--header-h) + 24px); }
.bj-takeaway ul { display: grid; gap: 12px; margin-top: 18px; }
.bj-takeaway li { position: relative; padding-left: 36px; font-size: 16.5px; line-height: 1.65; }
.bj-takeaway li::before { content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, var(--secondary), var(--primary)); }
.bj-takeaway li::after { content: ""; position: absolute; left: 8px; top: calc(.2em + 6px); width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.bj-a-res { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; margin-top: 40px; padding: 24px; border-radius: 22px; background: var(--light); }
.bj-a-res-title { margin-top: 4px; font-family: var(--font-head); font-weight: 600; font-size: 19px; color: var(--primary); }
.bj-a-res .bj-text-link { margin-top: 12px; }

.bj-sources { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bj-rule); }
.bj-sources h2 { font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); scroll-margin-top: calc(var(--header-h) + 24px); }
.bj-sources-note { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.bj-sources ol { display: grid; gap: 8px; margin-top: 14px; list-style: decimal; padding-left: 22px; font-size: 14.5px; line-height: 1.55; }
.bj-sources li::marker { color: var(--secondary); font-weight: 700; }
.bj-sources li:target { background: #fffaea; border-radius: 6px; }
.bj-sources a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(52, 156, 92, .45); text-underline-offset: 3px; }

.bj-next { position: relative; margin-top: 48px; padding: 30px 32px; border-radius: 24px; color: #fff; background: radial-gradient(70% 100% at 100% 0%, rgba(52, 156, 92, .45) 0%, rgba(52, 156, 92, 0) 65%), linear-gradient(160deg, #035643, #024334); }
.bj-next-k { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-soft); }
.bj-next-h { margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.3; }
.bj-next-h span { display: block; margin-bottom: 4px; font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, .7); }
.bj-next-h a { color: #fff; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.bj-next-why { margin-top: 10px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .82); }
.bj-next-step { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .6); }

.bj-related { margin-top: 48px; }
.bj-related-h { font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.bj-related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.bj-related a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--bj-rule); transition: box-shadow .3s, transform .35s var(--ease); }
.bj-related a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px rgba(52, 156, 92, .4), 0 14px 30px rgba(3, 86, 67, .08); }
.bj-rel-cat { font-family: var(--font-head); font-weight: 600; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.bj-rel-q { font-family: var(--font-head); font-weight: 600; font-size: 16.5px; line-height: 1.4; color: var(--primary); }
.bj-rel-t { margin-top: auto; font-size: 13.5px; color: var(--muted); }

.bj-back { margin-top: 48px; }
.bj-back a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--primary); }
.bj-back svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.bj-back a:hover svg { transform: translateX(-4px); }

/* =========================================================
   RESOURCE PAGE (printable)
   ========================================================= */
.bj-a-head.is-resource .bj-a-head-in > * { grid-column: 1 / -1; }
.bj-a-head.is-resource .bj-a-head-in { grid-template-columns: minmax(0, 960px); }
.bj-resource > .container { max-width: 1008px; padding-top: 40px; padding-bottom: 96px; }
.bj-sheet { padding: 36px 40px 40px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--bj-rule), 0 24px 60px rgba(3, 86, 67, .08); }
.bj-sheet-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 2px solid var(--light); font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--secondary); }
.bj-sheet-brand img { width: 140px; height: auto; }
.bj-sheet-body { columns: 2; column-gap: 40px; margin-top: 24px; }
.bj-sheet-body h2 { break-after: avoid; margin: 0 0 10px; padding-top: 6px; font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--primary); }
.bj-sheet-body h2:first-child { column-span: all; }
.bj-sheet-body h2:first-child + p { column-span: all; margin-bottom: 22px; padding: 14px 18px; border-radius: 14px; background: var(--light); font-size: 15px; line-height: 1.65; }
.bj-sheet-body ul { break-inside: avoid; display: grid; gap: 6px; margin-bottom: 24px; }
.bj-sheet-body li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; }
.bj-sheet-body li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--secondary); }
.bj-sheet-body strong { color: var(--primary); }
.bj-r-pair { margin-top: 24px; font-size: 15px; color: var(--muted); }
.bj-r-pair a { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(52, 156, 92, .45); text-underline-offset: 4px; }

@media print {
  .site-header, .site-footer, .wa-float, .wotd, .skip-link, .bj-preview-bar, .bj-a-actions, .bj-back, .bj-r-pair, .crumbs, .bj-a-meta, .sg-overlay { display: none !important; }
  .bj-a-head { padding: 0; background: none; }
  .bj-a-head .bj-a-kicker { margin-top: 0; }
  .bj-a-title { font-size: 22pt; }
  .bj-a-sum { font-size: 11pt; }
  .bj-resource > .container { padding: 0; }
  .bj-sheet { box-shadow: none; padding: 12pt 0 0; }
  .bj-sheet-body li, .bj-sheet-body p { font-size: 10.5pt; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .bj-a-head-in > * { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .bj-a-head-in, .bj-a-grid { grid-template-columns: 200px minmax(0, 680px); gap: 0 44px; }
}
@media (max-width: 999px) {
  .bj-hero-grid, .bj-lq-grid, .bj-desk-grid, .bj-its-grid, .bj-pause-grid, .bj-close-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .bj-hero { padding-bottom: 72px; }
  .bj-specimen { max-width: 600px; margin-right: 20px; }
  .bj-desk-intro { position: static; }
  .bj-concerns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bj-ex-grid { grid-template-columns: minmax(0, 1fr); }
  .bj-ex.is-lead { grid-row: auto; }
  .bj-sec-head.is-split { grid-template-columns: minmax(0, 1fr); }
  .bj-lq::before { font-size: 360px; right: -2%; top: auto; bottom: -60px; transform: none; }

  .bj-a-head-in, .bj-a-grid { grid-template-columns: minmax(0, 720px); }
  .bj-a-head-in > *, .bj-a-grid > * { grid-column: 1 !important; }
  .bj-a-grid { padding-top: 32px; }
  .bj-toc { position: static; margin-bottom: 28px; }
  .bj-toc-box { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--bj-rule); }
  .bj-toc-box summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; }
  .bj-toc-box summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border: solid var(--secondary); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .3s var(--ease); }
  .bj-toc-box[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .bj-toc-box ol { margin: 0 18px 14px; }
}
@media (min-width: 1000px) {
  .bj-toc-box summary { pointer-events: none; cursor: default; }
}
@media (max-width: 760px) {
  .bj-hero { padding: 40px 0 64px; }
  .bj-masthead { margin-top: 22px; font-size: 12px; }
  .bj-hero-lead { font-size: 16.5px; }
  .bj-specimen { margin-right: 14px; padding: 22px 20px 20px 38px; box-shadow: 14px 14px 0 var(--color-accent-soft), 0 22px 50px rgba(3, 86, 67, .12), 0 0 0 1px rgba(3, 86, 67, .06);
    background-image: linear-gradient(90deg, transparent 22px, rgba(52, 156, 92, .28) 22px, rgba(52, 156, 92, .28) 23.5px, transparent 23.5px), repeating-linear-gradient(180deg, transparent 0 35px, rgba(3, 86, 67, .055) 35px 36px); }
  .bj-spec-note { margin-left: 10px; font-size: 13.5px; }
  .bj-lq, .bj-browse, .bj-desk, .bj-explained, .bj-its, .bj-pause, .bj-use, .bj-explore, .bj-close { padding: 72px 0; }
  .bj-lq-side { padding: 20px; }
  .bj-sec-head { margin-bottom: 30px; }
  .bj-concerns { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 28px; }
  .bj-concern { padding: 16px 18px; }
  .bj-tools { padding: 14px; border-radius: 18px; }
  .bj-search { flex-basis: 100%; }
  .bj-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 4px; scrollbar-width: none; }
  .bj-chips::-webkit-scrollbar { display: none; }
  .bj-chip { flex: none; }
  .bj-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px 14px; padding: 22px 0; }
  .bj-row-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 0; }
  .bj-row-side .bj-draft-tag { margin: 0; }
  .bj-row-main { grid-column: 1; }
  .bj-row .bj-save { grid-column: 2; grid-row: 2; }
  .bj-desk-item { grid-template-columns: 42px minmax(0, 1fr); gap: 4px 14px; padding: 16px 18px 16px 16px; }
  .bj-desk-if { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; }
  .bj-desk-sit { font-size: 16px; }
  .bj-desk-item:hover { transform: none; }
  .bj-ex { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 22px; }
  .bj-ex:not(.is-lead) { grid-template-columns: minmax(0, 1fr); }
  .bj-ex:not(.is-lead) .bj-ph.is-thumb { aspect-ratio: 16 / 9 !important; height: auto; min-height: 0; }
  .bj-dial { padding: 22px 18px; }
  .bj-dial-list li { padding: 14px 14px 14px 52px; }
  .bj-dial-list li::before { left: 14px; }
  .bj-dial-s { font-size: 15.5px; }
  .bj-pt-card { padding: 22px 18px; border-radius: 22px; }
  .bj-pt-opt { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .bj-pt-letter { width: 28px; height: 28px; font-size: 13px; }
  .bj-pt-why { margin-left: 8px; }
  .bj-res-grid, .bj-trails { grid-template-columns: minmax(0, 1fr); }
  .bj-res { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .bj-res > :not(.bj-res-ico) { grid-column: 1; }
  .bj-res-ico { grid-row: auto; width: 48px; height: 48px; margin-bottom: 10px; }
  .bj-trail { padding: 22px 18px; }
  .bj-close-link:hover { transform: none; }

  .bj-a-head { padding: 28px 0 34px; }
  .bj-a-kicker { margin-top: 22px; }
  .bj-a-sum { font-size: 17px; }
  .bj-a-meta { flex-direction: column; align-items: flex-start; }
  .bj-save-hint { text-align: left; }
  .bj-ph.is-hero { border-radius: 18px; }
  .bj-a-question { padding: 16px 18px 16px 60px; font-size: 17px; }
  .bj-a-question::before { left: 16px; top: 16px; }
  .bj-prose { font-size: 17px; line-height: 1.78; }
  .bj-prose > p:first-child { font-size: 18px; }
  .bj-compare { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bj-callout { padding: 18px 18px; font-size: 15.5px; }
  .bj-callout.is-evidence { padding-left: 24px; }
  .bj-dialogue { padding: 16px; }
  .bj-said { font-size: 15.5px; }
  .bj-takeaway { padding: 22px 20px 24px; }
  .bj-takeaway li { font-size: 15.5px; }
  .bj-a-res { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; }
  .bj-a-res .bj-res-ico { width: 48px; height: 48px; }
  .bj-next { padding: 24px 22px; }
  .bj-related ul { grid-template-columns: minmax(0, 1fr); }
  .bj-sheet { padding: 24px 20px 26px; border-radius: 20px; }
  .bj-sheet-body { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bj *, .bj *::before, .bj *::after { animation: none !important; transition: none !important; }
  .js .bj-hero-title:not(.is-in) .bj-hl::after { transform: none; }
  .js .bj-specimen:not(.is-in) .bj-spec-row, .js .bj-specimen:not(.is-in) .bj-spec-steps { opacity: 1; transform: none; }
}

/* phones: same start below the navbar as Library (28px) */
@media (max-width: 640px) { .bj-hero { padding-top: 28px; } }