/* =========================================================================
   AI Christian Benchmark — 2026 Report
   Design system: TGC 2025 benchmark structure.
   Palette: the 2026 report's navy, forest, orange and mint on a warm grey
   ground; the section photographs are duotones in those tones.
   Grid: 1489px container, 24.5px gutters, asymmetric 38/62 column pair.
   Type: Plantin MT Pro Light (Adobe Fonts) for headings, Inter for body.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Ground & surface */
  --ground:      #F7F7F4;
  --surface:     #FFFFFF;
  --warm-grey:   #EBEBE5;
  --rule:        #DEDED6;

  /* Dark grounds. The token names are the roles they play (plum is the
     cover and header ground, slate the second dark, moss the part-divider
     green); the values are the report's original navy and forest. */
  --plum:        #113244;   /* navy */
  --plum-deep:   #113244;
  --slate:       #113244;   /* navy */
  --slate-2:     #274555;
  --moss:        #294030;   /* forest */
  --moss-deep:   #2B4633;   /* forest, for headings and pass marks */
  --rust:        #E35B28;   /* orange: accent text, links, fail marks */

  /* Ink */
  --ink:         #26251F;
  --ink-2:       #55564E;
  --ink-3:       #83847B;

  /* Accents */
  --apricot:     #F04E23;
  --chartreuse:  #B8F1D4;   /* mint: highlights on dark grounds */
  --green:       #36AA74;
  --purple:      #321B3E;
  --sage:        #C3CEC7;
  --lavender:    #CFCDC3;

  /* Tints */
  --tint-apricot:  #FBEBE2;   /* light tan: caveat panel, hero subtitle */
  --tint-sage:     #EAF0EA;
  --tint-lavender: #E8E2EC;

  /* Framework diagram (p.15): six roles, each a distinct hue drawn from the
     report's own palette: warm grey, green, orange, ramp gold, purple, slate.
     Green and orange are deepened a step so white labels pass 4.5:1. */
  --fw-frame:    #CFCDC3;
  --fw-religion: #2A7F57;
  --fw-p1:       #C94F1E;
  --fw-p2:       #E2AE45;
  --fw-p3:       #6A4A86;
  --fw-p4:       #2F6591;

  /* Chart value ramp, best -> worst (sampled from the 2026 report) */
  --ramp-0: #2B4633;
  --ramp-1: #546C3F;
  --ramp-2: #7C924C;
  --ramp-3: #AC933E;
  --ramp-4: #DA742D;
  --ramp-5: #E35B28;

  /* Layout */
  --container: 1489px;
  --gutter: 24.5px;
  --measure: 833px;
  --sec-top: 110px;
  --sec-bot: 118px;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'plantin', 'Iowan Old Style', Georgia, serif;

  --fs-hero:   clamp(3.5rem, 9vw, 9rem);          /* 56 -> 144 */
  --fs-d1:     clamp(2.375rem, 4.2vw, 3.5rem);    /* 38 -> 56 */
  --fs-d2:     clamp(1.75rem, 2.4vw, 2.25rem);    /* 28 -> 36 */
  --fs-h3:     clamp(1.625rem, 2.3vw, 2.125rem);  /* 26 -> 34 */
  --fs-h4:     1.25rem;                            /* 20 */
  --fs-body:   1.25rem;                            /* 20 */
  --fs-small:  1rem;                               /* 16 */
  --fs-micro:  0.875rem;                           /* 14 */
  --fs-label:  0.75rem;                            /* 12 */
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* No smooth scrolling: this document is ~100,000px tall, so an animated jump
   from the contents to an appendix would crawl for seconds and be cancelled by
   the first touch. Anchor links land immediately. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.63;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.15; text-wrap: balance; }

/* Headings are set in Plantin Light. Every heading carries weight 300 and
   size and colour do the ranking that bold used to. */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .heading-rail, .heading-section,
.part__title, .toc__title, .toc__part-name, .headline-group__name,
.figure__title, .framework__title, .feature__title, .triad__name,
.cover__year, .embargo__title, .pullquote__text, .epigraph__text,
.gate__title, .gate__thanks-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-synthesis: none;
  /* Plantin kerns a word space hard against a following W, T or V, so
     "Did We" and "the Ten" close up to one word; a touch of word space
     restores the gap without loosening the letters. */
  word-spacing: 0.06em;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

/* Bare URLs appear in the methodology and endnotes; let them break rather
   than push the page sideways on a phone. */
a, .prose, .note, .micro, .excerpt__quote, .qgrid__item, .endnotes {
  overflow-wrap: break-word;
}
a[href^="http"] { overflow-wrap: anywhere; }

:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--chartreuse); color: var(--moss-deep); }

/* ---------- 3. Layout ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The signature asymmetric pair: 38% label rail / 62% content */
.row {
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: start;
}
.row > * { padding-inline: var(--gutter); min-width: 0; }

.row--even { grid-template-columns: 1fr 1fr; }
.row--single { grid-template-columns: 100%; }

.measure { max-width: var(--measure); }

/* Anchored sections must clear the fixed header */
.section, .part, .pullquote, .cover { scroll-margin-top: 96px; }
@media (max-width: 900px) { .section, .part, .pullquote, .cover { scroll-margin-top: 76px; } }

/* Section rhythm */
.section {
  padding-block: var(--sec-top) var(--sec-bot);
}
.section--flush-top { padding-block-start: 0; }
.section--tight { padding-block: 72px 76px; }
.section--tight-bottom { padding-block-end: 34px; }

/* A sentence that introduces the figure directly beneath it. Normal space
   above to separate it from the previous block, almost none below so it reads
   as attached to its figure rather than floating between two. */
.section--leadin { padding-block: 64px 26px; }
.section--leadin .question-head { margin-bottom: 0; }

/* A standalone divider band: just a heading, nothing under it. The heading's
   usual bottom margin is meant to separate it from following content, so here
   it is cleared and the padding made symmetric — otherwise the title floats
   above the optical centre of the band. */
.section--band { padding-block: 84px; }
.section--band .question-head { margin-bottom: 0; }
@media (max-width: 900px) {
  .section--leadin { padding-block: 44px 20px; }
  .section--band { padding-block: 56px; }
}

/* Ground variants */
.section--cream  { background: var(--ground); }
.section--white  { background: var(--surface); }
.section--peach  { background: var(--tint-apricot); }
.section--sage   { background: var(--tint-sage); }
.section--lavender { background: var(--tint-lavender); }
.section--slate  { background: var(--slate); color: #FFFFFF; }
.section--moss   { background: var(--moss);  color: #FFFFFF; }

.section--slate .eyebrow,
.section--moss .eyebrow { color: var(--chartreuse); }

/* ---------- 4. Typography ------------------------------------------------ */
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 18px;
}

.display-1 {
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: -0.028em;
}

.display-2 {
  font-size: var(--fs-d1);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--moss-deep);
}

.heading-rail {
  font-size: var(--fs-d2);
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--moss-deep);
}

.heading-section {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--moss-deep);
}

.lede {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--green);
}

.prose > * + * { margin-top: 1.35em; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }

.note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.micro {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--ink-3);
}

/* Secondary text on any dark ground, the footer included. Without the footer
   here, .note fell back to its light-background ink and went grey on navy. */
.section--slate .note, .section--moss .note, .site-footer .note {
  color: rgba(255, 255, 255, 0.82);
}
.section--slate .micro, .section--moss .micro, .site-footer .micro {
  color: rgba(255, 255, 255, 0.66);
}
.section--slate .heading-rail, .section--slate .heading-section, .section--slate .display-2,
.section--moss .heading-rail, .section--moss .heading-section, .section--moss .display-2 { color: #FFFFFF; }
.section--slate .lede, .section--moss .lede { color: var(--chartreuse); }

/* ---------- 5. Site header ----------------------------------------------- */
/* Transparent over the cover; becomes a solid navy bar once scrolled. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  /* transparent over the cover, solid navy once scrolled */
  background-color: rgba(17, 50, 68, 0);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.site-header.is-stuck {
  background-color: var(--plum);
  box-shadow: 0 2px 18px rgba(17, 50, 68, 0.22);
}
.site-header.is-open { background-color: var(--plum); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 84px;
  padding-block: 14px;
}

.brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.brand__logo {
  height: 30px;
  width: auto;
  /* the source mark is a grey alpha mask — force it to pure white */
  filter: brightness(0) invert(1);
}
.brand__divider {
  width: 1px; height: 26px;
  background: rgba(255,255,255,0.28);
}
.brand__title {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.86);
  white-space: nowrap;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.site-nav__link {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease;
}
.site-nav__link:hover { color: #FFFFFF; }

/* The square CTA where “Give to TGC” used to sit — no white bar behind it. */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  background: var(--rust);
  color: #FFFFFF;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 160ms ease, transform 160ms ease;
}
.header-cta:hover { background: var(--apricot); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: 2px;
  padding: 9px 12px;
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 600;
  cursor: pointer;
}

/* ---------- 6. Cover / hero ---------------------------------------------- */
.cover {
  position: relative;
  background: #192140;
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
}
/* The purple duotone of the rose window under a flat wash of the cover's
   indigo (#192140). The photo overhangs the top by the parallax travel
   (site.js drifts it down by up to 10% of the cover's height), so its edge
   never shows. */
.cover__media {
  --focus: 50% 50%;
  position: absolute;
  inset: -12% 0 0;
  /* The video's first frame, shown at once and kept as the fallback when the
     video cannot or should not play (reduced motion, data saver, an error).
     Sized and placed exactly as the video is, so the swap does not shift. */
  background: #192140 url('../video/hero-poster.webp') var(--focus) / cover no-repeat;
  transform: translateY(var(--cover-shift, 0px));
  will-change: transform;
  z-index: -2;
}
/* The hero video (site.js picks the 720p or 1080p file and starts it after
   the page has loaded). It stays transparent until frames are actually
   playing, then fades in over its own first frame. */
.cover__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus);
  opacity: 0;
  transition: opacity 900ms ease;
}
.cover__video.is-playing { opacity: 1; }
/* Phones see a narrow slice of a wide frame: hold it just right of centre. */
@media (max-width: 900px) {
  .cover__media {
    --focus: 58% 50%;
    background-image: url('../video/hero-poster-720.webp');
  }
}
.cover__scrim {
  position: absolute; inset: 0;
  background: rgba(25, 33, 64, 0.25);
  z-index: -1;
}
.cover__inner { padding-block: 190px 0; }

.cover__title { max-width: 15ch; }
/* Phones: the title is set to the width of the screen, so "AI Christian"
   nearly fills a line at any phone width; the subtitle runs the full measure
   rather than breaking a lone word onto its last line. */
@media (max-width: 600px) {
  .cover__title { font-size: clamp(3.5rem, 17.5vw, 5.5rem); line-height: 0.92; letter-spacing: -0.03em; }
  .cover__sub { max-width: none; margin-top: 28px; text-wrap: balance; }
  .cover__year { margin-top: 24px; }
}
.cover__sub {
  margin-top: 34px;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.32;
  max-width: 22ch;
  color: var(--tint-apricot);
  font-weight: 600;
}
.cover__year {
  margin-top: 30px;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--chartreuse);
}

/* The embargo band — a white full-bleed rule across the cover */
.embargo {
  margin-top: 56px;
  background: var(--ground);
  color: var(--rust);
  padding-block: 30px 34px;
}
.embargo__title {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.embargo__sub {
  margin-top: 8px;
  font-size: clamp(1.125rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cover__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-block: 44px 64px;
}
/* Download PDF is the one button; Contact Us sits under it as a text link,
   set nearly as large as the button label so it still reads as an action. */
.cover__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cover__actions .btn-mint { width: 100%; }
.cover__contact {
  font-size: 1.125rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color 160ms ease;
}
.cover__contact:hover { color: var(--chartreuse); }
@media (max-width: 560px) {
  .cover__actions { width: 100%; }
}
.cover__credits { font-size: var(--fs-small); line-height: 1.62; }
.cover__credits strong { font-weight: 700; }
.cover__credits a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

.btn-mint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 34px;
  background: var(--chartreuse);
  color: var(--moss-deep);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 160ms ease, transform 160ms ease;
}
.btn-mint:hover { background: #A5E8C5; transform: translateY(-1px); }

/* ---------- 7. Part divider ---------------------------------------------- */
/* Four solid tones; build.py assigns each divider its tone. */
.part {
  --tone: var(--plum);
  position: relative;
  background: var(--tone);
  color: #FFFFFF;
  text-align: center;
  padding-block: 200px;
  overflow: hidden;
  isolation: isolate;
}
.part--slate { --tone: var(--slate); }
.part--moss  { --tone: var(--moss); }
.part--rust  { --tone: var(--rust); }
/* Each divider carries a duotone in its own tone: the rose-window
   photograph or, on about half of them, a circuit board, each cropped to a
   different band so no two neighbours repeat. A flat wash of the tone keeps
   the white title readable. Inset past the section top and bottom: headroom
   for the parallax in site.js. */
.part__media {
  position: absolute; inset: -60px 0;
  background: center / cover no-repeat;
  will-change: transform;
  z-index: -1;
}
.part__media::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--tone);
  opacity: 0.4;
}
#part-1 .part__media { background-image: url('../img/duotone/rose-forest.webp'); }
#part-2 .part__media { background-image: url('../img/duotone/chip-forest.webp'); }
#part-3 .part__media { background-image: url('../img/duotone/rosebase-forest.webp'); }
#part-4 .part__media { background-image: url('../img/duotone/chip-navy.webp'); }
#part-5 .part__media { background-image: url('../img/duotone/chipupper-forest.webp'); }
#part-6 .part__media { background-image: url('../img/duotone/rosedetail-navy.webp'); }
#appendix-1-divider .part__media { background-image: url('../img/duotone/rosedetail-forest.webp'); }
#appendix-2-divider .part__media { background-image: url('../img/duotone/chiplower-forest.webp'); }
#appendix-3-divider .part__media { background-image: url('../img/duotone/lancets-forest.webp'); }
/* “Part 1” is set in Plantin italic, as a line of the title rather than a
   tracked capital label. */
.part__label {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--chartreuse);
  margin-bottom: 18px;
}
.part--rust .part__label { color: var(--tint-apricot); }
.part__title {
  font-size: clamp(2.75rem, 5.6vw, 5.25rem);
  letter-spacing: -0.025em;
  line-height: 1;
  max-width: 19ch;
  margin-inline: auto;
}

/* ---------- 8. Centered question block ----------------------------------- */
.question-head {
  max-width: 1070px;
  margin: 0 auto 66px;
  text-align: center;
}

/* ---------- 9. Table of contents ----------------------------------------- */
/* Laid out like the part dividers: a small mint label over a white title, so
   the contents and the dividers read as the same system. */
.toc__title {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin-bottom: 12px;
  color: #FFFFFF;
}
.toc__intro {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 54px;
}
.toc__grid {
  columns: 2;
  column-gap: 80px;
}
.toc__part {
  break-inside: avoid;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.toc__part:first-child { border-top: 0; padding-block-start: 0; }

.toc__label {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 300;
  font-style: italic;
  color: var(--chartreuse);
  margin-bottom: 6px;
}
.toc__part-name {
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 26ch;
}
.toc__part-name a {
  color: #FFFFFF;
  text-decoration: none;
  background-image: linear-gradient(var(--rust), var(--rust));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 260ms ease;
}
.toc__part-name a:hover { background-size: 100% 2px; }

.toc__list { list-style: none; margin-top: 16px; }
.toc__list li + li { margin-top: 9px; }
.toc__list a {
  display: inline-block;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  padding-left: 16px;
  position: relative;
  transition: color 160ms ease;
}
.toc__list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: rgba(255, 255, 255, 0.38);
  transition: background-color 160ms ease, width 160ms ease;
}
.toc__list a:hover { color: #FFFFFF; }
.toc__list a:hover::before { background: var(--rust); width: 11px; }

/* ---------- 10. Headline cards (Top 10) ---------------------------------- */
.headline-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.headline-group__name {
  font-size: clamp(1.5rem, 1.9vw, 1.75rem);
  color: var(--rust);
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--rust);
  line-height: 1.3;
}
/* Each headline is a link into the finding that argues it. */
.headline-item {
  display: flex;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  padding: 8px 10px;
  margin-inline: -10px;
  border-radius: 3px;
  transition: background-color 160ms ease;
}
.headline-item + .headline-item { margin-top: 6px; }
.headline-item:hover { background: var(--tint-apricot); }
.headline-item:hover .headline-item__text { text-decoration: underline; text-underline-offset: 3px; }
.headline-item:hover .headline-item__num { color: var(--rust); }
.headline-item__num {
  flex: 0 0 auto;
  transition: color 160ms ease;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--moss-deep);
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
}
.headline-item__text { font-size: var(--fs-small); line-height: 1.5; }

.caveat {
  margin-top: 52px;
  padding: 26px 30px;
  background: var(--tint-apricot);
  border-left: 4px solid var(--rust);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* ---------- 11. Pull quote ----------------------------------------------- */
/* Slate, over the slate duotone of the rose; the quote is set whole in
   Plantin italic. */
.pullquote {
  position: relative;
  background: var(--slate);
  color: #FFFFFF;
  text-align: center;
  padding-block: 150px;
  overflow: hidden;
  isolation: isolate;
}
.pullquote__media {
  position: absolute; inset: -110px 0;
  background: url('../img/duotone/rose-navy.webp') center / cover no-repeat;
  will-change: transform;
  z-index: -1;
}
.pullquote__media::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--slate);
  opacity: 0.45;
}
.pullquote__text {
  font-size: clamp(1.875rem, 3.8vw, 3.25rem);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin-inline: auto;
}
.pullquote__cite {
  margin-top: 38px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--chartreuse);
}
.pullquote__cite em { font-style: italic; }

.epigraph { max-width: 760px; margin-inline: auto; text-align: center; }
.epigraph + .epigraph { margin-top: 72px; }
.epigraph__text {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.32;
  color: var(--moss-deep);
}
.epigraph__text--bold { font-style: italic; }
.epigraph__cite {
  margin-top: 20px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--rust);
  letter-spacing: 0.02em;
}

/* ---------- 12. Scholars -------------------------------------------------- */
.scholar { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start; }
.scholar + .scholar { margin-top: 58px; }
.scholar__photo {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--warm-grey);
}
.scholar__bio { font-size: var(--fs-small); line-height: 1.62; }
.scholar__bio strong { font-weight: 700; }
.scholar__bio em { font-style: italic; }

.stat-pair {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 28px;
  margin-top: 46px;
  align-items: flex-start;
}
.stat {
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}
.stat__label {
  font-size: clamp(0.95rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.28;
  color: var(--ink);
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
  word-break: normal;
  hyphens: none;
}
.stat__value {
  margin-top: 8px;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---------- 14. Values triad (p.46) --------------------------------------- */
.triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 52px;
}
.triad__item {
  background: var(--surface);
  border-top: 5px solid var(--moss);
  padding: 34px 28px 36px;
  text-align: center;
}
.triad__item:nth-child(2) { border-top-color: var(--rust); }
.triad__item:nth-child(3) { border-top-color: var(--slate); }
.triad__name {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  color: var(--moss-deep);
  line-height: 1.2;
}

/* ---------- 15. Framework comparison (p.15) ------------------------------- */
.framework {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  margin-top: 40px;
}
.framework__title {
  font-size: var(--fs-h3);
  text-align: center;
  color: var(--moss-deep);
  margin-bottom: 26px;
}
.fw-stack { display: flex; flex-direction: column; gap: 12px; }
.fw-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: center;
  min-height: 56px;
}
.fw-bar--frame    { background: var(--fw-frame);    color: var(--ink); }
.fw-bar--religion { background: var(--fw-religion); color: #FFFFFF; }
.fw-bar--p1       { background: var(--fw-p1);       color: #FFFFFF; }
.fw-bar--p2       { background: var(--fw-p2);       color: var(--ink); }
.fw-bar--p3       { background: var(--fw-p3);       color: #FFFFFF; }
.fw-bar--p4       { background: var(--fw-p4);       color: #FFFFFF; }
.fw-bar--tall   { min-height: 440px; }
.fw-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fw-row .fw-bar { min-height: 56px; padding-inline: 6px; }

/* ---------- 16. Question grid (100 ethical questions) --------------------- */
.qgrid {
  columns: 3;
  column-gap: 40px;
  margin-top: 38px;
}
.qgrid__item {
  break-inside: avoid;
  font-size: var(--fs-small);
  line-height: 1.45;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--warm-grey);
  margin-bottom: 12px;
}
.qgrid__item:hover { border-left-color: var(--rust); }

/* ---------- 17. Response excerpt cards ------------------------------------ */
.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--rust);
}
.band-head--pass { border-bottom-color: var(--moss-deep); }
.band-head__icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rust); color: #FFFFFF;
  font-size: 15px; font-weight: 700; line-height: 1;
}
.band-head--pass .band-head__icon { background: var(--moss-deep); }
.band-head__name {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
}
.band-head--pass .band-head__name { color: var(--moss-deep); }
.band-head__meta {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.excerpts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.excerpt {
  background: var(--surface);
  border-left: 4px solid var(--rust);
  padding: 24px 26px 26px;
}
.excerpt--pass { border-left-color: var(--moss-deep); }
.excerpt__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.excerpt__vendor {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.excerpt__model {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.32;
  margin-top: 3px;
}
.excerpt__badge {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--tint-apricot);
  color: var(--rust);
  white-space: nowrap;
}
.excerpt__badge--pass { background: var(--tint-sage); color: var(--moss-deep); }
.excerpt__badge--partial { background: var(--tint-lavender); color: var(--purple); }
.excerpt__q {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--moss-deep);
  margin-bottom: 10px;
  line-height: 1.4;
}
.excerpt__quote {
  font-size: var(--fs-small);
  line-height: 1.56;
  color: var(--ink);
}
.excerpt__quote em { font-style: italic; }

.qchip {
  display: inline-block;
  padding: 2px 7px;
  margin-right: 7px;
  border-radius: 3px;
  background: var(--warm-grey);
  color: var(--ink-2);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

/* ---------- 18. Data tables ---------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-micro);
  min-width: 900px;
}
.dtable th, .dtable td {
  padding: 11px 12px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.dtable th {
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--ground);
  position: sticky;
  top: 0;
  vertical-align: bottom;
  line-height: 1.3;
}
.dtable th:first-child, .dtable td:first-child {
  text-align: left;
  min-width: 330px;
  font-weight: 500;
  color: var(--ink);
}
.dtable td:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.dtable tbody tr:hover { background: var(--ground); }
.mark { font-weight: 700; font-size: 15px; line-height: 1; }
.mark--pass { color: var(--moss-deep); }
.mark--fail { color: var(--rust); }
.mark--part { color: var(--purple); }

/* A table of sentences rather than scores: left aligned, even columns, normal
   weight. The scorecard rules above centre cells and bold the last column,
   which clipped the longer questions and made the comparison hard to scan. */
.dtable--text { min-width: 0; font-size: var(--fs-small); }
.dtable--text th,
.dtable--text td {
  text-align: left;
  width: 50%;
  padding: 16px 22px;
  vertical-align: top;
  font-weight: 400;
  line-height: 1.5;
}
.dtable--text th {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--ground);
}
.dtable--text th:first-child,
.dtable--text td:first-child { min-width: 0; color: var(--ink); font-weight: 400; }
.dtable--text td:last-child { font-weight: 400; font-variant-numeric: normal; }
.dtable--text tbody tr:hover { background: rgba(227, 91, 40, 0.04); }
@media (max-width: 700px) {
  .dtable--text th, .dtable--text td { padding: 12px 14px; }
}

.table-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 18px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-2);
}
.table-legend span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- 18b. Feature pair (Part 4) ------------------------------------ */
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* The artwork links out; lift it slightly on hover so it reads as clickable. */
.feature__artlink {
  display: block;
  align-self: flex-start;
  border-radius: 4px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.feature__artlink:hover { transform: translateY(-3px); }
.feature__artlink:hover .feature__art { box-shadow: 0 16px 38px rgba(38, 37, 31, 0.24); }

.feature__art {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(38, 37, 31, 0.16);
}
/* A book cover is portrait and podcast art is square; capping the cover keeps
   the two sitting at roughly the same optical weight side by side. */
.feature__art--portrait { max-width: 214px; }

.feature__title {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  letter-spacing: -0.016em;
  line-height: 1.1;
  color: var(--moss-deep);
}
.feature__sub {
  margin-top: 6px;
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.3;
}
.feature__blurb {
  margin-top: 16px;
  font-size: var(--fs-small);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 46ch;
}
.feature__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.pf-btn:hover { border-color: var(--moss-deep); transform: translateY(-1px); }
.pf-btn--primary {
  background: var(--moss-deep);
  border-color: var(--moss-deep);
  color: #FFFFFF;
}
.pf-btn--primary:hover { background: #22392A; border-color: #22392A; }
.pf-btn__icon { width: 18px; height: 18px; flex: 0 0 auto; display: block; }

@media (max-width: 900px) {
  .features { grid-template-columns: 100%; gap: 52px; }
  .feature__art, .feature__art--portrait { max-width: 190px; }
}

/* ---------- 19. Footnotes -------------------------------------------------- */
/* In-text marker. Sized and raised by hand rather than with <sup>'s default,
   which would otherwise open a gap in the line above it. */
.fn-ref {
  /* Always Inter, upright: inside a Plantin heading or the italic pull quote
     a bold marker would otherwise call up Plantin's semibold italic. */
  font-family: var(--font);
  font-style: normal;
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 1px;
}
.fn-ref a {
  color: var(--rust);
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
}
.fn-ref a:hover { background: var(--tint-apricot); }
.section--slate .fn-ref a,
.section--moss .fn-ref a { color: var(--chartreuse); }
.pullquote .fn-ref a { color: var(--chartreuse); }

/* The note being pointed at lights up briefly so the eye lands on the right
   row in a list of twenty. */
.endnotes li:target,
:target > .excerpt { background: var(--tint-apricot); }

.endnotes { list-style: none; counter-reset: en; }
.endnotes li {
  counter-increment: en;
  position: relative;
  padding: 4px 8px 4px 42px;
  margin-left: -8px;
  font-size: var(--fs-micro);
  line-height: 1.62;
  color: var(--ink-2);
  border-radius: 3px;
  scroll-margin-top: 120px;
  transition: background-color 300ms ease;
}
.endnotes li + li { margin-top: 14px; }
.endnotes li::before {
  content: counter(en);
  position: absolute;
  left: 8px; top: 5px;
  font-weight: 700;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.endnotes a { color: var(--ink-2); word-break: break-word; }

/* Book titles link out to the bookseller. Underlined in the accent so they
   read as clickable among the bare URLs, without shouting. */
.endnotes a[href*="amazon."] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rust);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.endnotes a[href*="amazon."]:hover {
  color: var(--rust);
  text-decoration-thickness: 2px;
}

.fn-back {
  display: inline-block;
  margin-left: 6px;
  color: var(--rust) !important;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  transition: background-color 150ms ease;
}
.fn-back:hover { background: var(--tint-apricot); }

/* A marker jumped to from a note gets the same brief highlight. */
.fn-ref:target a { background: var(--tint-apricot); outline: 2px solid var(--rust); }
.fn-ref { scroll-margin-top: 140px; }

/* ---------- 20. Footer ---------------------------------------------------- */
.site-footer {
  background: var(--plum-deep);
  color: #FFFFFF;
  padding-block: 96px 76px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer__logo { height: 34px; width: auto; filter: brightness(0) invert(1); margin-bottom: 20px; }
.site-footer a { color: #FFFFFF; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; }
.site-footer__links a {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.82);
}
.site-footer__links a:hover { color: #FFFFFF; }

/* ---------- 21. Charts ---------------------------------------------------- */
.figure-intro {
  max-width: var(--measure);
  margin-bottom: 34px;
}

.figure {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 40px 44px 36px;
}
.section--white .figure { background: var(--ground); }

.figure__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 28px;
}
.figure__headtext { flex: 1 1 320px; min-width: 0; }
.figure__kicker {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rust);
}
.figure__stamp {
  margin-left: auto;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.figure__title {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  letter-spacing: -0.014em;
  line-height: 1.14;
  color: var(--ink);
  max-width: 34ch;
}
.figure__deck {
  margin-top: 8px;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.48;
  max-width: 60ch;
}
.figure__source {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-micro);
  line-height: 1.52;
  color: var(--ink-3);
}

.figure__actions { display: flex; gap: 10px; flex: 0 0 auto; padding-top: 4px; }
.chart-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.chart-btn:hover { border-color: var(--rust); color: var(--rust); }
.chart-btn[aria-pressed="true"] { background: var(--rust); border-color: var(--rust); color: #FFFFFF; }

/* Legend */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin-top: 26px;
}
.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-2);
}
.chart-legend__swatch { width: 15px; height: 15px; border-radius: 2px; flex: 0 0 auto; }

/* SVG chart primitives */
.chart { overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; overflow: hidden; }
@media (max-width: 660px) {
  .chart .tick-label, .chart .cat-label, .chart .value-label { font-size: 12px; }
  .chart .panel-title { font-size: 14px; }
}
.chart .grid-line { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis-line { stroke: #C9C9C0; stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick-label {
  font-size: 13px;
  font-weight: 500;
  fill: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.chart .cat-label { font-size: 13px; font-weight: 600; fill: var(--ink); }
.chart .axis-title { font-size: 12px; font-weight: 600; fill: var(--ink-3); letter-spacing: 0.04em; }
.chart .panel-title { font-size: 15px; font-weight: 700; fill: var(--ink); }
.chart .panel-sub { font-size: 12px; font-weight: 500; fill: var(--ink-3); }
.chart .value-label { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart .band-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Bars: the reveal. Each bar grows from its baseline. */
.chart .bar { transform-box: fill-box; }
.chart .bar--h { transform-origin: left center; transform: scaleX(0); }
.chart .bar--v { transform-origin: center bottom; transform: scaleY(0); }
.chart .value-label, .chart .cat-label { opacity: 0; }

.chart.is-revealed .bar--h,
.chart.is-revealed .bar--v {
  transform: scale(1);
  transition: transform 820ms cubic-bezier(0.22, 0.68, 0.28, 1);
  transition-delay: var(--d, 0ms);
}
.chart.is-revealed .value-label,
.chart.is-revealed .cat-label {
  opacity: 1;
  transition: opacity 380ms ease;
  transition-delay: calc(var(--d, 0ms) + 420ms);
}

.chart .bar-hit { fill: transparent; cursor: default; }
.chart .bar-group:hover .bar { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .chart .bar--h, .chart .bar--v { transform: scale(1); }
  .chart .value-label, .chart .cat-label { opacity: 1; }
  .chart.is-revealed .bar--h,
  .chart.is-revealed .bar--v,
  .chart.is-revealed .value-label,
  .chart.is-revealed .cat-label { transition: none; }
}

/* Ranked list — used instead of bars where the spread is too narrow for a bar
   to mean anything. Values are right-aligned with tabular figures so every
   percent sign lands on the same vertical line. */
.rank-list--split {
  columns: 2;
  column-gap: 64px;
}
.rank-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  break-inside: avoid;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.rank-list__row:last-child { border-bottom: 0; }
.rank-list__name {
  font-size: var(--fs-small);
  line-height: 1.38;
  color: var(--ink);
  min-width: 0;
}
.rank-list__value {
  flex: 0 0 auto;
  text-align: right;
  min-width: 4.5ch;
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--moss-deep);
}
@media (max-width: 760px) {
  .rank-list--split { columns: 1; }
  .rank-list__name { font-size: var(--fs-micro); }
}

/* Chart tooltip */
.chart-tip {
  position: fixed;
  z-index: 1200;
  pointer-events: none;
  background: var(--ink);
  color: #FFFFFF;
  padding: 9px 12px;
  border-radius: 3px;
  font-size: var(--fs-micro);
  line-height: 1.4;
  max-width: 320px;
  opacity: 0;
  transition: opacity 120ms ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.24);
}
.chart-tip.is-on { opacity: 1; }
.chart-tip b { font-weight: 700; }
.chart-tip span { color: var(--chartreuse); font-variant-numeric: tabular-nums; font-weight: 700; }

/* Data editor panel */
.data-editor {
  margin-top: 24px;
  padding: 22px 24px 24px;
  background: var(--ground);
  border: 1px solid var(--rule);
}
.section--white .data-editor { background: var(--surface); }
.data-editor[hidden] { display: none !important; }
.data-editor__title {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.data-editor__rows { display: grid; gap: 8px; }
.de-row {
  display: grid;
  grid-template-columns: 1fr repeat(var(--series, 1), 92px);
  gap: 10px;
  align-items: center;
}
.de-row__head {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.de-row__head:first-child { text-align: left; }
.de-input {
  font: inherit;
  font-size: var(--fs-micro);
  padding: 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.de-input:focus { border-color: var(--rust); outline: none; box-shadow: 0 0 0 2px rgba(227,91,40,0.18); }
.de-input--num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.data-editor__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- 22. Inline text editor --------------------------------------- */
.edit-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  background: var(--ink);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,0.26);
  transition: background-color 160ms ease, transform 160ms ease;
}
.edit-launcher:hover { transform: translateY(-2px); }
.edit-launcher[aria-pressed="true"] { background: var(--rust); }
.edit-launcher__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chartreuse);
}
.edit-launcher[aria-pressed="true"] .edit-launcher__dot { background: #FFFFFF; }

/* Edit-mode affordances */
body.is-editing [data-editable] {
  outline: 1px dashed rgba(227,91,40,0.45);
  outline-offset: 4px;
  border-radius: 2px;
  transition: outline-color 140ms ease, background-color 140ms ease;
}
body.is-editing [data-editable]:hover { outline-color: var(--rust); background: rgba(227,91,40,0.05); }
body.is-editing [data-editable]:focus {
  outline: 2px solid var(--rust);
  outline-offset: 4px;
  background: rgba(227,91,40,0.05);
}

.edit-bar {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 1100;
  background: var(--ink);
  color: #FFFFFF;
  padding: 11px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.2);
}
.edit-bar[hidden] { display: none !important; }
.edit-bar__status {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  margin-right: auto;
}
.edit-bar__status b { color: var(--chartreuse); font-weight: 700; }

.ebtn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.ebtn:hover { background: rgba(255,255,255,0.14); }
.ebtn--primary { background: var(--rust); border-color: var(--rust); font-weight: 700; }
.ebtn--primary:hover { background: var(--apricot); }

/* Floating format toolbar (Framer-style) */
.fmt-bar {
  position: fixed;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: var(--ink);
  border-radius: 6px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 130ms ease, transform 130ms ease, visibility 130ms;
}
.fmt-bar.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.fmt-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #FFFFFF;
  width: 32px; height: 30px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background-color 130ms ease;
}
.fmt-btn:hover { background: rgba(255,255,255,0.16); }
.fmt-btn[aria-pressed="true"] { background: var(--rust); }
.fmt-btn--b { font-weight: 800; }
.fmt-btn--i { font-style: italic; font-weight: 600; }
.fmt-btn--link { font-size: 13px; }
.fmt-bar__sep { width: 1px; height: 18px; background: rgba(255,255,255,0.22); margin-inline: 4px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(8px);
  z-index: 1300;
  background: var(--moss-deep);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  box-shadow: 0 8px 26px rgba(0,0,0,0.24);
}
.toast.is-on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1400;
  background: var(--ink);
  color: #FFFFFF;
  padding: 12px 18px;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- 23. Content at rest -------------------------------------------
   Body copy is never animated in. Everything meant to be read is visible the
   moment the page paints, so a slow device, a failed observer, or a link
   preview all show the report rather than an empty page. The one piece of
   motion on this site is the chart bars, which grow when a figure is reached. */

/* ---------- 24. Responsive ------------------------------------------------ */
@media (max-width: 1180px) {
  .headline-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qgrid { columns: 2; }
}

@media (max-width: 900px) {
  :root { --sec-top: 72px; --sec-bot: 76px; --gutter: 18px; --fs-body: 1.0625rem; }

  .row, .row--even { grid-template-columns: 100%; row-gap: 28px; }
  .toc__grid { columns: 1; }
  .toc__part-name { max-width: none; }
  .headline-groups { grid-template-columns: 100%; gap: 34px; }
  .triad { grid-template-columns: 100%; }
  .framework { grid-template-columns: 100%; gap: 40px; }
  .fw-bar--tall { min-height: 240px; }
  .excerpts { grid-template-columns: 100%; }
  .qgrid { columns: 1; }
  .scholar { grid-template-columns: 120px 1fr; gap: 22px; }
  .scholar__photo { width: 120px; height: 120px; }

  .cover__inner { padding-block: 132px 0; }
  .cover__foot { padding-block: 32px 48px; }
  .part { padding-block: 108px; }
  .pullquote { padding-block: 92px; }
  .figure { padding: 26px 20px 24px; }
  .question-head { margin-bottom: 42px; }

  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--plum);
    padding: 10px var(--gutter) 22px;
    margin: 0;
  }
  .site-nav.is-open .site-nav__link { padding-block: 13px; }
  .nav-toggle { display: inline-block; }
  .site-header.is-open::after { opacity: 1; }

  .stat-pair { gap: 20px; }
  .de-row { grid-template-columns: 1fr; gap: 5px; }
  .de-row__head { display: none; }
}

@media (max-width: 520px) {
  .embargo { margin-top: 36px; }
  .site-footer__inner { flex-direction: column; }
  .edit-launcher { right: 14px; bottom: 14px; padding: 11px 16px; }
}

/* ---------- 25. Print ----------------------------------------------------- */
@media print {
  .site-header, .edit-launcher, .edit-bar, .fmt-bar, .figure__actions, .data-editor { display: none !important; }
  body { background: #FFFFFF; }
  .chart .bar--h, .chart .bar--v { transform: scale(1) !important; }
  .chart .value-label, .chart .cat-label { opacity: 1 !important; }
  .section { padding-block: 28px; break-inside: avoid; }
}

/* ---------- Subscribe gate (assets/js/gate.js) ---------------------------- */
/* The report dims and stops scrolling from first paint; html.is-gated is set
   by the inline snippet in <head> before the page draws. */
html.is-gated, html.is-gated body { overflow: hidden; }
html.is-gated body::after {
  content: '';
  position: fixed; inset: 0;
  background: rgba(14, 18, 36, 0.86);   /* navy, darkened */
  -webkit-backdrop-filter: blur(6px) saturate(0.9);
  backdrop-filter: blur(6px) saturate(0.9);
  z-index: 1900;
  transition: opacity 400ms ease;
}
html.is-unlocking body::after { opacity: 0; }

.gate {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px var(--gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gate__dialog {
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(8, 12, 30, 0.45), 0 2px 8px rgba(8, 12, 30, 0.2);
  animation: gate-in 520ms cubic-bezier(.2, .7, .2, 1) both;
}
html.is-unlocking .gate__dialog { animation: gate-out 380ms ease both; }
@keyframes gate-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes gate-out { to { opacity: 0; transform: translateY(-10px) scale(.985); } }

/* Header band: the cover's photograph and wash, so the dialog reads as a
   piece of the cover. */
.gate__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #192140;
  color: #FFFFFF;
  text-align: center;
  padding: 40px 32px 34px;
}
.gate__media {
  position: absolute; inset: 0;
  background: url('../img/duotone/cover.webp') center 30% / cover no-repeat;
  z-index: -1;
}
.gate__media::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(25, 33, 64, 0.45);
}
.gate__mark { display: block; width: 56px; height: 56px; margin: 0 auto 20px; }
.gate__eyebrow {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  color: var(--chartreuse);
  margin-bottom: 8px;
}
.gate__title {
  font-size: clamp(2.125rem, 5vw, 2.875rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.gate__body { padding: 26px 32px 30px; }
.gate__lede {
  margin: 14px auto 0;
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.gate__note { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.gate__loading { font-size: var(--fs-micro); color: var(--ink-3); padding-block: 40px; text-align: center; }
.gate__error { font-size: var(--fs-small); color: var(--rust); }
.gate__error a { color: inherit; }

/* The HubSpot form, restyled (gate.js passes css: '' to drop HubSpot's own). */
.gate .hs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.gate .hs-form > * { grid-column: 1 / -1; }
.gate .hs-form > .hs_firstname, .gate .hs-form > .hs_lastname { grid-column: auto; }
.gate .hs-form fieldset { max-width: none !important; border: 0; margin: 0; padding: 0; }
.gate .hs-form-field > label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}
.gate .hs-form-required { color: var(--rust); margin-left: 2px; }
.gate .hs-input:not([type=checkbox]):not([type=radio]) {
  display: block;
  width: 100% !important;
  font: inherit;
  font-size: 1rem;             /* 16px: stops iOS zooming into the field */
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 10px 12px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.gate .hs-input:not([type=checkbox]):not([type=radio]):focus {
  outline: none;
  background: var(--surface);
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(54, 170, 116, 0.22);
}
.gate .hs-input.invalid.error { border-color: var(--rust); }
.gate .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }
.gate .hs-error-msg, .gate .hs-main-font-element { font-size: 0.8125rem; color: var(--rust); }
.gate .hs_error_rollup { display: none; }

.gate .legal-consent-container { display: grid; gap: 10px; margin-top: 4px; }
.gate .legal-consent-container .hs-richtext,
.gate .legal-consent-container .hs-richtext p { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.gate .legal-consent-container .hs-richtext a { color: var(--ink-2); }
.gate .inputs-list { list-style: none; margin: 0; padding: 0; }
.gate .hs-form-booleancheckbox-display {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}
/* HubSpot injects a few legal-consent rules after this sheet; the extra
   .legal-consent-container outranks them. */
.gate .legal-consent-container .hs-form-booleancheckbox-display p,
.gate .legal-consent-container .hs-form-booleancheckbox-display > span { margin: 0; }
.gate .legal-consent-container .hs-form-booleancheckbox-display input { float: none; }
.gate .hs-form-booleancheckbox-display input {
  flex: none;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--moss);
}
.gate .hs-recaptcha { display: flex; justify-content: center; }
.gate .hs-submit .actions { margin-top: 4px; }
.gate .hs-button {
  width: 100%;
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 15px 28px;
  background: var(--chartreuse);
  color: var(--moss-deep);
  border-radius: 3px;
  transition: background-color 160ms ease, transform 160ms ease;
}
.gate .hs-button:hover { background: #A5E8C5; transform: translateY(-1px); }
.gate .hs-button:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; }
.gate .submitted-message { font-size: var(--fs-small); color: var(--ink-2); }

.gate__thanks { text-align: center; padding-block: 8px 2px; }
.gate__thanks-title { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 6px; }
.gate__continue { margin-top: 22px; width: 100%; border: 0; cursor: pointer; font-family: inherit; }

/* Wide screens: the title panel beside the form, so the whole dialog fits
   a laptop screen without scrolling. */
@media (min-width: 900px) {
  .gate__dialog {
    max-width: 980px;
    display: grid;
    grid-template-columns: 5fr 6fr;
  }
  .gate__head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 44px;
  }
  .gate__mark { width: 64px; height: 64px; margin-bottom: 26px; }
  .gate__title { font-size: 3.25rem; }
  .gate__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 40px 32px;
  }
}
@media (max-width: 560px) {
  .gate { padding: 12px; align-items: flex-start; }
  .gate__head { padding: 30px 22px 26px; }
  .gate__mark { width: 46px; height: 46px; margin-bottom: 16px; }
  .gate__body { padding: 24px 22px 26px; }
  .gate .hs-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gate__dialog, html.is-unlocking .gate__dialog { animation: none; }
}