/* ============================================================
   /white-collar-factory (Manifesto) - SAM design-system reskin
   (visual layer only). Layers the SAM signatures (graph-paper
   texture, numbered eyebrows, orange rules, hard-offset shadows,
   Archivo display type, navy authority bands, squared print-card
   corners) onto the existing mf- / bc- / bp- classes. No copy,
   layout, or markup structure changes; loads LAST so it wins ties.
   Self-contained: tokens defined here (sam.css is not linked on
   this page), scoped to body.mf-page which is unique to this page.
   Mirrors css/book-sam.css (the /book worked example).
   ============================================================ */

body.mf-page{
  --mfs-navy:#0F2038;
  --mfs-navy-2:#182E4E;
  --mfs-navy-3:#0A1626;
  --mfs-orange:#E07A3F;
  --mfs-orange-2:#C9632B;
  --mfs-cream:#FAF7F0;
  --mfs-cream-2:#F1EBDE;
  --mfs-ink:#232830;
  --mfs-ink-soft:#4A5160;
  --mfs-paper-line:rgba(15,32,56,.055);
  --mfs-navy-line:rgba(250,247,240,.14);
  --mfs-card-edge:rgba(15,32,56,.16);
  --mfs-radius:6px;
  --mfs-disp:"Archivo","Barlow Condensed",sans-serif;
  --mfs-body:"Readex Pro",system-ui,sans-serif;
  --mfs-serif:"Crimson Pro",Georgia,serif;

  background:var(--mfs-cream);
  color:var(--mfs-ink);
}
body.mf-page main{background:var(--mfs-cream)}

/* ---------- surfaces: graph paper on cream, flat on cream-2 ---------- */
body.mf-page .mf-hero,
body.mf-page .mf-body{
  background-color:var(--mfs-cream);
  background-image:linear-gradient(var(--mfs-paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--mfs-paper-line) 1px,transparent 1px);
  background-size:28px 28px;
}
body.mf-page .mf-audience,
body.mf-page .mf-closing{background:var(--mfs-cream-2)}

/* ---------- navy authority bands (download + final CTA) ---------- */
body.mf-page .mf-download,
body.mf-page .bp-book-cta{
  position:relative;
  background:linear-gradient(165deg,var(--mfs-navy) 0%,var(--mfs-navy-3) 100%);
  color:var(--mfs-cream);
}
body.mf-page .mf-download::before,
body.mf-page .bp-book-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--mfs-navy-line) 1px,transparent 1px),linear-gradient(90deg,var(--mfs-navy-line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.18;
}
body.mf-page .mf-download > *,
body.mf-page .bp-book-cta > *{position:relative}

/* ---------- stage strip: light SAM polish only ---------- */
body.mf-page .bc-stage-strip{
  background:var(--mfs-cream-2);
  border-bottom:1px solid var(--mfs-card-edge);
}
body.mf-page .bc-stage-strip-prefix{color:var(--mfs-orange-2)}
body.mf-page .bc-stage-strip-step.is-active{color:var(--mfs-orange-2)}

/* ---------- display type: Archivo headers ---------- */
body.mf-page main h1,
body.mf-page main h2,
body.mf-page main h3{
  font-family:var(--mfs-disp);
  letter-spacing:-0.015em;
}

/* ---------- eyebrows: SAM numbered-ledger treatment ---------- */
body.mf-page .bc-eyebrow{
  font-family:var(--mfs-body);font-weight:600;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mfs-orange-2);
  opacity:1;display:flex;align-items:center;margin-bottom:18px;
}
body.mf-page .bc-eyebrow .num{
  font-family:var(--mfs-disp);font-weight:800;color:var(--mfs-navy);
  border:1.5px solid var(--mfs-navy);border-radius:3px;
  padding:1px 7px;margin-right:12px;font-size:12px;letter-spacing:.05em;
  flex:none;
}
body.mf-page .mf-download .bc-eyebrow,
body.mf-page .bp-book-cta .bc-eyebrow{color:var(--mfs-orange)}
body.mf-page .mf-download .bc-eyebrow .num,
body.mf-page .bp-book-cta .bc-eyebrow .num{
  color:var(--mfs-cream);border-color:var(--mfs-cream);
}

/* ---------- buttons: SAM action style, squared corners ---------- */
body.mf-page .bc-btn{
  font-family:var(--mfs-disp);font-weight:800;text-transform:none;
  letter-spacing:.01em;font-size:16px;
  padding:15px 28px;border-radius:var(--mfs-radius);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
body.mf-page .bc-btn--solid{
  background:var(--mfs-orange);color:var(--mfs-navy);
  border:1px solid var(--mfs-orange);
  box-shadow:0 2px 0 var(--mfs-orange-2);
}
body.mf-page .bc-btn--solid:hover{
  background:var(--mfs-orange);color:var(--mfs-navy);border-color:var(--mfs-orange);
  transform:translateY(-2px);box-shadow:0 5px 0 var(--mfs-orange-2);
}
body.mf-page .bc-btn--ghost{
  background:transparent;color:var(--mfs-navy);
  border:1.5px solid rgba(15,32,56,.35);box-shadow:none;
}
body.mf-page .bc-btn--ghost:hover{
  background:transparent;color:var(--mfs-orange-2);border-color:var(--mfs-orange);
  transform:translateY(-2px);
}
/* ghosts on the navy bands */
body.mf-page .mf-download .bc-btn--ghost,
body.mf-page .bp-book-cta .bc-btn--ghost{
  color:var(--mfs-cream);border-color:var(--mfs-navy-line);background:transparent;
}
body.mf-page .mf-download .bc-btn--ghost:hover,
body.mf-page .bp-book-cta .bc-btn--ghost:hover{
  color:var(--mfs-orange);border-color:var(--mfs-orange);background:transparent;
}
/* the download CTA solid button joins the SAM solid read */
body.mf-page .mf-download-btn{
  background:var(--mfs-orange);border-color:var(--mfs-orange);color:var(--mfs-navy);
}
body.mf-page .mf-download-btn:hover{
  background:var(--mfs-orange);border-color:var(--mfs-orange);color:var(--mfs-navy);
}

/* ============================================================
   HERO
   ============================================================ */
body.mf-page .mf-hero h1{
  font-family:var(--mfs-disp);font-weight:900;text-transform:none;
  font-size:clamp(38px,5vw,66px);line-height:1.04;letter-spacing:-0.02em;
  color:var(--mfs-navy);
}
body.mf-page .mf-hero h1 .accent{
  color:var(--mfs-orange);
  background-image:linear-gradient(to top,rgba(224,122,63,.28) 0 .18em,transparent .18em);
  display:inline;
}
body.mf-page .mf-hero h1::after{
  content:"";display:block;width:64px;height:4px;
  background:var(--mfs-orange);margin-top:26px;
}
/* kicker pill: bordered SAM treatment */
body.mf-page .mf-hero-pill{
  font-family:var(--mfs-body);font-weight:600;font-size:12.5px;
  letter-spacing:.18em;color:var(--mfs-orange-2);
  border:1.5px solid rgba(224,122,63,.55);border-radius:3px;
  padding:6px 14px;background:rgba(224,122,63,.07);
}
body.mf-page .mf-hero-sub{
  font-family:var(--mfs-body);font-style:normal;font-weight:300;
  font-size:clamp(18px,2vw,21px);line-height:1.55;
  color:var(--mfs-ink-soft);opacity:1;
}
body.mf-page .mf-hero-byline{
  font-family:var(--mfs-body);font-weight:600;font-size:12.5px;
  letter-spacing:.18em;color:var(--mfs-ink-soft);opacity:1;
}
body.mf-page .mf-hero-epi{
  font-family:var(--mfs-serif);
  border-left:3px solid var(--mfs-orange);color:var(--mfs-orange-2);
}
body.mf-page .mf-hero-desc{
  font-family:var(--mfs-body);color:var(--mfs-ink);opacity:1;
}
body.mf-page .mf-hero-prequel-note{
  font-family:var(--mfs-body);font-style:normal;font-size:14px;
  color:var(--mfs-ink-soft);opacity:1;
}
/* hard-offset shadow on the 3D cover (drop-shadow follows the alpha) */
body.mf-page .mf-hero-cover{
  filter:drop-shadow(14px 14px 0 rgba(15,32,56,.16));
}

/* ============================================================
   AUDIENCE (two print cards)
   ============================================================ */
body.mf-page .mf-audience h2{
  font-family:var(--mfs-disp);font-weight:800;text-transform:none;
  font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-0.015em;
  color:var(--mfs-navy);
}
body.mf-page .mf-audience h2 .accent{color:var(--mfs-orange)}
body.mf-page .mf-audience h2::after{
  content:"";display:block;width:64px;height:4px;
  background:var(--mfs-orange);margin-top:22px;
}
body.mf-page .mf-audience-card{
  background:var(--mfs-cream);
  border:1.5px solid var(--mfs-card-edge);
  border-top:5px solid var(--mfs-orange);
  border-left:1.5px solid var(--mfs-card-edge);
  border-radius:8px;
  box-shadow:7px 7px 0 rgba(15,32,56,.08);
  transition:transform .18s ease,box-shadow .18s ease;
}
body.mf-page .mf-audience-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 rgba(15,32,56,.12);
}
body.mf-page .mf-audience-tag{
  font-family:var(--mfs-disp);font-weight:900;font-size:13px;
  letter-spacing:.14em;color:var(--mfs-orange-2);
}
body.mf-page .mf-audience-card p{color:var(--mfs-ink);opacity:1}

/* ============================================================
   MANIFESTO BODY (editorial)
   ============================================================ */
body.mf-page .mf-body h2{
  font-family:var(--mfs-disp);font-weight:800;text-transform:none;
  font-size:clamp(26px,3.2vw,38px);line-height:1.12;letter-spacing:-0.015em;
  color:var(--mfs-navy);
  border-top:none;padding-top:0;
}
/* orange rule under each chapter head */
body.mf-page .mf-body h2::after{
  content:"";display:block;width:64px;height:4px;
  background:var(--mfs-orange);margin-top:18px;
}
body.mf-page .mf-body h3{
  font-family:var(--mfs-disp);font-weight:700;text-transform:none;
  letter-spacing:-0.01em;font-size:clamp(19px,2.1vw,24px);line-height:1.25;
  color:var(--mfs-navy);
}
/* drop cap joins the display face */
body.mf-page .mf-body .mf-opener::first-letter{
  font-family:var(--mfs-disp);
  color:var(--mfs-orange);
  padding-top:8px;
}
/* ornament dividers warm up */
body.mf-page .mf-ornament{color:var(--mfs-orange-2);opacity:.55}
/* footnote refs */
body.mf-page .mf-body .footnote-ref sup{color:var(--mfs-orange-2)}

/* ---------- VOICES pull-quote cards: SAM print-card treatment ---------- */
body.mf-page .mf-voice{
  background:linear-gradient(165deg,var(--mfs-navy) 0%,var(--mfs-navy-3) 100%);
  border-left:none;
  border-radius:8px;
  box-shadow:12px 12px 0 rgba(15,32,56,.12);
  position:relative;
}
body.mf-page .mf-voice::before{
  content:"";position:absolute;left:0;top:24px;bottom:24px;width:4px;
  background:var(--mfs-orange);border-radius:0 2px 2px 0;
}
body.mf-page .mf-voice-tag{
  font-family:var(--mfs-body);font-weight:600;
  letter-spacing:.22em;font-size:12.5px;color:var(--mfs-orange);
}
body.mf-page .mf-voice-quote{
  font-family:var(--mfs-disp);font-style:normal;font-weight:600;
  font-size:clamp(18px,2.2vw,24px);line-height:1.42;
  color:var(--mfs-cream);
}
body.mf-page .mf-voice-name{
  font-family:var(--mfs-disp);font-weight:700;text-transform:none;
  letter-spacing:0;color:var(--mfs-cream);
}
body.mf-page .mf-voice-role,
body.mf-page .mf-voice-source{
  font-family:var(--mfs-body);color:rgba(250,247,240,.72);opacity:1;
}
body.mf-page .mf-voice-source{font-style:normal;color:rgba(250,247,240,.55)}
body.mf-page .mf-voice-portrait{border:2.5px solid var(--mfs-orange)}

/* ---------- footnotes ---------- */
body.mf-page .footnotes ol{
  font-family:var(--mfs-body);font-size:14.5px;line-height:1.6;
  color:var(--mfs-ink-soft);
}
body.mf-page .footnotes ol p{
  font-family:var(--mfs-body);font-size:14.5px;line-height:1.6;
  color:var(--mfs-ink-soft);
}

/* ============================================================
   DOWNLOAD CTA (navy authority band)
   ============================================================ */
body.mf-page .mf-download h2{
  font-family:var(--mfs-disp);font-weight:900;text-transform:none;
  font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-0.015em;
  color:var(--mfs-cream);
}
body.mf-page .mf-download h2 .accent{color:var(--mfs-orange)}
body.mf-page .mf-download h2::after{
  content:"";display:block;width:64px;height:4px;
  background:var(--mfs-orange);margin:22px auto 0;
}
body.mf-page .mf-download-lede{
  font-family:var(--mfs-body);font-style:normal;font-weight:300;
  font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;
  color:rgba(250,247,240,.82);opacity:1;
}
body.mf-page .mf-download-foot{
  font-family:var(--mfs-body);font-style:normal;font-size:13.5px;
  color:rgba(250,247,240,.6);opacity:1;
}

/* ============================================================
   CLOSING (Harrison voice card + bio)
   ============================================================ */
body.mf-page .mf-author-bio p{
  font-family:var(--mfs-body);color:var(--mfs-ink);opacity:1;
}
body.mf-page .mf-author-bio p a{color:var(--mfs-navy)}
body.mf-page .mf-author-bio p a:hover{color:var(--mfs-orange-2)}

/* ============================================================
   FINAL CTA (navy authority band)
   ============================================================ */
body.mf-page .bp-book-cta h2{
  font-family:var(--mfs-disp);font-weight:900;text-transform:none;
  font-size:clamp(36px,5.2vw,58px);line-height:1.06;letter-spacing:-0.015em;
  color:var(--mfs-cream);
}
body.mf-page .bp-book-cta h2 .accent{color:var(--mfs-orange)}
body.mf-page .bp-book-cta h2::after{
  content:"";display:block;width:64px;height:4px;
  background:var(--mfs-orange);margin-top:22px;
}
body.mf-page .bp-book-cta-sub{
  font-family:var(--mfs-body);font-style:normal;font-weight:300;
  font-size:clamp(17px,1.9vw,20px);line-height:1.6;
  color:rgba(250,247,240,.78);opacity:1;
  margin-bottom:34px;
}
/* orange divider so the navy final CTA reads against the navy footer
   (manifesto.css already sets the footer border-top; keep both in sync) */
body.mf-page .bp-book-cta{border-bottom:4px solid var(--mfs-orange)}

/* ============================================================
   EMAIL CAPTURE MODAL (print card)
   ============================================================ */
body.mf-page .mf-modal-card{
  background:var(--mfs-cream);
  border:1.5px solid var(--mfs-card-edge);
  border-left:5px solid var(--mfs-orange);
  border-radius:8px;
  box-shadow:14px 14px 0 rgba(10,22,38,.4);
}
body.mf-page .mf-modal h3{
  font-family:var(--mfs-disp);font-weight:900;text-transform:none;
  letter-spacing:-0.015em;line-height:1.1;color:var(--mfs-navy);
}
body.mf-page .mf-modal h3 .accent{color:var(--mfs-orange)}
body.mf-page .mf-modal-sub{
  font-family:var(--mfs-body);font-style:normal;color:var(--mfs-ink-soft);opacity:1;
}
body.mf-page .mf-modal-label{
  font-family:var(--mfs-body);font-weight:600;letter-spacing:.18em;
  color:var(--mfs-ink-soft);opacity:1;
}
body.mf-page .mf-modal-form input[type="email"]{
  border:1.5px solid var(--mfs-card-edge);border-radius:var(--mfs-radius);
  background:var(--mfs-cream);
}
body.mf-page .mf-modal-form input[type="email"]:focus{
  border-color:var(--mfs-orange);box-shadow:0 0 0 1px var(--mfs-orange);
}
body.mf-page .mf-modal-fine{
  font-family:var(--mfs-body);font-style:normal;color:var(--mfs-ink-soft);
}

/* ---------- small screens ---------- */
@media (max-width:480px){
  body.mf-page .mf-hero-cover{
    filter:drop-shadow(9px 9px 0 rgba(15,32,56,.16));
  }
  body.mf-page .mf-voice{box-shadow:8px 8px 0 rgba(15,32,56,.12)}
  body.mf-page .mf-modal-card{box-shadow:9px 9px 0 rgba(10,22,38,.4)}
}