/* ======================================================================
   ALL THINGS TRUST — PLAYBOOK SYSTEM
   Shared visual + structural template for every playbook in the
   "At the Moment of Trust" series. Link this file, then keep only
   page-specific content styling (unique diagrams/illustrations) inline.

   New playbooks: copy the markup skeleton at the bottom of this comment,
   swap the eyebrow number, media, descriptor, sections, and sources.
   Everything else — hero geometry, section rhythm, typography, modules,
   CTA, back matter, footer, PDF button — comes from here.

   Design tokens (the "playbook-*" system) live in :root below:
     --pb-content-width   reading column + text modules
     --pb-media-width     hero media + wide diagrams (extends past reading col)
     --pb-hero-*          shared hero geometry (both playbooks identical)
     --pb-section-gap     rhythm between sections
     --pb-title-size / --pb-body-size   type scale
     --pb-callout-pad / --pb-radius / --pb-cta-gap   module treatment

   Canonical Trust Stack order + colours (clockwise from top of the mark):
     Provenance (cream) · Resonance (rust) · Coherence (teal) ·
     Transparency (grey) · Verification (gold)
   ====================================================================== */

:root{
  /* ---- palette (shared, do not introduce new colours) ---- */
  --ink:#1A1C1E;
  --paper:#F6F4EF;
  --paper-2:#EDEAE3;
  --muted:#5C6063;
  --rule:#D8D3C8;
  --rule-soft:rgba(26,28,30,0.08);

  --cream:#E3D5BD;
  --rust:#B24E2D;
  --teal:#2F6F71;
  --grey:#9CA3A8;
  --gold:#E8B84A;
  --accent:#2F6F71;               /* body links */

  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- widths ---- */
  --pb-content-width:41rem;       /* primary reading column + text modules */
  --pb-media-width:48rem;         /* hero media + diagrams that need room  */
  --pb-wide-width:74rem;          /* outer gutter / topbar                 */
  --pb-gutter:1.75rem;            /* page side padding                     */

  /* ---- type scale ---- */
  --pb-body-size:1.1875rem;       /* 19px editorial body */
  --pb-lede-size:1.3125rem;
  --pb-title-size:clamp(1.55rem,1.02rem + 2.1vw,2.35rem);   /* section h2, wraps */
  --pb-h3-size:1.1875rem;
  --pb-eyebrow-size:.75rem;

  /* ---- vertical rhythm (desktop) ---- */
  --pb-section-gap:6rem;          /* numbered section -> next section heading (~96px) */
  --pb-hero-gap:4.25rem;          /* hero media -> first article (~68px) */
  --pb-intro-gap:4.75rem;         /* end of intro copy -> first numbered section (~76px) */
  --pb-head-gap:2.25rem;          /* section number/headline -> first body paragraph (~36px) */
  --pb-para-gap:1.5em;            /* paragraph -> paragraph (~28px) */
  --pb-block-gap:3rem;            /* module internal top/bottom (~48px) */
  --pb-cta-gap:5rem;              /* last section -> CTA */

  /* ---- module treatment ---- */
  --pb-callout-pad:2rem;
  --pb-radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--pb-body-size);
  line-height:1.68;
  font-weight:400;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid var(--rust);outline-offset:3px;}
img,svg,video{max-width:100%;}
figure{margin:0;}
.pb-vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- layout primitives ---------- */
.pb-wrap{
  width:100%;
  max-width:var(--pb-wide-width);
  margin-inline:auto;
  padding-inline:var(--pb-gutter);
}
.pb-col{
  width:100%;
  max-width:var(--pb-content-width);
  margin-inline:auto;
}
.pb-col > p{margin:0 0 var(--pb-para-gap);}
.pb-col > p:last-child{margin-bottom:0;}
.pb-body p a,.pb-col p a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(47,111,113,0.4);
  transition:border-color .15s;
}
.pb-body p a:hover,.pb-col p a:hover{border-bottom-color:var(--accent);}

/* ---------- top bar (shared site header) ---------- */
.pb-topbar{
  border-bottom:1px solid var(--rule);
  padding:1.35rem 0;
}
.pb-topbar .pb-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.pb-brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;}
.pb-brand .mark{width:32px;height:32px;display:block;flex:none;}
.pb-brand .wordmark{
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.pb-back{
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;font-weight:500;
}
.pb-back:hover{color:var(--ink);}

/* ---------- hero (identical on every playbook) ---------- */
/* eyebrow -> visible title -> subtitle -> 16:9 media -> content. Compact + editorial. */
.pb-hero{padding:2.25rem 0 0;}
.pb-eyebrow{
  font-size:var(--pb-eyebrow-size);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);
  max-width:var(--pb-media-width);
  margin:0 auto 1rem;
}
.pb-title{
  max-width:var(--pb-media-width);
  margin:0 auto .7rem;
  font-family:var(--font);
  font-size:clamp(1.75rem,1.15rem + 2.3vw,2.6rem);
  line-height:1.08;letter-spacing:-0.03em;font-weight:600;
}
.pb-deck{
  max-width:var(--pb-media-width);
  margin:0 auto 1.6rem;
  font-size:1.0625rem;
  line-height:1.45;
  letter-spacing:-0.01em;
  color:var(--muted);
  font-weight:400;
}
.pb-media{
  width:100%;
  max-width:var(--pb-media-width);
  margin-inline:auto;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--pb-radius);
  background:#fff;
}
.pb-media > video,.pb-media > svg,.pb-media > img{
  display:block;width:100%;height:100%;object-fit:cover;
}

/* ---------- sections ---------- */
.pb-section{padding:var(--pb-section-gap) 0 0;}
.pb-hero + .pb-section{padding-top:var(--pb-hero-gap);}       /* hero -> first article */
.pb-example + .pb-section{padding-top:var(--pb-intro-gap);}   /* intro copy -> first numbered section */
/* the next section's top padding owns the inter-section gap; a trailing module
   inside a section must not stack its own margin on top of that padding */
.pb-section > :last-child,
.pb-section > .pb-wrap > :last-child,
.pb-col > :last-child{margin-bottom:0;}
/* hierarchy comes from whitespace + the rust number + the headline — no rule */
.pb-section-head{
  max-width:var(--pb-content-width);
  margin:0 auto var(--pb-head-gap);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 1.1rem;
  align-items:baseline;
}
.pb-num{
  font-size:.9375rem;font-weight:700;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;color:var(--rust);
}
.pb-headline{
  font-family:var(--font);
  font-size:var(--pb-title-size);
  line-height:1.12;letter-spacing:-0.03em;font-weight:600;
  margin:0;
}
.pb-headline .em{font-style:italic;color:var(--muted);font-weight:400;}

/* section body h3 */
.pb-col h3,.pb-body h3{
  font-size:var(--pb-h3-size);line-height:1.35;letter-spacing:-0.015em;
  font-weight:600;margin:2.25rem 0 .6rem;
}
.pb-col h3 + p,.pb-body h3 + p{margin-top:0;}

/* lede — opening narrative uses the standard body size throughout.
   For emphasis use .pb-pull (a differentiated pull quote), not a larger paragraph. */

/* ---------- pull statement ---------- */
.pb-pull{
  max-width:var(--pb-content-width);
  margin:var(--pb-block-gap) auto;
  border-left:3px solid var(--rust);
  padding:.25rem 0 .25rem 1.5rem;
  font-size:var(--pb-lede-size);line-height:1.45;letter-spacing:-0.018em;
  font-weight:500;color:var(--ink);
}
.pb-pull p{margin:0;max-width:none;}

/* ---------- worked / hypothetical example ---------- */
/* label system: "Hypothetical example" (constructed) | "Worked example" (real, public sources) */
.pb-example{
  max-width:var(--pb-content-width);
  margin:var(--pb-block-gap) auto 0;
  padding:0;
}
.pb-example-label{
  font-size:.6875rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rust);margin:0 0 1.5rem;
}
.pb-example .pb-example-title{
  font-size:clamp(1.3rem,1rem + 1.1vw,1.6rem);
  letter-spacing:-0.025em;line-height:1.2;font-weight:600;
  margin:0 0 1.25rem;color:var(--ink);
}
.pb-example p{margin:0 0 1.15em;}
.pb-example p:last-child{margin-bottom:0;}

/* example presented as a card (real / third-party) */
.pb-example.pb-card{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-top:3px solid var(--teal);
  border-radius:var(--pb-radius);
  padding:0;
}
.pb-card .pb-card-bar{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  border-bottom:1px solid var(--rule);padding:.9rem 1.75rem;
}
.pb-card .pb-card-bar .pb-example-label{color:var(--teal);margin:0;}
.pb-card .pb-card-bar .pb-disclosure{margin-left:auto;font-size:.75rem;color:var(--muted);}
.pb-card .pb-card-body{padding:1.75rem 1.75rem 2rem;}
.pb-card .pb-card-body > *{max-width:none;}
.pb-card h3{
  font-size:1.375rem;letter-spacing:-0.025em;line-height:1.2;font-weight:600;
  margin:0 0 .35rem;max-width:26ch;color:var(--ink);
}
.pb-card .pb-card-sub{font-size:.8125rem;color:var(--muted);margin:0 0 1.25rem;}
@media (max-width:46rem){
  .pb-card .pb-card-bar{padding:.85rem 1.15rem;}
  .pb-card .pb-card-bar .pb-disclosure{margin-left:0;width:100%;}
  .pb-card .pb-card-body{padding:1.35rem 1.15rem 1.6rem;}
}

/* ---------- callout (highlighted list of signals / symptoms) ---------- */
.pb-callout{
  max-width:var(--pb-content-width);
  margin:var(--pb-block-gap) auto;
  background:var(--paper-2);
  border-left:3px solid var(--rust);
  border-radius:var(--pb-radius);
  padding:1.6rem 1.75rem;
}
.pb-callout-label{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 1.25rem;color:var(--ink);
}
.pb-callout ul{margin:0;padding-left:1.1rem;}
.pb-callout li{margin-bottom:.7rem;}
.pb-callout li:last-child{margin-bottom:0;}

/* ---------- evidence: paired statistics ---------- */
.pb-stats{max-width:var(--pb-content-width);margin:var(--pb-block-gap) auto;}
.pb-stats-title{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);margin:0 0 1.6rem;
}
.pb-stats-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2.75rem;
}
.pb-stat-viz{display:flex;align-items:center;gap:.85rem;margin:0 0 1rem;}
.pb-stat-viz svg{width:54px;height:54px;flex:none;display:block;}
.pb-stat-fig{
  font-size:clamp(1.7rem,2.4vw,2.05rem);line-height:1;
  font-weight:600;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;margin:0;
}
.pb-stat-body{font-size:.9375rem;line-height:1.5;margin:0 0 .9rem;}
.pb-stat-body strong{font-weight:700;}
.pb-stat-src{font-size:.75rem;line-height:1.45;color:var(--muted);margin:0;}
@media (max-width:46rem){
  .pb-stats-grid{grid-template-columns:1fr;gap:2rem;}
}

/* ---------- figure / diagram frame (diagrams may extend past reading col) ---------- */
.pb-figure{max-width:var(--pb-media-width);margin:var(--pb-block-gap) auto;}
.pb-figure .pb-figure-frame{
  overflow-x:auto;
  padding:1.25rem 0;
}
.pb-figure svg{display:block;width:100%;height:auto;}
.pb-figure figcaption{font-size:.8125rem;line-height:1.5;color:var(--muted);margin-top:.85rem;}

/* ---------- Trust Stack: shared dimension label language ---------- */
/* colour swatch + uppercase name; canonical order Provenance -> Verification */
.pb-dim{
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.55rem;
}
.pb-dim i{width:.7rem;height:.7rem;border-radius:2px;flex:none;display:block;}
.pb-dim.d-provenance i{background:var(--cream);}
.pb-dim.d-resonance i{background:var(--rust);}
.pb-dim.d-coherence i{background:var(--teal);}
.pb-dim.d-transparency i{background:var(--grey);}
.pb-dim.d-verification i{background:var(--gold);}

/* Trust Stack as a definition list (dimension + one line) */
.pb-dims{list-style:none;margin:2.5rem auto 0;padding:0;max-width:var(--pb-content-width);}
.pb-dims li{
  display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;
  border-top:1px solid var(--rule);padding:1.15rem 0;align-items:baseline;
}
.pb-dims li:last-child{border-bottom:1px solid var(--rule);}
.pb-dims .pb-dim{font-size:.875rem;}
.pb-dims p{margin:0;font-size:1.0625rem;line-height:1.55;}
@media (max-width:46rem){.pb-dims li{grid-template-columns:1fr;gap:.5rem;}}

/* ---------- footnote citations ---------- */
sup.pb-ref{
  font-size:.6875em;font-weight:600;line-height:0;vertical-align:super;color:var(--rust);
}
sup.pb-ref a{text-decoration:none;}

/* ---------- CTA (restrained, contained — not a full-bleed banner) ---------- */
.pb-cta{margin:var(--pb-cta-gap) auto 0;max-width:var(--pb-media-width);}
.pb-cta .pb-cta-panel{
  background:var(--ink);color:var(--paper);
  border-radius:var(--pb-radius);
  padding:2.75rem 2.5rem 3rem;
}
.pb-cta .pb-cta-kicker{
  font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.25rem;
}
.pb-cta h2,.pb-cta .pb-cta-title{
  color:var(--paper);font-size:clamp(1.55rem,1.15rem + 1.5vw,2.1rem);
  line-height:1.15;letter-spacing:-0.02em;font-weight:600;
  margin:0 0 1rem;max-width:22ch;
}
.pb-cta p{margin:0 0 1.75rem;color:#C9CDD0;font-size:1rem;line-height:1.55;max-width:52ch;}
.pb-cta .pb-btn{
  display:inline-block;background:var(--gold);color:var(--ink);
  font-weight:600;font-size:1rem;letter-spacing:-0.01em;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:var(--pb-radius);
  transition:background .15s;
}
.pb-cta .pb-btn:hover{background:#F0C765;}
.pb-cta .pb-cta-alt{margin:1.25rem 0 0;font-size:.9375rem;color:#9CA3A8;}
.pb-cta .pb-cta-alt a{color:var(--paper);}

/* ---------- back matter: series + related + share + sources ---------- */
.pb-backmatter{
  padding:4rem 0 0;
}
.pb-series{
  font-size:1.0625rem;line-height:1.6;color:var(--ink);
  max-width:var(--pb-content-width);margin:0 auto 3rem;
}
.pb-series strong{font-weight:600;}
.pb-bm-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  max-width:var(--pb-content-width);margin-inline:auto;
}
.pb-bm h4{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 1rem;color:var(--muted);
}
.pb-bm ul{list-style:none;margin:0;padding:0;}
.pb-bm li{margin-bottom:.6rem;font-size:.9375rem;line-height:1.5;}
.pb-bm a{text-decoration:none;border-bottom:1px solid var(--rule);}
.pb-bm a:hover{border-bottom-color:var(--ink);}

/* share links (icon row) */
.pb-share-links{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;}
.pb-share-link{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.9375rem;color:var(--ink);text-decoration:none;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-weight:500;letter-spacing:-0.005em;transition:color .15s;
}
.pb-share-link:hover{color:var(--teal);}
.pb-share-link svg{width:15px;height:15px;flex:none;}

.pb-sources{max-width:var(--pb-content-width);margin:3.5rem auto 0;}
.pb-sources h4{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 1.25rem;color:var(--muted);
}
.pb-sources ol{margin:0;padding-left:1.4rem;font-size:.875rem;line-height:1.55;color:var(--muted);}
.pb-sources li{margin-bottom:.85rem;}
.pb-sources a{word-break:break-word;}

/* ---------- footer ---------- */
.pb-foot{
  border-top:1px solid var(--rule);margin-top:4rem;
  padding:2rem 0 4rem;font-size:.8125rem;color:var(--muted);text-align:center;
}
.pb-foot p{margin:0 0 .35rem;}

/* ---------- floating PDF / download button ---------- */
.pb-pdf{
  position:fixed;right:20px;bottom:20px;z-index:50;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--teal);color:#fff;text-decoration:none;border:none;border-radius:999px;
  padding:11px 18px;font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:-0.01em;
  cursor:pointer;box-shadow:0 2px 14px rgba(26,28,30,0.18);
  transition:transform .15s ease,box-shadow .15s ease;
}
.pb-pdf:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(26,28,30,0.24);}
.pb-pdf svg{width:16px;height:16px;flex:none;}
@media (max-width:620px){.pb-pdf{right:14px;bottom:14px;padding:10px 15px;font-size:13px;}}

/* ---------- reveal-on-load motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .pb-section,.pb-hero{animation:pbRise .5s ease both;}
  @keyframes pbRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
}

/* ---------- responsive ---------- */
@media (max-width:46rem){
  :root{
    --pb-body-size:1.125rem;
    --pb-section-gap:3.75rem;
    --pb-hero-gap:2.5rem;
    --pb-intro-gap:3rem;
    --pb-head-gap:1.75rem;
    --pb-block-gap:2.25rem;
    --pb-cta-gap:3.5rem;
    --pb-gutter:1.25rem;
  }
  .pb-hero{padding-top:1.75rem;}
  .pb-section-head{grid-template-columns:1fr;gap:.35rem;}
  .pb-bm-grid{grid-template-columns:1fr;gap:2.5rem;}
  .pb-cta .pb-cta-panel{padding:2rem 1.5rem 2.25rem;}
}

/* ---------- print ---------- */
@media print{
  @page{margin:16mm 15mm 18mm;}
  html,body{background:#fff;}
  body{font-size:10.4pt;line-height:1.5;}
  .pb-topbar,.pb-foot,.pb-pdf,.pb-share-links,.pb-bm:has(.pb-share-links){display:none;}
  .pb-wrap{max-width:none;}
  .pb-section,.pb-hero{animation:none!important;}
  .pb-hero{padding-top:0;}
  .pb-title{font-size:22pt;line-height:1.08;margin:0 0 .5rem;}
  /* a <video> hero can't render in print — drop the media box, keep title + subtitle */
  .pb-media:has(video){display:none;}
  .pb-section{padding-top:1.4rem;break-inside:auto;}
  .pb-section:first-of-type{padding-top:0;}
  h1,h2,h3,.pb-headline{break-after:avoid;}
  p,li{orphans:3;widows:3;}
  .pb-example,.pb-callout,.pb-stats,.pb-figure,.pb-dims li,.pb-cta{break-inside:avoid;}
  .pb-figure .pb-figure-frame{overflow:visible;}
  .pb-figure svg{min-width:0;}
  .pb-cta .pb-cta-panel{background:#EDEAE3!important;color:var(--ink)!important;}
  .pb-cta .pb-cta-kicker{color:var(--rust)!important;}
  .pb-cta h2,.pb-cta .pb-cta-title{color:var(--ink)!important;}
  .pb-cta p{color:var(--muted)!important;}
  .pb-cta .pb-cta-alt,.pb-cta .pb-cta-alt a{color:var(--muted)!important;}
  .pb-backmatter{break-before:page;margin-top:0;padding-top:0;border-top:none;}
  a{color:inherit;text-decoration:none;}
  sup.pb-ref a{color:#B24E2D;}
}