/* ============================================================================
   CAREER JOURNEY — "Story Book" theme (2026-05-20)
   A warm, hardback-interior reading experience for career-journey.html.
   Scoped entirely under body.cj-book and loaded AFTER main.min.css, so it
   overrides the dark project chrome without touching the shared stylesheet.
   Vanilla CSS · design-token redefinition + bespoke cj-* book components.
   ============================================================================ */

/* ── Palette: redefine the dark tokens to a warm-paper book interior ───────── */
body.cj-book {
  /* paper + ink */
  --cj-desk:        #e6dbc4;   /* tone around the page (the "desk/cover") */
  --cj-page:        #faf6ec;   /* the page surface */
  --cj-page-edge:   #efe7d4;   /* page gradient edge */
  --cj-ink:         #2b2620;   /* warm near-black ink */
  --cj-ink-soft:    #574d40;   /* secondary ink */
  --cj-ink-mute:    #8d8273;   /* tertiary / captions */
  --cj-rule:        rgba(43,38,32,0.16);
  --cj-rule-soft:   rgba(43,38,32,0.09);
  --cj-gold:        #c9a959;   /* decorative gold (large numerals, rules) */
  --cj-gold-ink:    #8a6a26;   /* readable gold (labels, links) */

  /* remap the shared dark tokens so any inherited component reskins to paper */
  --bg-void: var(--cj-page);
  --bg-deep: var(--cj-page);
  --bg-surface: var(--cj-page);
  --bg-elevated: rgba(43,38,32,0.03);
  --text-primary: var(--cj-ink);
  --text-secondary: var(--cj-ink-soft);
  --text-tertiary: var(--cj-ink-mute);
  --text-muted: var(--cj-ink-mute);
  --accent: var(--cj-gold-ink);
  --border: var(--cj-rule);
  --border-hover: var(--cj-rule);

  background: var(--cj-desk);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,89,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120,96,40,0.06) 0%, transparent 60%);
  color: var(--cj-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Reading-progress bar (top, gold) ──────────────────────────────────────── */
.cj-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #b8985a, var(--cj-gold));
  z-index: 1200; transition: width 90ms linear; pointer-events: none;
}

/* ── Fixed nav → light paper bar ───────────────────────────────────────────── */
body.cj-book .project-nav {
  background: rgba(250,246,236,0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cj-rule);
}
body.cj-book .project-nav__logo { color: var(--cj-ink); font-family: var(--font-display); letter-spacing: .01em; }
body.cj-book .project-nav__back { color: var(--cj-ink-soft); }
body.cj-book .project-nav__back:hover { color: var(--cj-gold-ink); }

/* ── The book page surface ─────────────────────────────────────────────────── */
body.cj-book main.project-detail-main-content {
  max-width: 940px;
  margin: clamp(72px, 9vh, 116px) auto clamp(48px, 7vh, 96px);
  background: linear-gradient(180deg, var(--cj-page) 0%, var(--cj-page-edge) 100%);
  border-radius: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 50px -24px rgba(60,46,20,0.45),
    0 2px 8px rgba(60,46,20,0.10);
  border: 1px solid rgba(60,46,20,0.10);
  position: relative;
  overflow: hidden;
}
/* a thin gold "binding" rule down the left edge */
body.cj-book main.project-detail-main-content::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
  background: linear-gradient(180deg, var(--cj-gold), #b8985a 50%, var(--cj-gold));
  opacity: .55;
}

/* measured reading column */
body.cj-book .project-detail-header,
body.cj-book .project-detail-content { background: transparent; }
body.cj-book .project-detail-header { padding: clamp(2.4rem,5vw,4rem) 0 1.5rem; }
body.cj-book .project-detail-content { padding: 0 0 1rem; }
body.cj-book .project-detail-main-content .container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 5vw, 3rem);
}

/* ── Body typography: serif book text ──────────────────────────────────────── */
body.cj-book .project-detail-content p,
body.cj-book .project-detail-content li,
body.cj-book .callout p,
body.cj-book .callout li {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.075rem;
  line-height: 1.78;
  color: var(--cj-ink);
  letter-spacing: .002em;
}
body.cj-book .project-detail-content p { margin: 0 0 1.15rem; }
body.cj-book .text-body-l {
  font-size: 1.2rem !important;
  line-height: 1.72;
  color: #3a332a;
}
body.cj-book .text-secondary { color: var(--cj-ink-soft); }
body.cj-book .text-muted { color: var(--cj-ink-mute); }
body.cj-book .project-detail-content strong,
body.cj-book .callout strong { color: var(--cj-ink); font-weight: 700; }
body.cj-book .project-detail-content em,
body.cj-book .callout em { color: #4a3f2f; }
body.cj-book a.link--orange { color: var(--cj-gold-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(138,106,38,0.4); }

/* ── Title page ────────────────────────────────────────────────────────────── */
body.cj-book .project-badge--blue {
  display: inline-block; background: transparent; border: none; color: var(--cj-gold-ink);
  font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; padding: 0 0 .9rem;
  border-bottom: 1px solid var(--cj-rule);
}
body.cj-book .project-detail-title {
  font-family: var(--font-display); color: var(--cj-ink);
  font-weight: 600; font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1.04;
  letter-spacing: -.01em; margin: 1.4rem 0 0;
}
body.cj-book .project-detail-title .text-secondary {
  display: block; font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem); color: var(--cj-ink-soft); margin-top: .35rem;
}
/* gold rule under the title */
body.cj-book .project-detail-header .project-detail-title::after {
  content: ""; display: block; width: 80px; height: 2px;
  background: var(--cj-gold); margin: 1.4rem 0 0; opacity: .8;
}

/* intro + technical-terms note as a "frontispiece" */
body.cj-book .callout--muted {
  background: var(--cj-page); border: 1px solid var(--cj-rule-soft);
  border-left: 3px solid var(--accent); border-radius: 2px;
}
body.cj-book .project-detail-header > .container > .callout--muted:first-of-type {
  background: transparent; border: none; border-left: none; padding-left: 0;
}
body.cj-book .callout--muted .callout--muted {
  background: rgba(201,169,89,0.08); border: 1px dashed var(--accent-30, rgba(201,169,89,0.3));
  border-left: 1px dashed rgba(201,169,89,0.4); margin-top: 1.2rem;
}

/* ── Table of contents (Navigate this page) → book "Contents" ──────────────── */
body.cj-book .callout--muted .callout__title { font-family: var(--font-display); }
body.cj-book .project-detail-header .callout__title {
  font-family: var(--font-display) !important; font-size: 1.6rem; font-weight: 600;
  color: var(--cj-ink); letter-spacing: .01em; text-transform: none;
  text-align: center; margin-bottom: 1.1rem;
}
body.cj-book .list-content { list-style: none; padding: 0; margin: 0; }
body.cj-book .list-content li {
  font-family: var(--font-display); font-size: 1.18rem; color: var(--cj-ink);
  padding: .55rem 0; border-bottom: 1px dotted var(--cj-rule);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
}
body.cj-book .list-content li:last-child { border-bottom: none; }
body.cj-book .list-content li a { color: var(--cj-ink); text-decoration: none; }
body.cj-book .list-content li a:hover { color: var(--cj-gold-ink); }
body.cj-book .list-content li .text-muted { font-family: var(--font-body); font-size: .82rem; letter-spacing: .02em; }

/* ── Section eyebrow labels (pd-label) ─────────────────────────────────────── */
body.cj-book .pd-label,
body.cj-book .pd-label--gold, body.cj-book .pd-label--red,
body.cj-book .pd-label--blue, body.cj-book .pd-label--purple {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--cj-gold-ink);
  margin: 0 0 .6rem; background: none;
}

/* section headings */
body.cj-book .project-detail-content h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--cj-ink);
  font-size: clamp(1.85rem, 4vw, 2.7rem); line-height: 1.12; letter-spacing: -.005em;
  margin: .1rem 0 1.1rem;
}
body.cj-book .project-detail-content h3 {
  font-family: var(--font-display); font-weight: 600; color: var(--cj-ink);
  font-size: 1.5rem; line-height: 1.2; margin: 1.8rem 0 .6rem;
}
body.cj-book .project-detail-content h4 { font-family: var(--font-display); color: var(--cj-ink); }

/* ── Chapter openers: hairline scene-break + big roman numeral ─────────────── */
body.cj-book div[id^="chapter-"] {
  margin-top: clamp(3.4rem, 8vw, 6rem);
  border-top: 1px solid var(--cj-rule);
  padding-top: clamp(1.8rem, 4vw, 3rem);
}
/* the numeral lives on the chapter div's own ::before (reliable; no .pd-label clash) */
body.cj-book div[id^="chapter-"]::before {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3.6rem, 9vw, 6.4rem); line-height: .86; color: var(--cj-gold);
  opacity: .95; margin-bottom: .15rem; letter-spacing: .02em;
}
body.cj-book div#chapter-1::before { content: "I"; }
body.cj-book div#chapter-2::before { content: "II"; }
body.cj-book div#chapter-3::before { content: "III"; }
body.cj-book div#chapter-4::before { content: "IV"; }
/* small ornament between numeral and label */
body.cj-book div[id^="chapter-"] > .pd-label { position: relative; }

/* ── Drop caps on lead paragraphs ──────────────────────────────────────────── */
body.cj-book .project-detail-content > .container > div:first-child > p.text-body-l:first-of-type::first-letter,
body.cj-book div[id^="chapter-"] > p.text-body-l:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 600; float: left;
  font-size: 3.5em; line-height: .72; padding: .06em .12em 0 0; color: var(--cj-gold-ink);
}

/* ── Asides: the coloured callouts → elegant margin notes ──────────────────── */
body.cj-book .callout {
  border-radius: 3px; padding: 1.25rem 1.4rem; margin: 1.6rem 0;
  position: relative; box-shadow: 0 1px 2px rgba(60,46,20,0.05);
}
body.cj-book .callout__label {
  font-family: var(--font-body); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .55rem; display: block;
}
body.cj-book .callout--gold {
  background: #f5ead0; border: 1px solid rgba(154,122,46,0.28); border-left: 4px solid #9a7a2e;
}
body.cj-book .callout--gold .callout__label { color: #8a6a26; }
body.cj-book .callout--red {
  background: #f4e4dd; border: 1px solid rgba(160,73,44,0.26); border-left: 4px solid #a0492c;
}
body.cj-book .callout--red .callout__label { color: #9c3f22; }
body.cj-book .callout--green {
  background: #e7eddc; border: 1px solid rgba(77,106,58,0.26); border-left: 4px solid #4d6a3a;
}
body.cj-book .callout--green .callout__label { color: #44602f; }
body.cj-book .callout--blue,
body.cj-book .callout--muted {
  background: #eef0ea; border: 1px solid var(--cj-rule); border-left: 4px solid #6b7280;
}
body.cj-book .callout__title {
  font-family: var(--font-display); font-weight: 600; color: var(--cj-ink);
  font-size: 1.45rem;
}

/* the closing "epilogue" callout */
body.cj-book div.mt-10:last-child > .callout--gold {
  background: linear-gradient(180deg, #f7eed8, #f3e7cb);
  border: 1px solid rgba(154,122,46,0.3); border-left: 4px solid #9a7a2e;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
body.cj-book div.mt-10:last-child > .callout--gold .callout__title {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); text-align: center; margin-bottom: 1rem;
}
body.cj-book .text-italic { font-style: italic; color: var(--cj-ink-soft); }

/* info-grid (Ch.3 AI division) */
body.cj-book .info-grid { gap: 1rem; }
body.cj-book .info-card {
  background: #f3ecdb; border: 1px solid var(--cj-rule); border-radius: 3px; padding: 1.2rem 1.3rem;
}
body.cj-book .info-card__title { font-family: var(--font-display); color: var(--cj-ink); font-weight: 600; font-size: 1.2rem; }
body.cj-book .list-content--sm li { font-size: .98rem; }

/* ── Pull quotes ───────────────────────────────────────────────────────────── */
body.cj-book .cj-pull {
  border: none; margin: 2.2rem auto; padding: .4rem 0; max-width: 30ch; text-align: center;
}
body.cj-book .cj-pull::before {
  content: ""; display: block; width: 46px; height: 2px; background: var(--cj-gold);
  margin: 0 auto 1.2rem; opacity: .85;
}
body.cj-book .cj-pull p {
  font-family: var(--font-display) !important; font-style: italic; font-weight: 400;
  font-size: clamp(1.55rem, 3.6vw, 2.1rem) !important; line-height: 1.28 !important;
  color: #4a3f2c !important; margin: 0 !important;
}
body.cj-book .cj-pull::after {
  content: ""; display: block; width: 46px; height: 2px; background: var(--cj-gold);
  margin: 1.2rem auto 0; opacity: .85;
}

/* ── "What the work taught me" — principles ────────────────────────────────── */
body.cj-book #lessons::before,
body.cj-book #ecosystem::before {
  content: "⁂"; display: block; text-align: center; color: var(--cj-gold);
  font-size: 1.3rem; opacity: .65; margin: clamp(2.2rem,5vw,3.4rem) 0 clamp(1.4rem,3vw,2.2rem);
}
body.cj-book .decision-stack { gap: 0; }
body.cj-book .decision-card {
  display: block;                 /* main.css makes this a 2-col grid; lessons fill only 1 col */
  background: transparent; border: none; border-top: 1px solid var(--cj-rule);
  border-radius: 0; padding: 1.4rem 0;
}
body.cj-book .decision-card > div { max-width: none; }
body.cj-book .decision-card:last-child { border-bottom: 1px solid var(--cj-rule); }
body.cj-book .decision-card__number {
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cj-gold-ink); margin-bottom: .4rem;
}
body.cj-book .decision-card__title { font-family: var(--font-display); font-weight: 600; color: var(--cj-ink); font-size: 1.4rem; line-height: 1.22; }
body.cj-book .decision-card__body { font-family: Georgia, serif; }

/* ── "The five platforms" — appendix cards ─────────────────────────────────── */
body.cj-book .platform-card {
  background: #f4edda; border: 1px solid var(--cj-rule); border-radius: 3px;
  transition: box-shadow .25s var(--ease, ease), transform .25s var(--ease, ease);
}
body.cj-book .platform-card:hover { box-shadow: 0 8px 24px -12px rgba(60,46,20,0.4); transform: translateY(-2px); border-color: rgba(154,122,46,0.4); }
body.cj-book .platform-card__tag,
body.cj-book .platform-card__tag--gold, body.cj-book .platform-card__tag--cyan,
body.cj-book .platform-card__tag--blue, body.cj-book .platform-card__tag--red,
body.cj-book .platform-card__tag--purple {
  font-family: var(--font-body); font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cj-gold-ink); background: none;
}
body.cj-book .platform-card__title { font-family: var(--font-display); font-weight: 600; }
body.cj-book .platform-card__title a { color: var(--cj-ink); }
body.cj-book .platform-card__title a:hover { color: var(--cj-gold-ink); }
body.cj-book .platform-card__title--cyan a { color: var(--cj-ink); }

/* ── Footer → light ────────────────────────────────────────────────────────── */
body.cj-book .footer {
  background: var(--cj-desk); border-top: 1px solid rgba(60,46,20,0.12); color: var(--cj-ink-soft);
}
body.cj-book .footer .footer-link { color: var(--cj-ink-soft); }
body.cj-book .footer .footer-link:hover { color: var(--cj-gold-ink); }

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.cj-book .platform-card { transition: none; }
  body.cj-book .platform-card:hover { transform: none; }
  .cj-progress { transition: none; }
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body.cj-book main.project-detail-main-content { margin-left: 10px; margin-right: 10px; border-radius: 2px; }
  body.cj-book .project-detail-main-content .container { padding: 0 1.25rem; }
  body.cj-book .cj-pull { max-width: 100%; }
  body.cj-book div[id^="chapter-"] > p.text-body-l:first-of-type::first-letter { font-size: 3em; }
}