*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  --accent:     #9e2013;
  --ink:        #111110;
  --ink-soft:   #3D3830;
  --muted:      #575757;
  --paper:      #F5F1E8;
  --hair:       #D4CAB8;
  --sidebar-bg: #ffffff;
  --white:      #FFFFFF;
  --border:     rgba(0, 0, 0, 0.08);
  --border-w:   #DDD5C2;
  --f-display:  'Source Serif Pro', Georgia, serif;
  --f-body:     'Work Sans', system-ui, -apple-system, sans-serif;
}

body {
  background: var(--sidebar-bg);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: white; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ─── TOP NAV ──────────────────────────────────────────── */
.top-nav {
  position: sticky;
  top: 0;
  background: rgba(250,250,248,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.top-nav__chapters {
  display: flex;
  align-items: stretch;
}
.top-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .65rem 1.25rem;
  border-right: 1px solid var(--border);
  color: var(--ink);
  transition: background .15s;
  min-width: 0;
}
.top-nav__item:last-child { border-right: none; }
.top-nav__item--home {
  flex: 0 0 auto;
  padding-right: 1.5rem;
  border-right: 2px solid var(--border);
}
.top-nav__item:hover { background: rgba(0,0,0,.03); }
.top-nav__item.active .top-nav__name { color: var(--accent); }
.top-nav__label {
  display: block;
  font-family: var(--f-body);
  font-size: 10px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  margin-bottom: .2rem;
}
.top-nav__name {
  display: block;
  font-family: var(--f-body);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.top-nav__progress {
  height: 3px;
  background: var(--accent);
  width: 0%;
  transition: width .1s linear;
}
@media (max-width: 767px) {
  .top-nav__label { display: none; }
  .top-nav__item { padding: .6rem .75rem; }
  .top-nav__name { font-size: 10px; }
}

/* ─── MAIN WRAPPER ─────────────────────────────────────── */
.main { min-height: 100vh; background: var(--white); }

/* ─── COVER ────────────────────────────────────────────── */
:root {
  --navy: #09101a;
}
.cover {
  background: var(--navy);
  display: flex; flex-direction: column;
  min-height: 72vh;
  position: relative;
}
.cover__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 5rem 4.5rem 4rem;
  align-items: start;
}
@media (min-width: 900px) {
  .cover__body { grid-template-columns: 1fr 260px; gap: 0; }
}
.cover__left { padding-right: 3.5rem; }
.cover__eyebrow {
  display: none; font-family: var(--f-body); font-size: 8px; font-weight: 600;
  letter-spacing: .4em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 2.5rem;
}
/* Title as stacked bars — each span is a red block */
.cover__stack {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3rem, 7vw, 9.5rem);
  letter-spacing: -.025em; line-height: 1.12;
  text-align: left
  align-items: flex-end;
}
.cover__stack span {
  display: inline-block;
  background: rgba(158, 32, 19, 0.72);
  color: #fff;
  padding: .0em .5em .0em 100vw;
  margin-left: -100vw;
  margin-right: 30vw;
  align-self: stretch;
}
.cover__stack .red { background: rgba(158, 32, 19, 0.72); }
.cover__hrule { width: 3rem; height: 1px; background: rgba(255,255,255,.2); border: none; margin: 2.25rem 0; }
.cover__sub {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 1.5vw, 1.05rem); color: rgba(255,255,255,.7);
  line-height: 1.4; max-width: 28rem;
}
.cover__right {
  display: flex; flex-direction: column; gap: 1.5rem;
  font-family: var(--f-body);
}
@media (min-width: 900px) {
  .cover__right {
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: 2.5rem;
    padding-top: 1rem;
  }
}
.cover-meta { display: flex; flex-direction: column; gap: .35rem; }
.cover-meta__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.cover-meta__val { font-size: 14px; font-weight: 400; color: rgba(255,255,255, 1); line-height: 1.65; }
.cover-meta__div { height: 1px; background: rgba(255,255,255,.1); border: none; }
@media (max-width: 767px) {
  .cover__body { padding: 3.5rem 1.5rem 2.5rem; }
  .cover__left { padding-right: 0; }
}

/* ─── CHAPTER SECTIONS ─────────────────────────────────── */
.chapter {
  scroll-margin-top: 4rem;
  background: var(--white);
  border-top: 2px solid var(--border);
}
.chapter--dark {
  background: var(--ink);
  border-top: none;
}

/* ch-inner: full-width padded container */
.ch-inner {
  padding: 5rem 4.5rem 8rem;
}
.ch-inner--continued {
  padding-top: 0;
}
@media (max-width: 767px) {
  .ch-inner { padding: 3rem 1.5rem 5rem; }
  .ch-inner--continued { padding-top: 0; }
}

/* ─── CHAPTER HEADER: two-column ─────────────────────────
   Left: large numbered title
   Right: intro description text
──────────────────────────────────────────────────────── */
.ch-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
  gap: 1.5rem;
}

.ch-header__title {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  align-items: center;
}

/* Chapter number */
.ch-n {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2rem, 2.2vw, 2.2rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .6em;
}
.chapter--dark .ch-n { color: rgba(139,35,24,.7); }

/* Chapter title */
.ch-title {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 6vw, 8rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}
.chapter--dark .ch-title { color: #F0EDE6; }


/* ─── CHAPTER BODY SECTIONS ──────────────────────────────
   Each .ch-section has a top rule separating it from header
──────────────────────────────────────────────────────── */
.ch-section {
  margin-top: 4rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chapter--dark .ch-section { border-top-color: rgba(255,255,255,.1); }

/* Body text — Work Sans */
.ch-body { max-width: 55rem; }
.ch-body p {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 1.4rem;
  letter-spacing: -.01em;
}
.ch-body p:last-child { margin-bottom: 0; }
.chapter--dark .ch-body p { color: rgba(255,255,255,.55); }

/* Section subheads — Source Serif Pro Medium (matches PDF H3: 32px, weight 500, tracking -1.68px) */
.ch-body h3 {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 2.75rem 0 .65rem;
  line-height: 1.1;
}
.chapter--dark .ch-body h3 { color: rgba(240,237,230,.9); }

/* ALL-CAPS h3 section labels — Work Sans Regular 15px (auto-classed by JS) */
/* Matches PDF small caps labels: STAKEHOLDER INTERVIEWS, WHERE WE WENT AND WHY, etc. */
.ch-body h3.section-label {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.8;
  color: var(--ink);
  margin: 2.5rem 0 .35rem;
}
.chapter--dark .ch-body h3.section-label { color: rgba(240,237,230,.85); }

/* ─── PULLQUOTE — highlighted text style ──────────────── */
.pq-wrap {
  align-self: stretch;
  padding: 3rem 4.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 767px) { .pq-wrap { padding: 2.5rem 1.5rem; } }
.pq {
  background: none;
  max-width: 34rem;
  padding: 0;
  margin-left: -4.5rem;
}
.pq-mark { display: none; }
.pq blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 6rem);
  line-height: 1.5;
  letter-spacing: -.02em;
  display: inline;
  background: var(--accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .05em .15em;
  color: #fff;
}
.pq blockquote span {
  display: inline;
}
.pq cite {
  display: block; margin-top: 1.25rem;
  font-family: var(--f-body); font-style: normal;
  font-size: 8.5px; text-transform: uppercase;
  letter-spacing: .18em; color: var(--muted);
  background: none;
  padding: 0;
}


/* ─── INLINE IMAGE SLOTS (editorial, D2-style) ──────────
   .ch-media is centered on the same axis as the text column.
   --col controls the base width (matches body text); breakout
   modifiers widen the image and shift it left or right while the
   caption inherits the exact same width + offset. */
.ch-media {
  --col: 44rem;       /* matches .ch-body max-width */
  --breakout: 14rem;  /* how far an image extends past the column edge */
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 0 5rem;
}
@media (max-width: 767px) { .ch-media { padding: 0 1.5rem 3.5rem; } }

.ch-media__img {
  background: var(--paper);
  width: 100%;
}
.ch-media__img--landscape { aspect-ratio: 3 / 2; }
.ch-media__img--portrait  { aspect-ratio: 3 / 4; max-width: 28rem; }
/* default aspect if no modifier */
.ch-media__img:not(.ch-media__img--landscape):not(.ch-media__img--portrait) {
  aspect-ratio: 16 / 9;
}


/* ─── CHAPTER OPENER — full-bleed image ───────────────── */
.ch-media--opener {
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: none;
}
.ch-media__img--full {
  aspect-ratio: 16 / 7;
  width: 100%;
  background-size: cover;
  background-position: center;
}

/* ─── BACKGROUND-IMAGE FILL for all ch-media__img ─────── */
/* Warm placeholder when no image loaded; photo fills when src set */
.ch-media__img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─── DIAGRAM IFRAME EMBED ─────────────────────── */
.diag-wrap--embed {
  border-top: 1px solid var(--border);
  padding: 0;
}
.diag-iframe {
  width: 100%;
  height: 720px;
  border: none;
  display: block;
}
@media (max-width: 639px) {
  .diag-iframe { height: 960px; }
}


/* ─── PHOTO REEL (slideshow) ─────────────────────────── */
.photo-reel {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--white);
  padding: 2rem 0;
  position: relative;
}
.photo-reel__arrow {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
  margin: 0 1rem;
  z-index: 2;
}
.photo-reel__arrow:hover { background: var(--paper); color: var(--ink); }
.photo-reel__window {
  flex: 1;
  overflow: hidden;
}
.photo-reel__track {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.photo-reel__img {
  flex: 0 0 calc(33.333% - .834rem);
  width: calc(33.333% - .834rem);
  height: auto;
  display: block;
  border-radius: 2px;
}
@media (max-width: 900px) {
  .photo-reel__img { flex: 0 0 calc(50% - .625rem); width: calc(50% - .625rem); }
}
@media (max-width: 600px) {
  .photo-reel__img { flex: 0 0 100%; width: 100%; }
  .photo-reel__arrow { margin: 0 .5rem; width: 36px; height: 36px; }
}

/* ─── INTRO / OVERVIEW ───────────────────────────────── */
.intro-overview {
  background: var(--white);
  padding: 5rem 4.5rem 6rem;
  max-width: 1200px;
  margin: 0 auto;
}
.intro-lede p {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  max-width: 52rem;
}
.intro-rule {
  border: none;
  border-top: 1px solid var(--hair);
  margin: 4rem 0;
}
.intro-argument {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .intro-argument { grid-template-columns: 1fr; gap: 3rem; }
}
.intro-argument__heading {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1.75rem;
  line-height: 1.2;
}
.intro-argument__main p {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}
.intro-argument__main p:last-child { margin-bottom: 0; }
.intro-argument__chapters {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.intro-ch {
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}
.intro-ch:last-child { border-bottom: 1px solid var(--border); }
.intro-ch__num {
  display: block;
  font-family: var(--f-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem;
}
.intro-ch__title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: .5rem;
  line-height: 1.3;
}
.intro-ch p {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.72;
  color: var(--muted);
}
@media (max-width: 767px) {
  .intro-overview { padding: 3rem 1.5rem 4rem; }
}
.about-label {
  display: block;
  font-family: var(--f-body);
  font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; text-transform: uppercase;
  color: rgba(213, 213, 213, 0.771);
  margin-bottom: .6rem;
}
.about-block p {
  font-family: var(--f-body);
  font-size: 12px; line-height: 1.72;
  color: rgba(255,255,255,.55);
}
.about-block p a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.2);
  transition: color .15s, border-color .15s;
}
.about-block p a:hover {
  color: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.5);
}
.about-note {
  margin-top: 1rem !important;
  font-size: 14px !important;
  color: rgb(255, 255, 255) !important;
  line-height: 130% !important;
}


/* ─── COVER FOOTER LOGOS ────────────────────────────── */
.cover__foot-logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cover__foot-logo {
  display: block;
  height: auto;
  opacity: .85;
  flex-shrink: 0;
}
.cover__foot-logo--snf { height: 28px; }
.cover__foot-logo--red { height: 22px; }
.cover__foot-logo--hp  { height: 26px; }
.cover__foot-support {
  font-family: var(--f-body);
  font-size: 7.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}

/* ─── BREAKOUT IMAGE PLACEMENT ──────────────────────────────────────────
   Use these two classes in your HTML to break images out of the
   text column into the left or right margin:

   class="ch-media ch-media--break-right"  →  image juts into RIGHT margin
   class="ch-media ch-media--break-left"   →  image juts into LEFT margin
   class="ch-media ch-media--wide"         →  wider, equal on both sides

   Left breakout uses the space between the sidebar and the text column.
   It will naturally stop at the sidebar edge so nothing is hidden.
   ──────────────────────────────────────────────────────────────────── */

/* RIGHT breakout — left-aligns the widened block so right side extends */
.ch-media--break-right {
  width: calc(var(--col) + var(--breakout));
  max-width: calc(var(--col) + var(--breakout));
  margin-left: auto;
  margin-right: 0;
}

/* LEFT breakout — right-aligns the widened block so left side extends
   toward the sidebar. Left edge stops at the .main left edge (sidebar). */
.ch-media--break-left {
  width: calc(var(--col) + var(--breakout));
  max-width: calc(var(--col) + var(--breakout));
  margin-left: 0;
  margin-right: auto;
}


/* ─── DISPLAY HEADING (large mid-text section subhead) ─── */
.ch-body p.display-h {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 3rem 0 1.25rem;
}
.chapter--dark .ch-body p.display-h { color: rgba(240,237,230,.9); }

/* ─── CALLOUT BOX ("WHAT'S HAPPENING?") ─────────────────── */
.callout-box {
  background: var(--paper);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}
.callout-label {
  font-family: var(--f-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .65rem !important;
}
.callout-box p {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: .75rem !important;
}
.callout-box p:last-child { margin-bottom: 0 !important; }
p.callout-note {
  border-top: 1px solid var(--hair);
  padding-top: .75rem;
  margin-top: .75rem;
  font-style: italic;
  color: var(--muted) !important;
}

/* ─── INLINE PULL QUOTE (RINO-style red box) ─────────────── */
.pq-inline {
  margin: 2rem 0;
}
.pq-inline blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 6rem);
  line-height: 1.55;
  letter-spacing: -.02em;
  background: var(--accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .15em .4em;
  color: #fff;
  display: inline;
}

@media (max-width: 1023px) {
  /* All breakouts collapse to centered column-width on smaller screens */
  .ch-media--break-right,
  .ch-media--break-left {
    width: 100%;
    max-width: var(--col);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .ch-media--break-right .ch-media__img,
  .ch-media--break-left .ch-media__img {
    width: 100%;
    max-width: 100%;
  }
}

/* ─── H4 SECTION LABELS ───────────────────────────── */
.ch-body h4 {
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.5rem 0 .5rem;
}
.chapter--dark .ch-body h4 { color: rgba(139,35,24,.7); }


/* ─── BODY INLINE PULL QUOTE ──────────────────────── */
.body-pq {
  margin: 2.25rem 0;
  padding: 0;
  background: none;
}
.body-pq blockquote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.04em;
  font-size: clamp(2rem, 3vw, 6rem);
  color: #fff;
  line-height: 1.5;
  margin: 0;
  background: var(--accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .05em .15em;
  display: inline;
}
.body-pq cite {
  display: block;
  font-family: var(--f-body);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-top: .75rem;
  font-style: normal;
}

/* ─── FLOATING/BLEED PULL-QUOTES ───────────────────── */
.pq--float-left,
.pq--float-right {
  max-width: 42%;
  display: block;
}
.pq--float-left {
  float: left;
  margin: 0 1.75rem 1rem -6rem;
  clear: left;
}
.pq--float-right {
  float: right;
  margin: 0 -6rem 1rem 1.75rem;
  clear: right;
}
.pq--float-left blockquote,
.pq--float-right blockquote {
  display: inline;
  padding: .05em .15em;
  font-size: clamp(1.5rem, 2.6vw, 3.2rem);
  line-height: 1.5;
  background: var(--accent);
  color: #fff;
}
@media (max-width: 1023px) {
  .pq--float-left, .pq--float-right {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}

/* ─── WIDE / CENTERED IMAGE VARIANT ───────────────── */
.ch-media--wide {
  width: calc(var(--col) + 28rem); /* extends both sides equally; match --breakout*2 */
  max-width: calc(var(--col) + 28rem);
  margin-left: auto;
  margin-right: auto;
}


/* ─── BODY BULLET LIST ────────────────────────────── */
.ch-body ul {
  list-style: none;
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ch-body ul li {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  padding-left: 1.4rem;
  position: relative;
  letter-spacing: -.01em;
}
.ch-body ul li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════════
   IMAGE PLACEMENT GUIDE — how to move images
   ═══════════════════════════════════════════════════════════════════

   1. Find the <div class="ch-media ..."> you want to change.
   2. Swap the modifier class on the outer div:

      class="ch-media"                   → centered, column-width (default)
      class="ch-media ch-media--wide"    → wider than text column, centered
      class="ch-media ch-media--break-right" → juts into right margin
      class="ch-media ch-media--break-left"  → juts into left margin
      class="ch-media ch-media--opener"  → full-bleed, no padding (chapter openers)

   3. Change the image shape by swapping the class on the inner div:

      class="ch-media__img"                          → 16:9 (default)
      class="ch-media__img ch-media__img--landscape" → 3:2
      class="ch-media__img ch-media__img--portrait"  → 3:4 (tall)
      class="ch-media__img ch-media__img--full"      → 16:7 (cinematic, opener only)

   4. To change the photo, edit the style="background-image:url('images/YOUR-FILE.jpeg')"

   Example:
     <div class="ch-media ch-media--break-right">
       <div class="ch-media__img ch-media__img--landscape"
            style="background-image:url('images/MY-PHOTO.jpeg')"></div>
     </div>
   ═══════════════════════════════════════════════════════════════════ */

/* Convenience "wide" modifier — expands past column on both sides */

/* ─── WIDE BREAKOUT PULLQUOTE (D2-style, breaks past column) ──────
   Usage:
     <div class="pq-wrap pq-wrap--breakout">
       <div class="pq">
         <blockquote>Quote text here</blockquote>
         <cite>— Attribution</cite>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────── */
.pq-wrap--breakout {
  padding: 3.5rem 1.5rem;
}
.pq-wrap--breakout .pq {
  max-width: calc(44rem + 16rem); /* breaks well past body column */
  margin: 0 auto;
  padding: 0;
}
.pq-wrap--breakout .pq blockquote {
  font-size: clamp(2rem, 3vw, 6rem);
}
@media (max-width: 767px) {
  .pq-wrap--breakout { padding: 2.5rem 1.5rem; }
  .pq-wrap--breakout .pq blockquote { font-size: clamp(2rem, 3vw, 6rem); }
}

/* ─── PROFILE CARDS (Jordan, Sarah, Maria) ────────────────────────
   Usage: wrap the .profile-card OUTSIDE of .ch-inner so it goes
   full-width. See HTML for the complete structure.

   To change card accent color:
     .profile-card--actor      → Actor Critics (olive green)
     .profile-card--system     → System Critics (warmer green)
     .profile-card--foundation → Foundation Defenders (deep navy)
   ─────────────────────────────────────────────────────────────── */

/* CSS custom properties per card type — change these to retheme */
.profile-card--actor     { --pc-bg: #72ae44; --pc-accent: #d4d785; }
.profile-card--system    { --pc-bg: #67a391; --pc-accent: #85d7a7; }
.profile-card--foundation { --pc-bg: #1e3655; --pc-accent: #3b6ea5; }

.profile-card {
  background: var(--pc-bg);
  margin: 0;
  overflow: hidden;
}

/* Inner container: same left/right margin as .ch-inner */
.profile-card__inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 4rem 4.5rem 5rem;
  position: relative;
}
@media (max-width: 767px) {
  .profile-card__inner { padding: 3rem 1.5rem 4rem; }
}

/* Header: "Profile of an / [Type]: Name" */
.profile-card__eyebrow {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,1);
  margin: 0 0 .4rem;
}
.profile-card__name {
  font-family: var(--f-display);
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 3rem;
}
.profile-card__name em {
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,.75);
}

/* Centered photo with margin — positioned for quote overlay */
.profile-card__photo {
  width: 96%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,.2);
  margin: 0 auto 1rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .profile-card__photo { width: 100%; margin: 0 0 2rem; }
}

/* Pull quote — overlaps photo with accent color highlight */
.profile-card__quote {
  margin: -50rem 0 3rem 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.2rem, 3vw, 3rem);
  line-height: 1.5;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 35%;
  position: relative;
  z-index: 2;
  display: inline;
  background: var(--pc-accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .04em .15em;
}
@media (max-width: 1023px) {
  .profile-card__quote {
    margin: 1.5rem 0 2rem 0;
    max-width: 100%;
  }
}

/* Two-column body text */
.profile-card__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}
@media (max-width: 720px) {
  .profile-card__cols { grid-template-columns: 1fr; gap: 0; }
}
.profile-card__col p {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.78;
  color: rgba(255,255,255,.9);
  margin-bottom: 1.1rem;
  letter-spacing: -.01em;
}
.profile-card__col p:last-child { margin-bottom: 0; }