:root {
  
  --ground: #f7f5f1; 
  --surface: #fdfcfa; 
  --panel: #f6f5f1; 
  --rule: #e3e0da; 
  --ink: #26241f; 
  --accent: #ac5527; 

  
  --muted: #73706b;

  
  --accent-edge: color-mix(in srgb, var(--accent) 89%, var(--surface));

  
  --mk-ground: #f5f8f6; 
  --mk-sage: #e6f0eb; 
  --mk-ink: #20312a; 
  --mk-brand: #245640; 
  --mk-deep: #183f31; 
  --mk-on-deep: #f5f8f6; 
  --mk-rule: color-mix(in srgb, var(--mk-brand) 16%, var(--mk-ground));
  --radius-panel: 20px;

  
  
  --font-page: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-record: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo,
    Consolas, monospace;

  --fs-hero: 46px;
  --fs-h2: 34px;
  --fs-typerun: 38px;
  --fs-question: 23px;
  --fs-contrast: 20px;
  --fs-body: 18px;
  --fs-eyebrow: 17px;
  --fs-wordmark: 21px;
  --fs-btn: 15px;
  --fs-btn-sm: 14px;
  --fs-record: 14px;
  --fs-note: 13.5px;
  --fs-trust: 13px;
  --fs-label: 11px;
  --fs-chip: 10.5px;

  --lh-hero: 1.14;
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --lh-record: 1.45;
  --lh-tight: 1.4;

  --tracking-heading: -0.01em;
  --tracking-wordmark: -0.02em;
  --tracking-label: 0.08em;

  
  
  --page-max: 1240px;
  --measure: 58ch;
  --measure-narrow: 50ch;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --gutter: var(--s-6);
  
  --section-gap: var(--s-9);
}

@media (max-width: 720px) {
  :root {
    
    --fs-hero: 31px;
    --fs-h2: 25px;
    --fs-typerun: 26px;
    --fs-question: 18px;
    --fs-contrast: 16.5px;
    --fs-body: 16.5px;
    --fs-eyebrow: 15px;
    --fs-wordmark: 18px;
    --fs-note: 12px;
    --fs-trust: 12.5px;

    --gutter: var(--s-5);
    --section-gap: var(--s-8);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--mk-ground);
  color: var(--mk-ink);
  font-family: var(--font-page);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul,
figure,
blockquote {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-page);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  color: var(--mk-deep);
}

h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
}

h2 {
  font-size: var(--fs-h2);
}

a {
  color: var(--mk-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--muted);
}

:focus-visible {
  outline: 2px solid var(--mk-brand);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--mk-brand) 16%, transparent);
}

.record,
.evidence-panel,
.flagged-line,
.figure {
  color: var(--ink);
}

.btn {
  display: inline-block;
  font-family: var(--font-record);
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid var(--mk-brand);
  border-radius: 3px;
  padding: 11px 22px;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--mk-brand);
  color: var(--mk-on-deep);
}

.btn-secondary {
  background: transparent;
  color: var(--mk-brand);
}

.btn-primary:hover {
  background: var(--mk-deep);
  border-color: var(--mk-deep);
  color: var(--mk-on-deep);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--mk-brand) 8%, transparent);
  color: var(--mk-deep);
}

.band--deep .btn {
  border-color: var(--mk-on-deep);
}

.band--deep .btn-primary {
  background: var(--mk-on-deep);
  color: var(--mk-deep);
}

.band--deep .btn-secondary {
  color: var(--mk-on-deep);
}

.band--deep .btn-primary:hover {
  background: var(--mk-sage);
  border-color: var(--mk-sage);
  color: var(--mk-deep);
}

.band--deep .btn-secondary:hover {
  background: color-mix(in srgb, var(--mk-on-deep) 12%, transparent);
  color: var(--mk-on-deep);
}

.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter);
}

.site-header .btn {
  font-size: var(--fs-btn-sm);
  padding: 9px 18px;
}

.wordmark {
  font-family: var(--font-record);
  font-size: var(--fs-wordmark);
  font-weight: 600;
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
  text-decoration: none;
  color: var(--mk-brand);
}

.wordmark:hover {
  color: var(--mk-deep);
}

.site-footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-9) var(--gutter) var(--s-8);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: var(--gutter);
  top: var(--s-3);
  z-index: 10;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-record);
  font-size: var(--fs-btn-sm);
  text-decoration: none;
}

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding-block: var(--section-gap);
}

.section--lean {
  padding-block: var(--s-8);
}

.section--figure {
  
  padding-block: var(--s-10);
}

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

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

.section h2 {
  max-width: 22ch;
  margin-bottom: var(--s-5);
}

.section h2.h2-wide {
  max-width: 30ch;
}

.stack > * + * {
  margin-top: var(--s-4);
}

.stack-lg > * + * {
  margin-top: var(--s-6);
}

.eyebrow {
  font-family: var(--font-record);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  margin-bottom: var(--s-4);
}

.anchor-line {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}

.lede {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.note {
  font-family: var(--font-record);
  font-size: var(--fs-note);
  line-height: var(--lh-tight);
  color: var(--muted);
}

.pullquote {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 24ch;
  margin-block: var(--s-7) var(--s-4);
}

.questions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block: var(--s-5);
}

.question {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-question);
  line-height: var(--lh-tight);
}

.question-n {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.situation {
  font-size: var(--fs-question);
  line-height: var(--lh-tight);
  max-width: var(--measure-narrow);
  border-left: 2px solid var(--rule);
  padding-left: var(--s-4);
  margin-block: var(--s-5);
}

.outcome-quote {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-heading);
  max-width: 20ch;
}

.outcome-sub {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  margin-top: var(--s-3);
}

.outcome-intro {
  margin-top: var(--s-7);
}

.outcome-attribution {
  margin-top: var(--s-4);
  max-width: 40ch;
}

.steps {
  display: grid;
  gap: var(--s-5);
  margin-block: var(--s-6);
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-7);
  }
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: baseline;
}

.step p {
  font-size: var(--fs-body);
}

.step-lead {
  font-weight: 600;
}

.contrasts {
  display: flex;
  flex-direction: column;
  margin-block: var(--s-6);
}

.contrast {
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-contrast);
  line-height: var(--lh-tight);
  max-width: var(--measure);
}

.contrast:last-child {
  border-bottom: 1px solid var(--rule);
}

.type-run {
  font-size: var(--fs-typerun);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-heading);
  margin-block: var(--s-6);
  max-width: 26ch;
}

.figure-caption {
  font-family: var(--font-page);
  font-style: italic;
  font-size: var(--fs-question);
  line-height: var(--lh-tight);
  text-align: center;
  margin-top: var(--s-7);
  color: var(--ink);
}

.figure {
  margin: 0;
}

.figure-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.steps {
  counter-reset: step;
}

.step {
  counter-increment: step;
}

.step::before {
  content: counter(step);
  font-family: var(--font-record);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.slot-capture {
  margin-top: var(--s-7);
}

.slot-capture picture {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

.slot-capture img {
  display: block;
  width: 100%;
  height: auto;
}

.slot-capture--v1 img {
  aspect-ratio: 2200 / 1700;
}

.slot-capture--p1 img {
  aspect-ratio: 1629 / 1831;
}

.slot-caption {
  margin-top: var(--s-5);
  font-size: var(--fs-body);
  text-align: left;
  max-width: var(--measure);
}

@media (max-width: 720px) {
  .slot-capture--v1 img {
    aspect-ratio: 625 / 1583;
  }

  
  .slot-capture--p1 picture {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .slot-capture--p1 img {
    aspect-ratio: 1313 / 477;
    width: 940px;
    max-width: none;
  }
}

.band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--gutter);
}

.band-inner {
  max-width: calc(var(--page-max) - 2 * var(--gutter));
  margin-inline: auto;
}

.band--sage {
  background: var(--mk-sage);
}

.band--deep {
  background: var(--mk-deep);
  color: var(--mk-on-deep);
}

.band--deep h2,
.band--deep p {
  color: var(--mk-on-deep);
}

.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 901px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-8);
  }

  .split--wide-art {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .split--record {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

.split-copy > * + * {
  margin-top: var(--s-4);
}

.split-copy h2 {
  margin-bottom: var(--s-5);
}

.art-frame {
  margin: 0;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--mk-sage);
}

.art-frame img,
.art-frame picture {
  display: block;
  width: 100%;
  height: auto;
}

.art-frame--wide img {
  aspect-ratio: 1672 / 941;
}

@media (max-width: 720px) {
  .art-frame {
    border-radius: 16px;
  }
}

.problem-grid {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-5);
}

@media (min-width: 901px) {
  .problem-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--s-8);
    align-items: start;
  }
}

.problem-panel {
  background: var(--mk-sage);
  border-radius: var(--radius-panel);
  padding: var(--s-6) var(--s-6) var(--s-6);
}

.problem-panel .pullquote {
  margin-block: 0 var(--s-4);
  color: var(--mk-deep);
}

.problem-panel p:not(.pullquote) {
  max-width: var(--measure-narrow);
}

.human-band {
  padding-block: var(--s-8);
}

.questions-split .questions {
  margin-top: 0;
}

.questions-split .record--standalone {
  margin-top: 0;
  max-width: none;
}

@media (min-width: 901px) {
  .questions-split .record--standalone {
    max-width: 46ch;
    justify-self: end;
  }
}

.steps-panel {
  background: var(--surface);
  border: 1px solid var(--mk-rule);
  border-radius: var(--radius-panel);
  padding: var(--s-6);
  margin-block: var(--s-6);
}

.steps-panel .steps {
  margin-block: 0;
  gap: var(--s-5) var(--s-7);
}

.steps-panel .step p {
  max-width: var(--measure-narrow);
}

@media (min-width: 901px) {
  .contrasts {
    flex-direction: row;
    gap: var(--s-6);
  }

  .contrast {
    flex: 1 1 0;
    max-width: none;
    padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5);
    border-top: 2px solid var(--mk-brand);
    border-bottom: 0;
  }

  .contrast:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 901px) {
  .recognition-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-8);
    align-items: center;
  }

  .recognition-grid .type-run {
    margin-block: 0;
  }
}

.closing-band {
  padding-block: var(--s-9);
}

.closing-band h2 {
  max-width: 22ch;
}

.closing-band .cta-pair {
  margin-top: var(--s-6);
}

.site-footer {
  padding-block: var(--s-7) var(--s-7);
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.record {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 22px 24px;
  font-family: var(--font-record);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-title {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 9px;
}

.record-line {
  font-size: var(--fs-record);
  line-height: var(--lh-record);
}

.record-label {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 3px;
}

.record-value {
  font-size: var(--fs-record);
  line-height: var(--lh-record);
}

.record-value--strong {
  font-weight: 600;
}

.record-line--changed {
  border-left: 2px solid var(--accent);
  margin-left: -12px;
  padding-left: 10px;
  color: var(--accent);
}

.record-line--changed .record-label {
  color: var(--muted);
}

.record-note {
  font-size: var(--fs-label);
  color: var(--muted);
  margin-top: 2px;
}

.record-footer {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}

.chip {
  display: inline-block;
  font-family: var(--font-record);
  font-size: var(--fs-chip);
  font-weight: 500;
  border-radius: 2px;
  padding: 0 6px 1px;
  line-height: 1.5;
}

.chip--context {
  color: var(--ink);
  border: 1px solid var(--ink);
}

.chip--flagged {
  color: var(--surface);
  background: var(--ink);
}

.flagged-line {
  font-family: var(--font-record);
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s-4) var(--s-5);
  max-width: var(--measure);
  margin-block: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: start;
}

.flagged-line p {
  font-size: var(--fs-record);
  line-height: var(--lh-record);
}

.zero-change {
  font-family: var(--font-record);
  font-size: var(--fs-note);
  color: var(--muted);
  margin-top: var(--s-2);
}

.record--standalone {
  max-width: 46ch;
  margin-top: var(--s-6);
}

.record--standalone .record-label {
  font-size: var(--fs-label);
}

.hero {
  padding-block: var(--s-7) var(--s-8);
  background:
    radial-gradient(
      110% 80% at 88% 12%,
      var(--mk-sage) 0%,
      color-mix(in srgb, var(--mk-sage) 55%, var(--mk-ground)) 42%,
      transparent 72%
    ),
    var(--mk-ground);
}

.hero-grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 901px) {
  .hero-grid {
    grid-template-columns: minmax(0, 10fr) minmax(0, 13fr);
    column-gap: var(--s-8);
  }
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-headline {
  max-width: 20ch;
  margin-bottom: var(--s-5);
}

.hero-support {
  max-width: var(--measure);
  margin-bottom: var(--s-6);
}

.hero-cta {
  margin-bottom: 0;
}

.hero-art {
  margin: 0;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--mk-sage);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--mk-deep) 8%, transparent),
    0 18px 48px color-mix(in srgb, var(--mk-deep) 10%, transparent);
}

.hero-art picture,
.hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-art img {
  aspect-ratio: 1672 / 941;
}

@media (max-width: 900px) {
  .hero-art img {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 720px) {
  .hero-art {
    border-radius: 16px;
  }
}

.hero-proof {
  margin-top: var(--s-8);
}

.hero-visual {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-5);
  align-items: stretch;
}

@media (max-width: 900px) {
  .hero-visual {
    grid-template-columns: 1fr;
  }
}

.hero-panel {
  display: flex;
  flex-direction: column;
}

.hero-panel .record {
  flex: 1;
}

.evidence-panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 22px 24px;
  font-family: var(--font-record);
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}

.evidence-panel p {
  font-size: var(--fs-record);
  line-height: var(--lh-record);
}

.evidence-panel .record-title {
  border-bottom: 1px solid var(--rule);
}

.hero-trust {
  font-family: var(--font-record);
  font-size: var(--fs-trust);
  color: var(--muted);
  margin-top: var(--s-5);
}

.section--figure > .figure {
  margin-top: var(--s-8);
  margin-bottom: var(--s-8);
}

.fig02,
.fig03 {
  width: 100%;
}

@media (min-width: 1180px) {
  .section--figure > .figure {
    width: min(1400px, calc(100vw - var(--gutter) * 4));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.fb-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent);
  padding: 26px 28px 22px;
  font-family: var(--font-record);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
}

.fb-head-right {
  text-align: right;
}

.fb-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.fb-sub,
.fb-label,
.fb-group-label,
.fb-asof,
.fb-meta,
.fb-verdict,
.fb-foot-label,
.fb-foot-value,
.fb-breadcrumb,
.fb-speaker,
.fb-detail dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

.fb-asof,
.fb-meta,
.fb-foot-value {
  text-transform: none;
  letter-spacing: 0.04em;
}

.fb-label {
  margin-bottom: 12px;
}

.fb-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fb-group-label {
  margin-bottom: 2px;
}

.fb-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0 10px;
  font-size: var(--fs-record);
  line-height: var(--lh-record);
  color: var(--ink);
}

.fb-line--para {
  grid-template-columns: 1fr auto;
  max-width: none;
}

.fb-bullet {
  color: var(--muted);
  user-select: none;
}

.fb-line--empty {
  min-height: 1.45em;
}

.fb-line--changed {
  color: var(--accent);
  font-weight: 500;
}

.fb-line--resolved {
  color: var(--muted);
}

.fb-line--resolved s {
  text-decoration-thickness: 1px;
}

.fb-verdict {
  justify-self: end;
  white-space: nowrap;
  color: var(--accent);
}

.fb-verdict--held {
  color: var(--muted);
}

.fb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-family: var(--font-record);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  flex: none;
  translate: 0 2px;
}

.fb-chip--solid {
  background: var(--accent);
  color: var(--surface);
}

.fb-chip--hollow {
  border: 1px solid var(--accent);
  color: var(--accent);
}

.fb-foot {
  display: flex;
  gap: 12px;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.fig02-grid {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 1180px) {
  .fig02-grid {
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: var(--s-7);
  }
}

.fb-evidence-head,
.fb-current-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: 12px;
}

.fb-evidence-head .fb-label,
.fb-current-head .fb-label {
  margin-bottom: 0;
}

.fb-transcript {
  font-family: var(--font-record);
  font-size: var(--fs-record);
  line-height: var(--lh-record);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fb-t--1 {
  color: color-mix(in srgb, var(--ink) 62%, var(--ground));
}

.fb-t--2 {
  color: color-mix(in srgb, var(--ink) 40%, var(--ground));
}

.fb-t--3 {
  color: color-mix(in srgb, var(--ink) 24%, var(--ground));
}

.fb-quote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  align-items: baseline;
  color: var(--ink);
  font-weight: 600;
  margin-block: 14px 0;
}

.fb-quote + .fb-quote {
  margin-top: 0;
}

.fb-quote--cont {
  grid-template-columns: 1fr;
  padding-left: 27px;
  margin-bottom: 14px;
}

.fb-quote + .fb-t:not(.fb-quote) {
  margin-top: 14px;
}

@media (max-width: 1179px) {
  .fig02-grid {
    grid-template-columns: 1fr;
  }

  .fb-card {
    padding: 22px 20px 18px;
  }

  .fb-line {
    grid-template-columns: auto 1fr;
  }

  .fb-verdict {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }

  .fb-line--para .fb-verdict {
    grid-column: 1;
  }
}

.fb-card--wide {
  max-width: 860px;
  margin: 0 auto;
}

.fb-expanded {
  border: 1px solid var(--accent-edge);
  border-radius: 4px;
  overflow: hidden;
  margin-top: -4px;
}

.fb-expanded-head {
  padding: 14px 16px;
}

.fb-detail {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 12px;
  margin: 0;
  padding: 16px;
  background: var(--panel);
  border-top: 1px solid var(--rule);
}

.fb-detail dt {
  margin: 0;
}

.fb-detail dd {
  margin: 0;
  font-family: var(--font-record);
  font-size: var(--fs-record);
  line-height: var(--lh-record);
  color: var(--ink);
}

.fb-evidence-quote {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  align-items: baseline;
  color: var(--accent);
}

.fb-evidence-quote + .fb-evidence-quote {
  margin-top: 4px;
}

.fb-speaker {
  color: var(--muted);
}

.fb-detail dd s {
  color: var(--muted);
  text-decoration-thickness: 1px;
}

.fb-since {
  color: var(--muted);
}

.fb-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: var(--s-7);
}

.fb-breadcrumb-arrow {
  color: var(--muted);
}

@media (max-width: 720px) {
  
  .fb-detail {
    grid-template-columns: 110px 1fr;
    gap: 8px 10px;
    padding: 14px;
  }

  .fb-breadcrumb {
    gap: 8px;
    flex-wrap: wrap;
  }
}

.fig04-wrap {
  margin-top: var(--s-8);
}

.fig04-field {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(560px, 88vh, 1280px);
  background: color-mix(in srgb, var(--ground) 95%, var(--ink));
  overflow: hidden;
  
  contain: layout paint;
}

html {
  overflow-x: clip;
}

.f4 {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1px);
  opacity: var(--o);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, var(--rule));
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.9em 1em 0.75em;
  
  font-size: calc(var(--w) * 0.075px);
}

.f4--bg {
  z-index: 1;
  border-color: color-mix(in srgb, var(--ink) 24%, var(--rule));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}

.f4--mid {
  z-index: 2;
  border-color: color-mix(in srgb, var(--ink) 16%, var(--rule));
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 9%, transparent),
    0 3px 8px color-mix(in srgb, var(--ink) 6%, transparent);
}

.f4--near {
  z-index: 3;
  border-color: var(--rule);
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent),
    0 8px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}

.f4-c1 { --x: -2; --y: -2; --w: 118; --o: .46; }
.f4-c2 { --x: 14; --y: 3; --w: 118; --o: .46; }
.f4-c3 { --x: 27; --y: -1.5; --w: 118; --o: .46; }
.f4-c4 { --x: 41; --y: 6; --w: 118; --o: .50; }
.f4-c5 { --x: 58; --y: 1; --w: 118; --o: .46; }
.f4-c6 { --x: 72; --y: 4; --w: 118; --o: .46; }
.f4-c7 { --x: 86; --y: -2; --w: 118; --o: .46; }
.f4-c8 { --x: 96.5; --y: 12; --w: 118; --o: .46; }
.f4-c9 { --x: 46; --y: 40; --w: 118; --o: .46; }
.f4-c10 { --x: 65; --y: 30; --w: 118; --o: .46; }
.f4-c11 { --x: -2; --y: 78; --w: 118; --o: .46; }
.f4-c12 { --x: 35; --y: 96; --w: 118; --o: .46; }
.f4-c13 { --x: -3; --y: 20; --w: 176; --o: .64; }
.f4-c14 { --x: 9; --y: 14; --w: 176; --o: .64; }
.f4-c15 { --x: 34; --y: 20; --w: 176; --o: .64; }
.f4-c16 { --x: 52; --y: 12; --w: 176; --o: .64; }
.f4-c17 { --x: 80; --y: 22; --w: 176; --o: .68; }
.f4-c18 { --x: 96; --y: 40; --w: 176; --o: .64; }
.f4-c19 { --x: 39; --y: 52; --w: 176; --o: .64; }
.f4-c20 { --x: 58; --y: 60; --w: 176; --o: .64; }
.f4-c21 { --x: 10; --y: 96; --w: 176; --o: .64; }
.f4-c22 { --x: 86; --y: 48; --w: 176; --o: .64; }
.f4-c23 { --x: -2; --y: 66; --w: 212; --o: .80; }
.f4-c24 { --x: 24; --y: 74; --w: 212; --o: .80; }
.f4-c25 { --x: 46; --y: 82; --w: 212; --o: .80; }
.f4-c26 { --x: 70; --y: 42; --w: 212; --o: .80; }
.f4-c27 { --x: 94; --y: 54; --w: 212; --o: .80; }

.f4-w44 { --bw: 44; }
.f4-w46 { --bw: 46; }
.f4-w48 { --bw: 48; }
.f4-w50 { --bw: 50; }
.f4-w52 { --bw: 52; }
.f4-w62 { --bw: 62; }
.f4-w66 { --bw: 66; }
.f4-w68 { --bw: 68; }
.f4-w70 { --bw: 70; }
.f4-w72 { --bw: 72; }
.f4-w74 { --bw: 74; }
.f4-w76 { --bw: 76; }
.f4-w78 { --bw: 78; }
.f4-w82 { --bw: 82; }
.f4-w84 { --bw: 84; }
.f4-w86 { --bw: 86; }
.f4-w88 { --bw: 88; }
.f4-w90 { --bw: 90; }
.f4-w92 { --bw: 92; }

.f4-h,
.f4-b {
  display: block;
  width: calc(var(--bw) * 1%);
  border-radius: 1px;
}

.f4-h {
  height: 0.42em;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
}

.f4-b {
  height: 0.3em;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  margin-top: -0.2em;
}

.f4-h + .f4-b {
  margin-top: 0;
}

.f4-r {
  display: block;
  height: 1px;
  background: var(--rule);
}

.f4-accent {
  position: absolute;
  right: 1em;
  top: 0.85em;
  width: 0.5em;
  height: 0.5em;
  background: var(--accent);
}

.f4--talmage {
  z-index: 4;
  left: 6%;
  left: round(6%, 1px);
  top: 36%;
  top: round(36%, 1px);
  width: clamp(300px, 34%, 340px);
  max-width: 52%;
  gap: 10px;
  padding: 14px 15px 12px;
  font-size: 11.5px;
  background: var(--surface);
  border-color: var(--rule);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent);
  transform-origin: 0 0;
}

.f4-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 9px;
}

.f4-title {
  margin: 0;
  font-family: var(--font-record);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.f4-sub,
.f4-group-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

.f4-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.f4-group-label {
  margin-bottom: 1px;
}

.f4-line {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 7px;
  align-items: baseline;
  font-family: var(--font-record);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink);
}

.f4-line--para {
  grid-template-columns: 1fr;
}

.f4-bullet::before {
  
  content: "\2014";
  color: var(--muted);
}

.f4--focal {
  z-index: 5;
  left: auto;
  right: -22px;
  top: auto;
  bottom: -18px;
  width: 418px;
  gap: 11px;
  
  padding: 16px 26px 22px 18px;
  font-size: 12.5px;
  background: var(--surface);
  border-color: var(--rule);
  box-shadow:
    0 4px 10px color-mix(in srgb, var(--ink) 12%, transparent),
    0 14px 32px color-mix(in srgb, var(--ink) 10%, transparent);
}

.f4-head--row {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.f4-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.f4--focal .f4-title {
  font-size: 14px;
}

.f4--focal .f4-sub,
.f4--focal .f4-group-label {
  font-size: 10.5px;
}

.f4--focal .f4-line {
  font-size: 12.5px;
}

.f4-chip {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ink);
}

.f4-chip--sub {
  align-self: flex-end;
  width: 10px;
  height: 10px;
  margin-top: 0;
  opacity: 0.5;
}

@media (max-width: 900px) {
  
  .fig04-field {
    height: clamp(480px, 70vh, 720px);
  }

  .f4--bg {
    display: none;
  }

  
  .f4--talmage {
    left: 4%;
    left: round(4%, 1px);
    top: 6%;
    top: round(6%, 1px);
    width: 88%;
    max-width: 92%;
  }

  
  .f4--focal {
    left: auto;
    right: -14px;
    top: 47%;
    bottom: auto;
    width: min(360px, 92%);
    padding-right: 20px;
  }
}

@keyframes evi-settle {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes wet-in {
  from {
    color: var(--ink);
    border-left-color: var(--rule);
  }
}

.js-motion .hero-visual.is-in [data-wet='evidence'] {
  animation: evi-settle 0.6s ease-out 0.5s backwards;
}

.js-motion .hero-visual.is-in [data-wet='1'] {
  animation: wet-in 0.9s ease-out 1.4s backwards;
}

.js-motion .hero-visual.is-in [data-wet='2'] {
  animation: wet-in 0.9s ease-out 1.6s backwards;
}

.js-motion .hero-visual.is-in [data-wet='3'] {
  animation: wet-in 0.9s ease-out 1.8s backwards;
}

.js-motion .hero-visual:not(.is-in) [data-wet='evidence'] {
  opacity: 0;
}

@keyframes f4-talmage {
  from {
    transform: scale(2.05);
  }
}

@keyframes f4-talmage-ink {
  from {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
}

@keyframes f4-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes f4-forward {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.f4--talmage::after {
  content: '';
  position: absolute;
  right: 1em;
  top: 0.85em;
  width: 0.5em;
  height: 0.5em;
  background: var(--accent);
  opacity: 0;
}

.js-motion .fig04-field:not(.is-in) .f4 {
  opacity: 0;
}

.js-motion .fig04-field.is-in .f4--talmage {
  animation: f4-talmage 1.1s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.js-motion .fig04-field.is-in .f4--talmage::after {
  animation: f4-talmage-ink 1.3s ease-out backwards;
}

.js-motion .fig04-field.is-in .f4--bg {
  animation: f4-in 0.7s ease-out 1.35s backwards;
}

.js-motion .fig04-field.is-in .f4--mid {
  animation: f4-in 0.7s ease-out 1.6s backwards;
}

.js-motion .fig04-field.is-in .f4--near {
  animation: f4-in 0.7s ease-out 1.8s backwards;
}

.js-motion .fig04-field.is-in .f4--focal {
  animation: f4-forward 0.8s cubic-bezier(0.4, 0, 0.2, 1) 2.2s backwards;
}

@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .js-motion .fig04-wrap {
      view-timeline-name: --fig04;
      view-timeline-axis: block;
    }

    .js-motion .fig04-field.is-in .f4--talmage,
    .js-motion .fig04-field.is-in .f4--talmage::after,
    .js-motion .fig04-field.is-in .f4--bg,
    .js-motion .fig04-field.is-in .f4--mid,
    .js-motion .fig04-field.is-in .f4--near,
    .js-motion .fig04-field.is-in .f4--focal {
      animation-timeline: --fig04;
      
      animation-range: entry 35% contain 0%;
      animation-delay: 0s;
      animation-duration: auto;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .js-motion .fig04-field:not(.is-in) .f4 {
    opacity: var(--o);
  }

  .js-motion .hero-visual:not(.is-in) [data-wet='evidence'] {
    opacity: 1;
  }
}