/* ═══ Chapter I as a horizontal journey (Early & Mature Professional) ═══
   The chapter's sub-sections become slides on one track. A sticky head shows
   the reader's position (named steps, a fill, a counter) with previous / next;
   each slide ends with a "Next:" cue. The track moves on explicit input only —
   buttons, keys, swipe — never by hijacking the wheel. Height follows the
   active slide so the page never shows empty space. */
.hz-deck{position:relative;margin-top:34px}
.hz-head{position:sticky;top:116px;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px 16px;margin:0 0 22px;border-radius:16px;border:1px solid var(--gold-border-hover);background:var(--glass-bg-heavy,rgba(8,14,26,.92));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 46px rgba(0,0,0,.35)}
.hz-rail{position:relative;display:flex;align-items:stretch;gap:4px}
.hz-rail::before{content:"";position:absolute;left:8%;right:8%;bottom:4px;height:2px;border-radius:2px;background:rgba(201,168,76,.18)}
.hz-rail .hz-fill{position:absolute;left:8%;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));box-shadow:0 0 10px rgba(240,216,120,.5);width:0;transition:width .6s cubic-bezier(.22,1,.36,1)}
.hz-step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 6px 14px;background:none;border:0;color:var(--text-muted);font-family:inherit;cursor:pointer;min-width:0;transition:color .25s}
.hz-step i{font-style:normal;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold-border-hover);display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.04em;background:var(--bg-base);transition:background .3s,color .3s,border-color .3s,transform .3s}
.hz-step span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hz-step:hover{color:var(--text)}
.hz-step.done i{background:rgba(201,168,76,.18);color:var(--gold);border-color:var(--gold)}
.hz-step.on{color:var(--gold-bright)}
.hz-step.on i{background:linear-gradient(135deg,var(--gold-deep),var(--gold),var(--gold-bright));color:#160d03;border-color:transparent;transform:scale(1.12);box-shadow:0 0 0 4px rgba(201,168,76,.16)}
.hz-ctl{display:flex;align-items:center;gap:8px}
.hz-count{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-right:6px}
.hz-count b{color:var(--gold-bright);font-size:14px}
.hz-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold-border-hover);background:rgba(255,255,255,.03);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s,color .2s}
.hz-btn svg{width:18px;height:18px}
.hz-btn:hover{background:var(--gold-glow);color:var(--gold-bright);transform:translateY(-1px)}
.hz-btn:disabled{opacity:.28;cursor:default;transform:none}
.hz-viewport{overflow:hidden;transition:height .6s cubic-bezier(.22,1,.36,1)}
.hz-track{display:flex;align-items:flex-start;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.hz-slide{flex:0 0 100%;min-width:0;padding:4px 2px 0;opacity:.35;transition:opacity .5s ease}
.hz-slide.on{opacity:1}
.hz-slide .mk-block,.hz-slide .journey-block{margin-top:0}
.hz-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--gold-border)}
.hz-foot .hz-pos{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.hz-go{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;border:1px solid var(--gold-border-hover);background:var(--glass-bg);color:var(--gold-bright);font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.hz-go svg{width:16px;height:16px;transition:transform .25s}
.hz-go:hover{background:var(--gold-glow);transform:translateY(-2px)}
.hz-go:hover svg{transform:translateX(3px)}
.hz-go.end{background:linear-gradient(135deg,#E3C26A,#F0D878 50%,#C9A84C);color:#160d03;border-color:transparent;box-shadow:0 12px 30px rgba(201,168,76,.32)}
.hz-deck:focus-visible{outline:none}
.hz-deck:focus-visible .hz-head{box-shadow:0 0 0 2px var(--gold-border-hover),0 18px 46px rgba(0,0,0,.35)}
:root[data-theme="light"] .hz-head{background:rgba(255,255,255,.94)}
:root[data-theme="light"] .hz-step i{background:#fff}
:root[data-theme="light"] .hz-step.on i{color:#160d03}
:root[data-theme="light"] .hz-step.on{color:#8B6914}
:root[data-theme="light"] .hz-go{color:#8B6914;background:#fff}
@media(max-width:900px){
  .hz-head{top:100px;grid-template-columns:1fr;gap:10px;padding:10px 12px}
  .hz-rail{gap:0}
  .hz-step span{display:none}
  .hz-step.on span{display:block;position:absolute;top:30px;left:50%;transform:translateX(-50%);font-size:10px}
  .hz-step{padding-bottom:30px}
  .hz-rail::before,.hz-rail .hz-fill{bottom:10px}
  .hz-ctl{justify-content:space-between}
  .hz-count{margin-right:auto}
}
@media(max-width:640px){
  .hz-foot{flex-direction:column;align-items:stretch;text-align:center}
  .hz-go{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .hz-track,.hz-viewport,.hz-rail .hz-fill,.hz-slide{transition:none}
}

/* ═══ Mobile (≤640px): compact stepper ─ dots for every section, a named pill for the
   current one, the counter and arrows on one slim row. Sits just below the chapter
   pill-nav so it never covers the slide's own heading. Desktop rules are untouched. */
@media(max-width:640px){
  .hz-deck{margin-top:26px}
  .hz-head{top:118px;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px 7px 10px;margin:0 0 18px;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.26)}
  .hz-rail{gap:5px;align-items:center;min-width:0}
  .hz-rail::before,.hz-rail .hz-fill{display:none}
  .hz-step{flex:0 0 auto;flex-direction:row;align-items:center;gap:0;padding:0;min-height:30px;min-width:0}
  .hz-step i{width:9px;height:9px;font-size:0;color:transparent;background:transparent;border:1.5px solid var(--gold-border-hover);transform:none;box-shadow:none}
  .hz-step.done i{background:var(--gold);border-color:var(--gold)}
  .hz-step.on{flex:1 1 auto;gap:8px;height:30px;padding:0 10px 0 4px;border-radius:999px;background:rgba(201,168,76,.14);color:var(--gold-bright)}
  .hz-step.on i{width:22px;height:22px;font-size:9.5px;color:#160d03;background:linear-gradient(135deg,var(--gold-deep),var(--gold),var(--gold-bright));border-color:transparent}
  .hz-step.on span{display:block;position:static;transform:none;font-size:10.5px;letter-spacing:.12em;line-height:1}
  .hz-ctl{gap:6px;justify-content:flex-end}
  .hz-count{font-size:11px;margin:0 2px 0 0}
  .hz-count b{font-size:13px}
  .hz-btn{width:34px;height:34px}
  .hz-btn svg{width:16px;height:16px}
  .hz-slide{padding:0}
  .hz-foot{margin:26px 0 6px;padding-top:18px;gap:12px}
  .hz-foot .hz-pos{font-size:10.5px;letter-spacing:.18em}
  .hz-go{padding:13px 20px;font-size:13.5px}
  :root[data-theme="light"] .hz-head{box-shadow:0 12px 30px rgba(27,36,52,.14)}
  :root[data-theme="light"] .hz-step.on{background:rgba(139,105,20,.1)}
}