/* The home page, visuals first (site rebuild PR B, 25 Oct 2026): the hero, a
   non-sticky chapter list and five sections, each one visual and at most three
   lines. Sizes come from the type scale in site.css; text inside a clay stage
   (.hs, .bt) is drawn in stage coordinates and scales with the drawing. Every
   stage reserves its height here, per breakpoint, before home.js builds it. */
.chapter { padding: clamp(40px, 6vw, 84px) 0; }
.sec-head .statement { font: 500 var(--kf-fs-h3)/1.25 var(--kf-serif); margin: 6px 0 0; max-width: 820px; text-wrap: balance; }

/* The chapter list under the hero: a row of links on a laptop, one pill on a
   phone. It does not stick: it is read once, under the hero. */
.chnav { position: relative; z-index: 3; background: var(--kf-paper); border-top: 1px solid var(--kf-line); border-bottom: 1px solid var(--kf-line); }
.chnav-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 56px; }
.chnav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.chnav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font: 400 var(--kf-fs-small) var(--kf-sans); color: var(--kf-muted); text-decoration: none; white-space: nowrap; }
.chnav-list a:hover { color: var(--kf-ink); text-decoration: underline; }
.ch-pill { display: none; }
@media (max-width: 640px) {
  .chnav-list { display: none; }
  .ch-pill { display: block; flex: 1 1 100%; }
  .ch-pill summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--kf-panel-solid); border: 1px solid var(--kf-line); font: 600 var(--kf-fs-small) var(--kf-sans); color: var(--kf-ink); cursor: pointer; list-style: none; }
  .ch-pill summary::-webkit-details-marker { display: none; }
  .ch-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .ch-pill[open] .ch-caret { transform: translateY(2px) rotate(-135deg); }
  .ch-menu { margin: 6px 0 10px; padding: 8px; list-style: none; background: var(--kf-panel-solid); border: 1px solid var(--kf-line); border-radius: 16px; box-shadow: 0 18px 36px rgba(60, 40, 20, 0.18); }
  .ch-menu a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; border-radius: 10px; font: 400 var(--kf-fs-body) var(--kf-sans); color: var(--kf-ink); text-decoration: none; }
  .ch-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--kf-sienna); color: #fff8ee; font: 600 var(--kf-fs-label) var(--kf-sans); flex: none; }
}

/* 0. Hero */
.hero { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(36px, 5vw, 64px); }
/* The hero keeps the header's container, so its left edge lines up with the
   header's and every other hero's (site panel, 1 Nov 2026: it ran 1400 px
   wide, from x=48 at 1440, with no recorded reason). The stage keeps the
   width it had at 1280 (about 770 px), so every clay figure in it stays at or
   above its release minimum. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 3.9fr) minmax(0, 8.1fr); grid-template-areas: "head stage" "body body"; gap: 0 clamp(28px, 3.5vw, 56px); align-items: center; }
.hero-head { grid-area: head; align-self: center; }
.hero-body { grid-area: body; align-self: start; }
.hero-figure { grid-area: stage; margin: 0; align-self: center; }
.hero-tagline { font: 500 var(--kf-fs-h3)/1.3 var(--kf-serif); color: var(--kf-sienna-text); margin: 16px 0 0; text-wrap: balance; }
.hero-audience { margin: 4px 0 0; font: 400 var(--kf-fs-body)/1.45 var(--kf-sans); color: var(--kf-muted); max-width: 30em; }
/* The call to action sits in the head, so it is on the first screen at 390 x 844 and 1440 x 900. */
.hero-head .btn-row { margin-top: 20px; }
/* The offer under the buttons, and the cast line under the four story chips. */
.hero-offer { margin: 12px 0 0; font: 400 var(--kf-fs-small)/1.45 var(--kf-sans); color: var(--kf-muted); max-width: 34em; text-wrap: balance; }
.hero-cast { margin: 12px 0 0; font: 400 var(--kf-fs-small)/1.45 var(--kf-sans); color: var(--kf-ink); max-width: 65ch; }
/* One playable placement of The typo per screen size (site panel H1, 31 Oct
   2026). On a phone (640 px and below) the hero's player takes the quiet Watch
   button's place on the first screen and plays in place; from 641 px up it is
   hidden and its poster is a blank pixel, so a laptop neither shows nor loads
   it. The whole 16:9 poster shows, so Bram stands whole; the small pill sits
   low at the left, clear of him and of the caption card. */
.hero-film { display: none; }
/* A player that is playing stays in view when the screen crosses 640 px (a
   phone turned on its side), so its sound never plays from a hidden frame
   (review of #209, round 1); the next Play anywhere stops it (site.js). */
.hero-film.is-playing { display: block; margin-top: 16px; max-width: 520px; }
@media (max-width: 640px) {
  .hero-head .hero-watch { display: none; }
  .hero-film { display: block; margin-top: 16px; max-width: 520px; border-radius: 16px; }
  .hero-film .film-box { display: block; aspect-ratio: 16 / 9; border-radius: 16px; box-shadow: 0 12px 28px rgba(60, 40, 20, 0.16), 0 0 0 1px var(--kf-line); }
  /* The whole poster, so The typo's figure stands whole (film lineup PR,
     31 Oct 2026); the pill sits low left, off the caption card and the figure. */
  .hero-film .film-box img { object-position: 50% 50%; }
  .hero-film .film-play { align-items: flex-end; justify-content: flex-start; padding: 8px; }
  .hero-film .film-play span.pill { padding: 6px 12px 6px 8px; gap: 8px; font-size: var(--kf-fs-small); box-shadow: 0 8px 18px rgba(20, 14, 8, 0.3); }
  .hero-film .film-play .tri { width: 22px; height: 22px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "body"; }
  .hero-figure { margin-top: 20px; }
}
/* The hero stage shows from 641 px up; on a phone the four steps tell the decision. */
.hero-example { margin: 18px 0 0; }
.hero-example + .hero-steps { margin-top: 8px; }
@media (max-width: 640px) { .hero-figure { display: none; } .hero-tagline { margin-top: 10px; } }
.hero-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
@media (max-width: 1100px) { .hero-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-steps li { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 14px; font: 600 var(--kf-fs-small)/1.3 var(--kf-sans); color: var(--kf-ink); }
.hero-steps .n { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 var(--kf-fs-label)/1 var(--kf-sans); background: var(--kf-sienna); color: #fff8ee; }
.hero-steps li > span:last-child { position: relative; }
.hero-steps strong { font-weight: 600; color: var(--kf-sienna-text); }
.hero-steps .lit { position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--kf-sienna); background: rgba(251, 246, 236, 0.7); opacity: 0; pointer-events: none; }
html:not(.js-motion) .hero-steps .lit { opacity: 1; }
.hero-stage { aspect-ratio: 1000 / 625; }

.hs .slab-label { font: 600 20px/1 var(--kf-sans); color: #fbe3c2; letter-spacing: 0.02em; white-space: nowrap; translate: -50% 0; }
.hs .st-place, .hs .st-name { translate: -50% 0; }
.hs .st-chip { font-size: 14px; padding: 6px 11px; translate: -50% 0; }
.hs .rule { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; translate: -50% 0; }
.hs .rule img { flex: none; }
.hs .rule b { font: 600 16px/1.2 var(--kf-sans); }
.hs .marks { display: flex; gap: 6px; margin-left: 4px; }
.hs .mk { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 14px/1 var(--kf-sans); color: #fff; }
.hs .mk.pass { background: #5f7d4b; }
.hs .rack-label { font: 600 13px/1.15 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

/* 1. The problem: three stills in a row from 900 px (each drawn with its tall
   layout, about 370 px wide at 1280), stacked full width from 641 to 899 px
   (the wide layout), and stacked tall on a phone. home.js picks the same
   layout from the same widths. */
.beats3 { display: grid; gap: 18px; margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 900px) { .beats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 899px) { .beats3 { max-width: 640px; } }
.beat { margin: 0; }
.beat figcaption { margin: 8px 0 0; font: 600 var(--kf-fs-small)/1.35 var(--kf-sans); color: var(--kf-ink); }
#beat-ask { aspect-ratio: 540 / 240; }
#beat-systems { aspect-ratio: 540 / 250; }
#beat-plane { aspect-ratio: 540 / 308; }
@media (max-width: 640px), (min-width: 900px) {
  #beat-ask { aspect-ratio: 360 / 340; }
  #beat-systems { aspect-ratio: 360 / 306; }
  #beat-plane { aspect-ratio: 360 / 372; }
}
.bt .st-place, .bt .st-name, .bt .st-chip { translate: -50% 0; }
.bt .st-place.is-two-line { line-height: 1.15; }
.bt .st-name.is-two-line { text-align: center; line-height: 1.15; padding: 4px 10px; }
.bt .st-name.is-two-line small { display: block; font-size: 13px; }
.bt .bt-ask { position: absolute; padding: 6px 11px; }
.bt .bt-ask::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: inherit; rotate: 45deg; box-shadow: 3px 3px 4px rgba(60, 40, 20, 0.08); }
.bt .bt-box { border: 2px dashed rgba(107, 90, 69, 0.45); border-radius: 16px; background: rgba(251, 246, 236, 0.72); }
.bt .bt-name { font-size: 14px; }
.bt .bt-count { font-variant-numeric: tabular-nums; }
.bt .bt-twice { background: var(--kf-sienna); color: #fff8ee; }
.bt .bt-rule { display: flex; align-items: center; gap: 8px; translate: -50% 0; padding: 7px 12px; }
.bt .bt-rule b { font: 600 15px/1.2 var(--kf-sans); }
.bt .slab-label { font: 600 15px/1 var(--kf-sans); color: #fff1dc; letter-spacing: 0.02em; white-space: nowrap; translate: -50% 0; text-shadow: 0 1px 0 rgba(60, 28, 10, 0.45); }
/* The sources behind one disclosure. */
.agents-more .body-copy + .body-copy { margin-top: 12px; }
.agents-more .body-copy a { color: var(--kf-sienna-text); text-underline-offset: 2px; }
.agent-list { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1080px; }
.agent-list li { padding: 14px 16px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); font-size: var(--kf-fs-small); line-height: 1.45; }
.agent-list b { display: block; font: 600 var(--kf-fs-title)/1.25 var(--kf-sans); color: var(--kf-ink); margin-bottom: 4px; }
@media (max-width: 760px) {
  .agent-list { display: block; margin: 8px 0 14px; padding-left: 1.2em; list-style: disc; }
  .agent-list li { padding: 0; background: none; border: 0; border-radius: 0; font-size: var(--kf-fs-body); margin-top: 6px; }
  .agent-list b { display: inline; font: inherit; font-weight: 600; margin: 0; }
}
.sources { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: var(--kf-fs-small); color: var(--kf-muted); overflow-wrap: anywhere; }
.sources a { color: var(--kf-sienna-text); }

/* 2. The promise: the yes as Sara's agent receives it, large on the sand in a
   clay frame (720 px wide on a laptop, full width on a phone), the walk-in line
   as its caption; then Hold, Keep and Prove, with no film (film lineup PR,
   31 Oct 2026: The typo is Home's one film). */
.promise-visual { margin: clamp(22px, 3vw, 34px) auto 0; max-width: 820px; }
.promise-frame { position: relative; padding: clamp(18px, 3vw, 34px); border-radius: 26px; background: radial-gradient(130% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 55%, #e6d8bf 100%); box-shadow: inset 0 0 0 1px var(--kf-line); }
.promise-clay { position: absolute; right: clamp(14px, 3vw, 30px); top: -28px; transform: rotate(8deg); pointer-events: none; }
.promise-clay img { display: block; max-width: none; filter: drop-shadow(0 10px 14px rgba(60, 40, 20, 0.22)); }
.promise-card { position: relative; max-width: 720px; background: var(--kf-panel-solid); border-radius: 20px; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); box-shadow: var(--kf-shadow-card); }
.promise-card .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 var(--kf-fs-label) var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); margin: 0 0 12px; padding-right: 72px; }
.promise-card .who .chip-example { letter-spacing: normal; text-transform: none; font-weight: 400; }
.promise-rows { margin: 0; display: grid; gap: 0; }
.promise-rows div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--kf-line); }
.promise-rows div:first-child { border-top: 0; }
.promise-rows dt { font: 600 var(--kf-fs-body)/1.4 var(--kf-sans); color: var(--kf-ink); }
.promise-rows dd { margin: 0; font-size: var(--kf-fs-body); line-height: 1.45; }
@media (max-width: 520px) { .promise-rows div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .promise-clay { top: -18px; } .promise-clay img { height: 72px; width: auto; } }
.promise-note { margin: 14px 0 0; max-width: 720px; font-size: var(--kf-fs-body); color: var(--kf-muted); }
.hkp-row { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 18px; align-items: center; }
.hkp-cols { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 861px) { .hkp-row .hkp-cols { grid-template-rows: auto auto 1fr; row-gap: 0; } .hkp-row .hkp-col { grid-row: span 3; grid-template-rows: subgrid; } }
.hkp-row .hkp-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .hkp-row .hkp-cols { grid-template-columns: minmax(0, 1fr); } }
.hkp-col { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.hkp-fig { grid-row: span 3; display: flex; align-items: flex-end; justify-content: center; margin: 4px 0 0; }
.hkp-fig img { display: block; max-width: none; }
.hkp-col h4 { font: 600 var(--kf-fs-title)/1.2 var(--kf-sans); margin: 0; }
.hkp-like { margin: 2px 0 8px; font: 600 var(--kf-fs-small)/1.3 var(--kf-sans); font-style: normal; color: var(--kf-sienna-text); }
.hkp-col p:last-child { margin: 0; font-size: var(--kf-fs-small); line-height: 1.45; }
/* "Watch The typo": a half-height row, the poster left, one line right. */
.watch-row { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
@media (max-width: 860px) { .watch-row { grid-template-columns: minmax(0, 1fr); } }
.watch-copy .film-title { font: 500 var(--kf-fs-h3)/1.25 var(--kf-serif); margin: 0; }
.watch-copy .film-intro { margin: 8px 0 0; font-size: var(--kf-fs-body); max-width: 34em; }
/* On a phone the hero holds the page's one player: the row keeps its words and
   a "Watch The typo" link that starts the hero's player (home.js). */
.watch-hero-row { display: none; margin: 10px 0 0; }
@media (max-width: 640px) {
  .watch-row .watch-film { display: none; }
  .watch-hero-row { display: block; }
  /* The card's player playing as the screen narrows stays in view. */
  .watch-row .watch-film.is-playing { display: block; }
}
/* The mid-page pill, alone in its row. */
.mid-pill { display: flex; justify-content: center; margin: clamp(30px, 4vw, 48px) 0 0; }

/* 3. How it works: what you get, four clay cards. */
.get-cards { list-style: none; padding: 0; margin: clamp(20px, 3vw, 32px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .get-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .get-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.get-cards li { padding: 16px 18px 18px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.get-fig { height: 96px; display: flex; align-items: flex-end; justify-content: center; margin: -4px -6px 12px; padding-bottom: 10px; border-radius: 14px; background: radial-gradient(120% 110% at 40% 0%, #fbf6ea 0%, #efe3cc 70%, #e6d7bd 100%); }
.get-fig img { display: block; max-width: none; }
.get-cards h3 { font: 600 var(--kf-fs-title)/1.25 var(--kf-sans); margin: 0 0 6px; }
.get-cards p { margin: 0; font-size: var(--kf-fs-small); line-height: 1.45; color: var(--kf-ink); }
/* Where KarmanFlow sits, and its four doors: a still clay diagram (home.js,
   buildSits) under the cards. The tall drawing takes over at 860 px and stays
   at most 480 px wide. */
.sits { margin: clamp(20px, 3vw, 32px) 0 0; padding: 18px; background: var(--kf-panel-solid); border-radius: 22px; }
@media (max-width: 700px) { .sits { padding: 12px; } }
@media (max-width: 640px) { .sits { padding: 10px 6px; } }
.sits-stage { aspect-ratio: 1000 / 560; }
@media (max-width: 860px) { .sits-stage { aspect-ratio: 360 / 780; max-width: 480px; margin: 0 auto; } }
.sits-bt .st-place { font-size: 17px; }
.sits-bt.is-narrow .st-place { font-size: 15px; }
.sits-bt .sits-hold { font-size: 16px; padding: 7px 14px; }
.sits-bt.is-narrow .sits-hold { font-size: 14px; padding: 6px 10px; }
.sits-bt .sits-way { display: flex; align-items: center; gap: 8px; color: var(--kf-steel, #35607d); box-shadow: 0 6px 16px rgba(30, 50, 70, 0.14), inset 0 0 0 1.5px var(--kf-steel, #35607d); }
.sits-bt .sits-way b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--kf-steel, #35607d); color: #fff8ee; font: 600 13px/1 var(--kf-sans); }
.sits-bt.is-narrow .sits-way { padding: 4px; }
.sits-bt .sits-any { background: var(--kf-paper, #e7dcc7); }
.sits figcaption { margin: 0; }
.sits-paths { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: path; }
@media (max-width: 760px) { .sits-paths { grid-template-columns: minmax(0, 1fr); } }
.sits-paths li { position: relative; padding: 10px 14px 10px 46px; font-size: var(--kf-fs-small); line-height: 1.45; color: var(--kf-ink); background: var(--kf-panel); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--kf-line); counter-increment: path; }
.sits-paths li::before { content: counter(path); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--kf-steel, #35607d); color: #fff8ee; font: 600 var(--kf-fs-label)/24px var(--kf-sans); text-align: center; }
.quiet-link { margin: 18px 0 0; }
.quiet-link a { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--kf-fs-small) var(--kf-sans); color: var(--kf-sienna-text); text-underline-offset: 3px; }

/* 4. 2028: the night still (the /2028 scene's held last frame, 1600 by 731,
   rendered from the page's own words; public-media.json records its copy hash;
   its width and height attributes reserve the frame), then three rows. */
.night-lines { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .night-lines { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.night-lines li { padding: 12px 16px; background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 14px; font: 600 var(--kf-fs-body)/1.4 var(--kf-sans); }

/* 5. Start: the closing section on the band (embers and the clay slab). */
.start-sec .band { display: grid; gap: clamp(20px, 3vw, 32px); }
@media (max-width: 640px) { .start-sec .band-stage { display: none; } }
.start-sec .sec-head { max-width: 760px; }
.band .start-line { margin-top: 12px; }
/* Each step chip is a link to its card on /start: an arrow at its end, and
   its name underlined on hover and keyboard focus (site panel H4). */
.start-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.start-steps a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; background: rgba(251, 246, 236, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 236, 210, 0.35); color: #fff7ea; font: 600 var(--kf-fs-small) var(--kf-sans); text-decoration: none; }
.start-steps a:hover, .start-steps a:focus-visible { background: rgba(251, 246, 236, 0.18); }
.start-steps a:hover .step-name, .start-steps a:focus-visible .step-name { text-decoration: underline; text-underline-offset: 3px; }
.start-steps .step-arrow { margin-left: -2px; opacity: 0.85; }
.start-steps .n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kf-sienna); color: #fff8ee; font: 600 var(--kf-fs-label)/1 var(--kf-sans); }
.start-actions { margin: 0; }

/* The contrast card under the hero (home messaging PR, 31 Oct 2026): the
   heading and body above the D1 thesis-contrast still. The wide still shows
   when the figure is 900 px wide or more, so its smallest label stays at 13.5
   css px; below that the compact still, read top to bottom (the studio
   handback's embed note 3: switch on the figure's width, not the viewport).
   The wide still is hidden by default and one query shows it and hides the
   compact one, so no figure width shows both. On a phone the figure runs to
   the card's inner edge, so the compact still's smallest text stays above
   12 css px (about 356 px wide at 390). Each image reserves its box from its
   width and height; object-fit contain. */
.contrast { padding: clamp(8px, 2vw, 24px) 0 clamp(28px, 4vw, 48px); }
.contrast-card { --contrast-pad: clamp(20px, 3.4vw, 40px); background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: 26px; padding: var(--contrast-pad); }
.contrast-copy { max-width: 860px; }
.contrast-copy .kf-h2 { text-wrap: balance; }
.contrast-copy .body-copy { margin: 0; max-width: 68ch; }
.contrast-fig { container-type: inline-size; margin: clamp(18px, 2.6vw, 28px) 0 0; }
.contrast-fig img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 16px; }
.contrast-fig .contrast-compact { max-width: 560px; margin: 0 auto; }
.contrast-fig .contrast-wide { display: none; }
@container (min-width: 900px) {
  .contrast-fig .contrast-wide { display: block; }
  .contrast-fig .contrast-compact { display: none; }
}
@media (max-width: 640px) { .contrast-fig { margin-inline: calc(-1 * var(--contrast-pad)); } }