/*!
 * journal-booklet.css: the booklet reader every Empower Journal entry uses.
 * Standing rule (2026-10-16): .claude/knowledge/journal-booklet-standard-2026-10-16.md
 *
 * js/journal-booklet.js moves the cover, lead image and article body into a fixed
 * height reader and turns them into pages with CSS columns: two page spreads on wide
 * screens, single pages on phones, turned with buttons, arrow keys or a swipe. Every
 * word stays server rendered in reading order (SEO, screen readers, no-JS), and the
 * reader is presentational only.
 *
 * Colors, type and radii come from the design system tokens; nothing here defines a
 * new brand value. Fallbacks match .claude/rules/design-system.md for pages whose
 * :root predates the radius and edge tokens.
 */

/* Before the reader builds, hide the long scroll so it never flashes. The inline head
   snippet adds .bk-pre and removes it after 3 s if the script never runs. */
html.bk-pre .art-hero,
html.bk-pre .art-lead,
html.bk-pre .art-body,
html.bk-pre .ch-rail,
html.bk-pre [data-booklet-cover],
html.bk-pre [data-booklet-body]{visibility:hidden}

.bk,.bk-panel{
  --bk-line:var(--line,rgba(201,169,110,.15));
  --bk-line-hair:var(--line-hair,rgba(201,169,110,.08));
  --bk-line-firm:var(--line-firm,rgba(201,169,110,.25));
  --bk-r-ui:var(--r-ui,8px);
  --bk-sans:var(--sans,'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  --bk-serif:var(--serif,'Cormorant Garamond',Georgia,'Times New Roman',serif);
}
.bk{
  position:relative;display:flex;flex-direction:column;box-sizing:border-box;
  height:var(--bk-h,100vh);margin-top:var(--bk-top,0px);
  background:var(--noir,#0A0A0A);color:var(--text-light,#E8E5DE);font-family:var(--bk-sans)
}
.bk *,.bk *::before,.bk *::after{box-sizing:border-box}
/* the guide engine's long-scroll chrome is replaced by the booklet's own */
html.bk-on .ch-rail,html.bk-on #readbar{display:none!important}

/* top bar: contents, where you are, page count */
.bk-top,.bk-bot{flex:0 0 auto;display:flex;align-items:center;gap:14px;width:var(--bk-w,100%);max-width:100%;margin:0 auto}
.bk-top{height:var(--bk-toph,52px)}
.bk-bot{height:var(--bk-both,64px)}
.bk-ibtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:38px;min-width:38px;padding:0 14px;border:1px solid var(--bk-line-firm);border-radius:var(--bk-r-ui);background:transparent;color:var(--cream,#F5F0E8);font:500 11px/1 var(--bk-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.bk-ibtn:hover:not(:disabled){border-color:var(--gold,#C9A96E);color:var(--gold,#C9A96E)}
.bk-ibtn:focus-visible{outline:2px solid var(--gold,#C9A96E);outline-offset:2px}
.bk-ibtn:disabled,.bk-ibtn[aria-disabled="true"]{opacity:.3;cursor:default}
.bk-ibtn[aria-disabled="true"]:hover{border-color:var(--bk-line-firm);color:var(--cream,#F5F0E8)}
.bk-next[aria-disabled="true"]:hover{background:var(--gold,#C9A96E);border-color:var(--gold,#C9A96E);color:var(--charcoal,#1A1A1A)}
.bk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bk-ibtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bk-next{background:var(--gold,#C9A96E);border-color:var(--gold,#C9A96E);color:var(--charcoal,#1A1A1A);font-weight:600}
.bk-next:hover:not(:disabled){background:var(--gold-light,#D4BA8A);border-color:var(--gold-light,#D4BA8A);color:var(--charcoal,#1A1A1A)}
.bk-where{flex:1 1 auto;min-width:0;font:500 11px/1.3 var(--bk-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-light,#E8E5DE);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-where b{color:var(--gold,#C9A96E);font-weight:500;margin-right:8px}
.bk-count{flex:0 0 auto;font:400 12px/1 var(--bk-sans);color:var(--text-muted,#8A857E);font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-count b{color:var(--cream,#F5F0E8);font-weight:500}

/* bottom bar: previous, chapter map, next */
.bk-map{flex:1 1 auto;display:flex;gap:3px;height:22px;align-items:center;min-width:0}
.bk-seg{position:relative;flex:1 1 0;min-width:4px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.bk-seg::before{content:'';position:absolute;left:0;right:0;top:9px;height:4px;background:var(--bk-line);border-radius:2px;transition:background .25s}
.bk-seg i{position:absolute;left:0;top:9px;height:4px;width:0;background:var(--gold,#C9A96E);border-radius:2px;transition:width .3s}
.bk-seg:hover::before{background:var(--bk-line-firm)}
.bk-seg.on::before{background:rgba(201,169,110,.32)}

/* the stage: sheets behind, the clipped column flow on top */
.bk-stage{position:relative;flex:1 1 auto;min-height:0;width:var(--bk-w,100%);max-width:100%;margin:0 auto}
.bk-sheet{position:absolute;top:0;bottom:0;background:var(--charcoal,#1A1A1A);border:1px solid var(--bk-line)}
.bk-sheet.s{left:0;right:0}
.bk-sheet.l{left:0;width:50%;border-right:0}
.bk-sheet.r{right:0;width:50%;border-left:0}
.bk-sheet.cover{background:linear-gradient(180deg,var(--deep-navy,#0D1B2A) 0%,var(--noir,#0A0A0A) 100%)}
.bk-sheet.blank{background:var(--noir,#0A0A0A);border-color:var(--bk-line-hair)}
.bk-folio{position:absolute;bottom:calc(var(--bk-padb,44px)/2 - 6px);font:400 10px/1 var(--bk-sans);letter-spacing:.2em;color:var(--text-muted,#8A857E);font-variant-numeric:tabular-nums}
.bk-sheet.s .bk-folio,.bk-sheet.r .bk-folio{right:var(--bk-pad,44px)}
.bk-sheet.l .bk-folio{left:var(--bk-pad,44px)}
.bk-spread .bk-stage::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:48px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.34) 46%,var(--bk-line) 50%,rgba(0,0,0,.34) 54%,rgba(0,0,0,0) 100%);pointer-events:none;z-index:2}
.bk-view{position:absolute;inset:0;overflow:hidden;z-index:1;touch-action:pan-y}
.bk-view:focus{outline:none}
.bk-flow{height:var(--bk-flowh,600px);margin:var(--bk-padt,40px) 0 0;padding:0 var(--bk-pad,44px);column-fill:auto;orphans:3;widows:3;transition:opacity .16s ease}
.bk-flow.bk-fade{opacity:0}
/* extends the scroll range to the last spread's full offset (see recount in the script) */
.bk-endsp{position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;pointer-events:none}
/* fills the rest of a page before a chapter where the browser ignores forced column breaks */
.bk-spacer{display:block;margin:0;padding:0}

/* content inside the flow: the article styles stay; only layout is adjusted */
.bk-flow .rv,.bk-panel .rv{opacity:1!important;transform:none!important;transition:none!important}
/* a heading that receives focus after a contents jump: gold ring for keyboard users only */
.bk-flow [tabindex="-1"]:focus{outline:none}
.bk-flow [tabindex="-1"]:focus-visible{outline:2px solid var(--gold,#C9A96E);outline-offset:4px}
.bk-flow .art-hero,.bk-flow [data-booklet-cover]{padding:0;overflow:visible;min-height:var(--bk-flowh,600px);display:flex;flex-direction:column;justify-content:center;break-after:column}
.bk-flow .art-hero::before,.bk-flow [data-booklet-cover]::before,.bk-flow .gold-hr{display:none}
/* the cover sheet paints the cover; a marked cover's own band would sit inside it */
.bk-flow [data-booklet-cover]{background:none}
.bk-flow .art-hero-in{max-width:none}
.bk-flow .art-back{margin-bottom:18px}
.bk-flow .art-cat{margin-bottom:14px}
.bk-flow .art-h1{font-size:clamp(28px,3.2vw,44px);margin-bottom:14px}
.bk-flow .art-meta{margin-bottom:14px}
.bk-flow .art-intro{font-size:15.5px;line-height:1.7;max-width:none}
.bk-flow .art-lead{margin:0;padding:0;max-width:none;height:var(--bk-flowh,600px);display:flex;flex-direction:column;align-items:center;justify-content:center;break-before:column;break-after:column}
.bk-flow .art-lead img{width:auto;max-width:100%;height:auto;max-height:calc(var(--bk-flowh,600px) - 64px);object-fit:contain}
.bk-flow .art-body{max-width:none;margin:0;padding:0}
.bk-flow .art-toc,.bk-flow .ftb-progress,.bk-flow .jnav,.bk-flow #jAnchor{display:none!important}
.bk-flow .jstage{display:block!important;animation:none!important}
.bk-flow .bk-chap{break-before:column}
.bk-flow .art-h2{margin-top:0}
.bk-flow h2,.bk-flow h3,.bk-flow .stage-n,.bk-flow .art-cat{break-after:avoid}
.bk-flow figure,.bk-flow .art-fig,.bk-flow .tool,.bk-flow .ck,.bk-flow .ck label,.bk-flow .art-cta,.bk-flow .art-chart,.bk-flow .art-pull,.bk-flow table,.bk-flow tr,.bk-flow .gl-item,.bk-flow .intake,.bk-flow li,.bk-flow .finish-badge,.bk-flow .bk-cover-act{break-inside:avoid}
.bk-flow .art-fig img{width:auto;max-width:100%;max-height:calc(var(--bk-flowh,600px) - 90px);margin:0 auto}
.bk-flow .art-cta{margin-top:24px;margin-bottom:0;padding:48px 32px}
/* weekly posts ([data-booklet-cover] / [data-booklet-body] templates) */
.bk-flow .hero,.bk-flow .chart,.bk-flow .stats,.bk-flow .cta,.bk-flow .disclosure,.bk-flow .signature,.bk-flow .takeaways li,.bk-flow .article-badge{break-inside:avoid}
.bk-flow [data-booklet-body] :is(.hero,figure) img{width:auto;max-width:100%;height:auto;max-height:calc(var(--bk-flowh,600px) - 40px)}
.bk-flow .intake{margin-top:26px}

/* inserts: a calculator or table taller than a page shows as a card and opens full size */
.bk-flow .bk-popped{display:none!important}
/* a call to action too tall for a small page runs onto the next one rather than hiding */
.bk-flow .bk-frag{overflow:visible!important}
.bk-pop{break-inside:avoid;margin:26px 0;padding:24px 26px;border:1px solid var(--bk-line-firm);border-radius:var(--r-card,14px);background:linear-gradient(180deg,rgba(201,169,110,.06),rgba(201,169,110,.015))}
.bk-pop-ey{font:500 10px/1 var(--bk-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#C9A96E);margin-bottom:10px}
.bk-pop-t{font-family:var(--bk-serif);font-size:22px;line-height:1.2;color:var(--cream,#F5F0E8);margin-bottom:6px}
.bk-pop-d{font:300 13px/1.6 var(--bk-sans);color:var(--text-muted,#8A857E);margin-bottom:16px}
.bk-pop .bk-btn{margin-top:6px}
.bk-panel{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,10,.86);backdrop-filter:blur(6px)}
.bk-panel.open{display:flex}
.bk-panel-box{display:flex;flex-direction:column;width:100%;max-width:820px;max-height:100%;background:var(--charcoal,#1A1A1A);border:1px solid var(--bk-line-firm);border-radius:var(--r-card,14px);overflow:hidden}
.bk-panel-head{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 18px 14px 26px;border-bottom:1px solid var(--bk-line)}
.bk-panel-t{flex:1 1 auto;min-width:0;font-family:var(--bk-serif);font-size:22px;line-height:1.2;color:var(--cream,#F5F0E8)}
.bk-panel-body{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 26px 26px;font-family:var(--bk-sans);color:var(--text-light,#E8E5DE)}
.bk-panel-body > .tool,.bk-panel-body > .art-chart{margin:20px 0 0;border:0;background:none;padding:0}
.bk-panel-body > .tool .tool-t,.bk-panel-body > .art-chart .ac-title{display:none}
@media (max-width:640px){.bk-panel{padding:0}.bk-panel-box{border-radius:0;height:100%;max-height:none;border:0}.bk-panel-body{padding:4px 18px 22px}.bk-pop{padding:20px 20px}}

/* cover actions */
.bk-cover-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.bk-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--bk-line-firm);border-radius:var(--bk-r-ui);background:transparent;color:var(--cream,#F5F0E8);font:500 11px/1 var(--bk-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,color .25s,background .25s;text-decoration:none}
.bk-btn:hover{border-color:var(--gold,#C9A96E);color:var(--gold,#C9A96E)}
.bk-btn:focus-visible{outline:2px solid var(--gold,#C9A96E);outline-offset:2px}
.bk-btn.primary{background:var(--gold,#C9A96E);border-color:var(--gold,#C9A96E);color:var(--charcoal,#1A1A1A);font-weight:600}
.bk-btn.primary:hover{background:var(--gold-light,#D4BA8A);border-color:var(--gold-light,#D4BA8A);color:var(--charcoal,#1A1A1A)}
.bk-hint{flex:1 0 100%;font:300 12px/1.6 var(--bk-sans);color:var(--text-muted,#8A857E);margin-top:4px}

/* contents page */
.bk-contents{break-before:column}
.bk-c-ey{font:500 10px/1 var(--bk-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#C9A96E);margin:0 0 12px}
.bk-c-t{font-family:var(--bk-serif);font-weight:400;font-size:clamp(26px,3vw,34px);color:var(--cream,#F5F0E8);line-height:1.15;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--bk-line)}
.bk-c-list{list-style:none;margin:0;padding:0}
.bk-c-list li{margin:0;padding:0}
.bk-c-list a{display:flex;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px solid var(--bk-line-hair);color:var(--text-light,#E8E5DE);text-decoration:none;transition:color .25s}
.bk-c-list a:hover .t,.bk-c-list a:focus-visible .t{color:var(--gold-light,#D4BA8A)}
.bk-c-list a:focus-visible{outline:2px solid var(--gold,#C9A96E);outline-offset:2px}
.bk-c-list .n{flex:0 0 26px;font:500 11px/1 var(--bk-sans);color:var(--gold,#C9A96E);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.bk-c-list .t{flex:1 1 auto;font-family:var(--bk-serif);font-size:18px;line-height:1.25;transition:color .25s}
.bk-c-list .pg{flex:0 0 auto;font:400 12px/1 var(--bk-sans);color:var(--text-muted,#8A857E);font-variant-numeric:tabular-nums}
.bk-c-list .read .pg::before{content:'\2713';color:var(--gold,#C9A96E);margin-right:8px}
.bk-c-list .ref .n{color:var(--text-muted,#8A857E)}

/* light theme (data-booklet-theme="light"): cream pages with dark ink for entries whose
   own design is light, such as /guides/first-time-buyer/. The frame, bars and cover stay
   dark. Ink comes from the page's own --ink when it defines one, else charcoal. */
.bk-light .bk-sheet{background:var(--warm-white,var(--cream,#F5F0E8));border-color:var(--line-warm,#D9D2C5)}
.bk-light .bk-sheet.cover{background:linear-gradient(180deg,var(--deep-navy,#0D1B2A) 0%,var(--noir,#0A0A0A) 100%);border-color:var(--bk-line)}
.bk-light .bk-sheet.blank{background:var(--cream,#F5F0E8);border-color:var(--line-warm,#D9D2C5)}
.bk-light .bk-folio{color:var(--ink-muted,var(--text-muted,#8A857E))}
.bk-light.bk-spread .bk-stage::after{background:linear-gradient(90deg,rgba(26,26,26,0) 0%,rgba(26,26,26,.09) 46%,var(--line-warm,#D9D2C5) 50%,rgba(26,26,26,.09) 54%,rgba(26,26,26,0) 100%)}
/* small labels on cream use the muted ink (gold-dark is under 4.5:1 there); focus rings use gold-dark (over 3:1) */
.bk-light .bk-c-ey,.bk-light .bk-c-list .n,.bk-light .bk-pop-ey{color:var(--ink-muted,var(--text-muted,#8A857E))}
.bk-light .bk-c-list a:focus-visible,.bk-light .bk-flow [tabindex="-1"]:focus-visible,.bk-light .bk-pop .bk-btn:focus-visible{outline-color:var(--gold-dark,#A8884F)}
.bk-light .bk-c-t{color:var(--ink,var(--charcoal,#1A1A1A));border-color:var(--line-warm,#D9D2C5)}
.bk-light .bk-c-list a{color:var(--ink,var(--charcoal,#1A1A1A));border-color:var(--line-warm,#D9D2C5)}
.bk-light .bk-c-list a:hover .t,.bk-light .bk-c-list a:focus-visible .t{color:var(--gold-dark,#A8884F)}
.bk-light .bk-c-list .pg,.bk-light .bk-c-list .ref .n{color:var(--ink-muted,var(--text-muted,#8A857E))}
.bk-light .bk-c-list .read .pg::before{color:var(--gold-dark,#A8884F)}
.bk-light .bk-pop{border-color:var(--line-warm,#D9D2C5);background:linear-gradient(180deg,rgba(201,169,110,.12),rgba(201,169,110,.04))}
.bk-light .bk-pop-t{color:var(--ink,var(--charcoal,#1A1A1A))}
.bk-light .bk-pop-d{color:var(--ink-muted,var(--text-muted,#8A857E))}

@media (max-width:640px){
  .bk-ibtn{padding:0 11px}
  .bk-ibtn .lbl{display:none}
  .bk-where{font-size:10px;letter-spacing:.12em}
  .bk-c-list a{padding:8px 2px}
  .bk-c-list .t{font-size:16px}
  .bk-flow .art-back{margin-bottom:12px}
  .bk-flow .art-h1{font-size:26px;margin-bottom:10px}
  .bk-flow .art-meta{margin-bottom:10px}
  .bk-flow .art-intro{font-size:14.5px;line-height:1.65}
  .bk-cover-act{margin-top:16px;gap:10px}
  .bk-hint{font-size:11px;margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .bk-flow{transition:none}
  .bk-seg i,.bk-seg::before{transition:none}
}

/* print reads linear, as the server rendered it */
@media print{
  .bk{height:auto!important;margin:0!important;display:block}
  .bk-top,.bk-bot,.bk-sheet,.bk-cover-act,.bk-contents,.bk-pop,.bk-spacer,.bk-endsp,.bk-panel{display:none!important}
  .bk-flow .bk-popped{display:revert!important}
  .bk-flow .bk-fit{zoom:1!important}
  .bk-stage,.bk-view{position:static!important;height:auto!important;overflow:visible!important;width:auto!important}
  .bk-flow{columns:auto!important;column-count:auto!important;height:auto!important;margin:0!important;padding:0!important}
  .bk-flow .art-hero,.bk-flow .art-lead{min-height:0;height:auto}
}