/* ==========================================================================
   body-system.css - THE BODY TEMPLATES of the information pages.

   Every interior page keeps one frame: the master hero, then this body, then
   "Continue exploring" (links-system.css), the closing CTA (cta-system.css)
   and the footer. The body is a run of sections, each drawn in one of the
   templates the client approved in lab/body-04.html (2026-09-28):

     B  Photographs first        E  Text with a margin
     C  The long read            F  The text crosses the photograph
     D  Two sides of one subject G  The school's words first
                                 H  A path through the years
   plus the deep-red statement panel, the dark caption chip, the rust drop cap
   and quote mark, and the two review markers.

   WORDS: tools/body-content/<page>.json. PHOTOGRAPHS: tools/body-photos/.
   MARKUP: body_block() in tools/build-pages.py. Nothing here is hand-written
   into a page; change this file or the content, then rebuild.
   Proof: node tools/check-page-bodies.mjs --css | --render --dev | --selftest.

   THE CLIENT'S RULES (do not relitigate): no horizontal or vertical rule
   lines, no pills, no boxed cards, no tables as structure, no animation;
   room for real paragraphs; a photograph in every section; and TWO-COLUMN
   SECTIONS END TOGETHER - the client complained about big empty gaps beside a
   short column.

   HOW THE COLUMNS END TOGETHER, BY CONSTRUCTION. In every two-column template
   the text column sets the row's height and the photo column STRETCHES to it
   (grid align-items: stretch, the photo box flex-grows). The photographs are
   absolutely positioned inside their boxes, so they add nothing to the row's
   height: whatever the length of the text, the photograph ends where the
   text ends. The min-heights below only matter for a very short text.
   Each balanced grid carries data-balance and its columns data-col, which is
   what check-page-bodies.mjs measures (bottoms within 60px at 1440/1100).

   SELF-CONTAINED. Its own tokens (the values of about.css's --abt-*), its own
   eyebrow; it never relies on .abt or about.css. The faces, DM Sans 400/700
   and Libre Caslon Display 400, are loaded by the master hero's <head>.
   Libre Caslon Display ships ONE weight, 400: every serif here is 400 and
   font-synthesis is off, so no browser can fake a bold.
   ========================================================================== */

.pg-body {
  --bt-rust: #A83226;          /* site --terracotta, as about.css maps it */
  --bt-red-1: #79281E;         /* the statement panel's two stops */
  --bt-red-2: #601F16;
  --bt-paper: #F8F4EE;
  --bt-cream: #F4EEE4;
  --bt-gold: #CFAF82;
  --bt-ink: #34231A;
  --bt-prose: #5C4C46;
  --bt-lede: #4C3A31;
  /* #897569 in the lab measured 3.9:1 on cream; one step darker reads the
     same and clears 4.5:1 on both backgrounds. */
  --bt-muted: #77655A;
  --bt-shadow: 0 24px 60px rgba(64,30,14,.14);
  --bt-serif: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;
  --bt-sans: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --bt-pad-x: clamp(24px, 5vw, 72px);
  display: block;
  color: var(--bt-ink);
  font-family: var(--bt-sans);
  font-synthesis: none;
}
.pg-body *, .pg-body *::before, .pg-body *::after { box-sizing: border-box; }

/* The two .wrap blocks the frame opens under the hero are empty on a page
   with a body (no skeleton notice, no next-step button); left in, they are a
   paper stripe between the hero and the first section. A page flagged as
   unconfirmed (.pflag) keeps its wrap so the flag still shows. */
.pg > .wrap:has(~ .pg-body):not(:has(.pflag)) { display: none; }

/* ---- the section ---------------------------------------------------------
   Backgrounds alternate paper / cream section by section. The renderer
   counts back from the last section so the body always ends on paper,
   against the "Continue exploring" band's darker cream. */
.bt {
  --bt-bg: var(--bt-paper);
  background: var(--bt-bg);
  padding: clamp(82px, 9vw, 132px) var(--bt-pad-x);
}
.bt--cream { --bt-bg: var(--bt-cream); }
.bt__in { max-width: 1380px; margin: 0 auto; }
.bt__head { margin: 0 0 clamp(42px, 4.5vw, 62px); }

.bt .bt-eyebrow {
  margin: 0 0 18px;
  color: var(--bt-rust);
  font: 700 12px/1.4 var(--bt-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.bt h2 {
  font-family: var(--bt-serif);
  font-weight: 400; font-size: clamp(43px, 5vw, 73px); line-height: 1.03;
  letter-spacing: -.025em; margin: 0; max-width: 940px; color: var(--bt-ink);
}
.bt h3 {
  font-family: var(--bt-serif);
  font-weight: 400; font-size: clamp(27px, 2.3vw, 34px); line-height: 1.15;
  margin: 38px 0 14px; color: var(--bt-ink);
}
.bt p { font-size: 17px; line-height: 1.78; color: var(--bt-prose); margin: 0 0 18px; }
.bt .bt-lede { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.65; color: var(--bt-lede); }
.bt-prose > h3:first-child { margin-top: 0; }
/* The last line of a column is its end: no trailing margin, so the column
   the photograph stretches beside ends exactly on the text. */
.bt-prose > :last-child { margin-bottom: 0; }

/* The rust drop cap, on the first paragraph of template B's reading. */
.bt .bt-drop::first-letter {
  font-family: var(--bt-serif); font-weight: 400; color: var(--bt-rust);
  font-size: 82px; float: left; line-height: .72; margin: 12px 12px 0 0;
}

.bt p.bt-kicker {
  font: 700 12px/1.3 var(--bt-sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--bt-rust); margin: 0 0 12px;
}

/* A plain list, only where the content really is a list. A small rust dot,
   never a rule; long lists run in two columns where the column is wide. */
.bt .bt-list { list-style: none; margin: 0 0 22px; padding: 0; }
.bt .bt-list li {
  position: relative; padding: 0 0 0 22px; margin: 0 0 8px;
  font-size: 17px; line-height: 1.6; color: var(--bt-prose);
  break-inside: avoid;
}
.bt .bt-list li::before {
  content: ""; position: absolute; left: 2px; top: .66em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--bt-rust);
}
.bt .bt-list--cols { columns: 2; column-gap: 36px; }

/* ---- the photograph -------------------------------------------------------
   One box per photograph. The box is sized by its template (an aspect ratio,
   or stretched to the text); the picture fills it with object-fit: cover at
   the sidecar's focal point (inline object-position). The picture is
   absolutely positioned, so it never adds height to the row. */
.bt-photo {
  position: relative; display: block; margin: 0; overflow: hidden;
  border-radius: 14px; background: #E4DED3; min-width: 0;
}
.bt-photo > img,
.bt-photo > .bt-ph,
.bt-w__slot > .bt-ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; border-radius: 0;
}
.bt-photo > img { display: block; object-fit: cover; }
.bt-photo--shadow { box-shadow: var(--bt-shadow); }
/* The frame: the section's own paper cutting into the photograph beneath.
   Its colour IS the background, so it reads as a gap, never as a line. */
.bt-photo--framed { border: 10px solid var(--bt-bg); }

/* Photo to come: the right shape, clearly labelled, until the reviewed
   photograph for the slot has been encoded. */
.bt-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center;
  background: linear-gradient(140deg, #EAE5DD, #DDD6C8);
  color: #5A4B43;
}
.bt-ph__label { font: 700 12px/1.3 var(--bt-sans); letter-spacing: .18em; text-transform: uppercase; }
.bt-ph__slot { font: 400 12px/1.4 var(--bt-sans); overflow-wrap: anywhere; }

/* The dark caption chip. Small, so the dark-solid dither rule does not
   apply; it sits on the photograph, never on paper. */
.bt-chip {
  position: absolute; right: 18px; bottom: 16px; z-index: 1;
  max-width: calc(100% - 36px);
  background: rgba(29,15,7,.88); color: #FFFFFF;
  padding: 11px 14px; font: 400 11px/1.35 var(--bt-sans);
  letter-spacing: .09em; text-transform: uppercase;
}

/* ---- the school's words, set apart: the deep-red statement panel ----------
   The Mission page's "In the founders' words" panel. A real two-stop
   gradient with the house noise film - a dark panel is never a flat fill
   (CLAUDE.md, the diagonal hairline) - a gold opening mark when the words are
   somebody's own (quote: true), none for a summary. */
.bt-statement {
  position: relative; overflow: hidden; margin: 40px 0 0;
  padding: clamp(36px, 4vw, 56px);
  background: linear-gradient(145deg, var(--bt-red-1), var(--bt-red-2));
  color: #FCF7EE; border-radius: 14px;
  box-shadow: 0 30px 70px rgba(71,35,19,.13);
  font-family: var(--bt-serif); font-weight: 400;
  font-size: clamp(21px, 1.75vw, 27px); line-height: 1.52;
}
.bt-statement::before {
  content: "\201C"; position: relative; display: block; margin-bottom: 22px;
  color: var(--bt-gold); font-size: 74px; line-height: .5;
}
.bt-statement--plain::before { content: none; }
.bt-statement .bt-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}
.bt-statement__label {
  position: relative; display: block; margin-bottom: 22px; color: #FFD27A;
  font: 700 11px/1.3 var(--bt-sans); letter-spacing: .19em; text-transform: uppercase;
}
.bt .bt-statement p { position: relative; margin: 0; font: inherit; color: inherit; }

/* The rust quote mark on a quotation (template F's aside). */
.bt-quote {
  margin: 0; font-family: var(--bt-serif); font-weight: 400;
  font-size: clamp(25px, 2.35vw, 36px); line-height: 1.28; color: var(--bt-ink);
}
.bt .bt-quote p { margin: 0; font: inherit; color: inherit; }
.bt-quote p::before {
  content: "\201C"; color: var(--bt-rust); font-size: 70px; line-height: 0;
  vertical-align: -.27em; margin-right: 8px;
}
.bt-quote cite {
  display: block; margin-top: 14px; font: 400 14px/1.5 var(--bt-sans);
  color: var(--bt-muted); font-style: normal;
}

/* ---- THE TWO REVIEW MARKERS ------------------------------------------------
   The only filled highlights allowed besides photographs, chips and the red
   panel. Both must be impossible to miss on screen and on paper.

   [[fix: ...]] - a fact the school gave that still needs confirming: strong
   amber highlight, ink text, and a "Needs fixing" tag. */
.bt-fix {
  background: #FFCF3F; color: var(--bt-ink);
  padding: .06em .28em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.bt-fix__tag {
  display: inline-block; margin: 0 0 0 .45em; padding: 3px 6px 2px;
  vertical-align: .18em; border-radius: 3px;
  background: var(--bt-ink); color: #FFE08A;
  font: 700 10px/1.2 var(--bt-sans); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; text-indent: 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* In a big serif heading the tag stays small and sits on the x-height. */
.bt h2 .bt-fix__tag, .bt h3 .bt-fix__tag, .bt-g__statement .bt-fix__tag { vertical-align: .5em; }

/* {"confirm": ...} - information the school has not given yet: a clearly
   highlighted note, labelled, saying exactly what is missing. */
.bt-confirm {
  margin: 26px 0; padding: 22px 26px 24px;
  background: #FFE38F; color: var(--bt-ink); border-radius: 12px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.bt .bt-confirm__label {
  display: inline-block; margin: 0 0 12px; padding: 5px 9px 4px; border-radius: 3px;
  background: var(--bt-ink); color: #FFE08A;
  font: 700 11px/1.2 var(--bt-sans); letter-spacing: .14em; text-transform: uppercase;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.bt .bt-confirm__text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--bt-ink); }
.bt-prose > .bt-confirm:first-child { margin-top: 0; }
.bt-prose > .bt-confirm:last-child { margin-bottom: 0; }

/* ===== B. PHOTOGRAPHS FIRST: the photographs lead on the left, a longer read
   on the right; the school's words (if any) under the photographs. */
.bt-b__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(46px, 6vw, 96px); align-items: stretch;
}
.bt-b__left { display: flex; flex-direction: column; min-width: 0; }
.bt-b__media { position: relative; flex: 1 1 auto; min-height: clamp(340px, 28vw, 420px); }
.bt-b__media > .bt-photo--a { position: absolute; top: 0; right: 0; width: 80%; height: 82%; }
.bt-b__media > .bt-photo--b {
  position: absolute; left: 0; bottom: 0; width: 46%; height: 52%;
  box-shadow: 0 22px 46px rgba(50,26,13,.15);
}
/* the chip sits at the photograph's top corner here: at the bottom it runs
   under the second photograph on narrower screens */
.bt-b__media .bt-chip { top: 16px; bottom: auto; }
.bt-b__left > .bt-statement { flex: none; margin: 56px 0 0 clamp(0px, 4vw, 60px); }
.bt-b__prose { max-width: 600px; }

/* ===== C. THE LONG READ: one comfortable column, broken once by a wide
   photograph with a second tucked over its corner. */
.bt-c__col { max-width: 760px; }
.bt-c__wide { position: relative; margin: clamp(46px, 5vw, 70px) 0 clamp(80px, 8vw, 120px); }
.bt-c__wide > .bt-photo--a { width: 100%; aspect-ratio: 21 / 8; }
.bt-c__wide > .bt-photo--b {
  position: absolute; left: clamp(20px, 6%, 90px); bottom: -64px;
  width: min(34%, 380px); aspect-ratio: 4 / 3;
}
.bt-c__after {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.bt-c__after > .bt-prose { max-width: 760px; }
.bt-c__after > .bt-statement { margin: 0; }
.bt-c__after--solo { grid-template-columns: minmax(0, 760px); }

/* ===== D. TWO SIDES: one heading, two related ideas, each with its own
   photograph. The client's D2 (lab/body-d-01.html, 2026-09-30): the headline
   may run the full width and the intro nearly so, both photographs are the
   same size (3:2) and start on the same line, and the text sits under each.
   It replaced a staggered version whose second side sat lower on a smaller
   photograph - the client found the white space it left at the top and on
   the right too much. The photographs no longer stretch to the text, so the
   two sides end together only as closely as their texts are the same length. */
.bt-d h2 { max-width: none; }
.bt-d .bt__head { margin-bottom: clamp(36px, 4vw, 54px); }
.bt-d__intro { max-width: 1120px; margin: 0 0 clamp(36px, 4vw, 54px); }
.bt .bt-d__intro { margin-bottom: clamp(36px, 4vw, 54px); }
.bt-d__pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.bt-d__side { display: flex; flex-direction: column; min-width: 0; }
.bt-d__photo { flex: none; min-height: 0; aspect-ratio: 3 / 2; margin: 0 0 34px; }
.bt-d__text > h3:nth-child(2) { margin-top: 0; }

/* ===== E. TEXT WITH A MARGIN: the main text runs long in a wide column; the
   photographs sit beside it like notes in a margin, and run as long as it. */
.bt-e__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(46px, 6vw, 110px); align-items: stretch;
}
.bt-e__main { max-width: 700px; }
.bt-e__main > .bt-statement { margin: 30px 0 0; }
.bt-e__main > .bt-statement + h3, .bt-e__main > .bt-lede + h3 { margin-top: 40px; }
.bt-e__main > .bt-statement + p, .bt-e__main > .bt-statement + .bt-confirm { margin-top: 30px; }
/* The margin is SIZE-CONTAINED: it adds nothing to the row, so the row is
   exactly the text, and the margin stretches to it. The second photograph is
   sized against the margin's own height (cqh), so a short text gets a smaller
   pair rather than a column that runs on past it. */
.bt-e__aside {
  display: flex; flex-direction: column; min-width: 0;
  container-type: size; min-height: clamp(340px, 28vw, 420px);
}
.bt-e__aside > .bt-photo--a { flex: 1 1 auto; min-height: 0; }
.bt-e__aside > .bt-photo--b {
  flex: none; position: relative; width: min(78%, 44cqh); aspect-ratio: 1 / 1;
  margin: -70px 0 0 -44px;
}

/* ===== F. THE TEXT CROSSES THE PHOTOGRAPH: a wide photograph, and the
   reading begins on the section's own paper cutting into its lower edge. */
.bt-f__photo { width: 100%; aspect-ratio: 21 / 9; }
.bt-f__body {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(40px, 6vw, 96px); align-items: stretch;
}
.bt-f__panel {
  position: relative; z-index: 1; margin-top: clamp(-150px, -10vw, -90px);
  background: var(--bt-bg); border-radius: 0 14px 0 0;
  padding: clamp(34px, 3.6vw, 56px) clamp(30px, 3.6vw, 56px) 0;
}
.bt-f__aside {
  display: flex; flex-direction: column; min-width: 0;
  padding-top: clamp(40px, 4vw, 64px);
}
.bt-f__aside > .bt-photo { flex: 1 1 auto; min-height: clamp(200px, 16vw, 260px); margin-top: 34px; }

/* ===== G. THE SCHOOL'S OWN WORDS FIRST: a statement set large across the
   page opens the section; the explanation follows beside one photograph. */
.bt-g__statement {
  margin: 0 0 clamp(50px, 5vw, 76px); max-width: 1180px;
  font: 400 clamp(28px, 3vw, 44px)/1.28 var(--bt-serif); color: var(--bt-ink);
}
.bt .bt-g__statement p { margin: 0; font: inherit; color: inherit; }
.bt-g__statement p::before {
  content: "\201C"; color: var(--bt-rust); font-size: 1.9em; line-height: 0;
  vertical-align: -.36em; margin-right: 10px;
}
.bt-g__statement footer { margin-top: 20px; font: 400 14px/1.5 var(--bt-sans); color: var(--bt-muted); }
.bt-g__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(46px, 6vw, 96px); align-items: stretch;
}
.bt-g__photo { min-height: clamp(300px, 24vw, 380px); }
.bt-g__prose { max-width: 640px; }

/* ===== H. A PATH THROUGH THE YEARS: stages in order, each opened by a large
   rust numeral; the photographs stay on the left the whole way down. */
.bt-h__lede { max-width: 760px; }
.bt .bt-h__lede { margin: 0 0 clamp(46px, 5vw, 70px); }
.bt-h__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(46px, 7vw, 120px); align-items: stretch;
}
.bt-h__left { display: flex; flex-direction: column; min-width: 0; }
.bt-h__media { position: relative; flex: 1 1 auto; min-height: clamp(400px, 33vw, 500px); }
.bt-h__media > .bt-photo--a { position: absolute; top: 0; left: 0; width: 86%; bottom: 90px; }
.bt-h__media > .bt-photo--b { position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 1 / 1; }
.bt-h__left > .bt-statement { flex: none; margin: 44px 0 0; }
.bt-h__stages { list-style: none; margin: 0; padding: 0; }
.bt-h__stage {
  display: grid; grid-template-columns: clamp(64px, 5.6vw, 84px) minmax(0, 1fr);
  column-gap: 22px; margin: 0 0 30px;
}
.bt-h__stage:last-child { margin-bottom: 0; }
.bt-h__num {
  grid-row: 1 / span 2;
  font: 400 clamp(46px, 4vw, 62px)/.9 var(--bt-serif); color: var(--bt-rust); padding-top: 4px;
}
.bt .bt-h__stage h3 { grid-column: 2; margin: 0 0 10px; }
.bt .bt-h__stage p { grid-column: 2; margin: 0; }
.bt-h__right > .bt-statement { margin: 44px 0 0; }

/* ===== WIDGET: a component that is not built yet (the prayer-times box).
   Its place on the page, the right size, and what it still needs. */
.bt-w__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 80px); align-items: stretch;
}
.bt-w__slot {
  position: relative; min-height: 280px; border-radius: 14px; overflow: hidden;
}
.bt-w__grid > .bt-confirm { margin: 0; align-self: center; }

/* ---- 901-1100: the two-column templates, a little narrower ---------------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .bt-e__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .bt-e__aside > .bt-photo--b { margin-left: -30px; }
  /* H's photo column would otherwise be a narrow strip at this width */
  .bt-h__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; }
  .bt-h__media > .bt-photo--a { width: 90%; }
  .bt-h__media > .bt-photo--b { width: 56%; }
}

/* ---- 900 and under: every template stacks, photographs first -------------- */
@media (max-width: 900px) {
  .bt-b__grid, .bt-c__after, .bt-d__pair, .bt-e__grid, .bt-f__body, .bt-g__body,
  .bt-h__grid, .bt-w__grid { grid-template-columns: minmax(0, 1fr); }
  .bt-b__grid, .bt-h__grid { gap: 44px; }

  /* B and H: photographs, then the reading, then the school's words. */
  .bt-b__left, .bt-h__left { display: contents; }
  .bt-b__media, .bt-h__media { order: 1; flex: none; }
  .bt-b__prose, .bt-h__stages, .bt-h__right { order: 2; }
  .bt-b__left > .bt-statement, .bt-h__left > .bt-statement { order: 3; margin: 0; }
  .bt-b__media { min-height: 460px; }
  .bt-b__prose { max-width: 680px; }

  .bt-c__wide > .bt-photo--a { aspect-ratio: 16 / 9; }
  .bt-c__wide > .bt-photo--b { width: 44%; bottom: -48px; border: 7px solid var(--bt-bg); }

  .bt-d__side + .bt-d__side { margin-top: 20px; }

  .bt-e__aside { order: -1; container-type: normal; min-height: 0; }
  .bt-e__main { max-width: 680px; }

  .bt-f__panel { margin-top: -60px; }
  .bt-f__aside { padding-top: 0; }
  .bt-f__aside > .bt-photo { flex: none; min-height: 0; aspect-ratio: 3 / 2; }

  .bt-g__photo { min-height: 0; aspect-ratio: 5 / 4; }
  .bt-g__prose { max-width: 680px; }

  /* E and H: the two photographs in flow, the second tucked over the
     first's lower corner - one simple overlap, nothing positioned. */
  .bt-e__aside, .bt-h__media { display: block; position: relative; min-height: 0; }
  .bt-e__aside > .bt-photo, .bt-h__media > .bt-photo { position: relative; inset: auto; }
  .bt-e__aside > .bt-photo--a, .bt-h__media > .bt-photo--a { width: 100%; aspect-ratio: 3 / 2; }
  .bt-e__aside > .bt-photo--b, .bt-h__media > .bt-photo--b {
    width: 44%; aspect-ratio: 1 / 1; margin: -80px 18px 0 auto; border: 7px solid var(--bt-bg);
  }
  .bt-w__slot { min-height: 220px; }
}

/* ---- phones ---------------------------------------------------------------- */
@media (max-width: 600px) {
  .bt { padding-top: 72px; padding-bottom: 72px; }
  .bt__head { margin-bottom: 34px; }
  .bt h2 { font-size: clamp(34px, 9.6vw, 43px); line-height: 1.06; letter-spacing: -.02em; }
  .bt h3 { font-size: 26px; margin-top: 32px; }
  .bt p, .bt .bt-list li { font-size: 17px; line-height: 1.72; }
  .bt .bt-lede { font-size: 19px; line-height: 1.6; }
  .bt .bt-drop::first-letter { font-size: 66px; margin-top: 9px; }
  .bt-statement { padding: 30px 24px; font-size: 21px; line-height: 1.5; }
  .bt-statement::before { font-size: 60px; margin-bottom: 16px; }
  .bt-confirm { padding: 18px 20px 20px; }
  .bt-chip { left: 12px; right: auto; top: 12px; bottom: auto; max-width: calc(100% - 24px); padding: 9px 11px; font-size: 10px; }

  /* B and C: the overlap becomes the same simple in-flow pair as E and H. */
  .bt-b__media, .bt-c__wide { display: block; position: relative; min-height: 0; height: auto; }
  .bt-c__wide { margin: 40px 0 44px; }
  .bt-b__media > .bt-photo, .bt-c__wide > .bt-photo { position: relative; inset: auto; }
  .bt-b__media > .bt-photo--a, .bt-c__wide > .bt-photo--a,
  .bt-e__aside > .bt-photo--a, .bt-h__media > .bt-photo--a { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .bt-b__media > .bt-photo--b, .bt-c__wide > .bt-photo--b,
  .bt-e__aside > .bt-photo--b, .bt-h__media > .bt-photo--b {
    left: auto; bottom: auto; width: 46%; height: auto; aspect-ratio: 1 / 1;
    margin: -64px 14px 0 auto; border: 6px solid var(--bt-bg); box-shadow: none;
  }

  .bt-d__photo { aspect-ratio: 4 / 3; margin-bottom: 26px; }
  .bt-d__side + .bt-d__side { margin-top: 40px; }

  .bt-f__photo { aspect-ratio: 4 / 3; }
  .bt-f__panel { margin-top: 0; padding: 30px 0 0; border-radius: 0; background: transparent; }
  .bt-f__aside > .bt-photo { aspect-ratio: 4 / 3; margin-top: 28px; }
  .bt-quote { font-size: 25px; }

  .bt-g__statement { font-size: 26px; line-height: 1.32; }
  .bt-g__photo { aspect-ratio: 4 / 3; }

  .bt-h__stage { grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; margin-bottom: 28px; }
  .bt-h__num { grid-row: 1; font-size: 40px; padding-top: 0; }
  .bt .bt-h__stage h3 { align-self: center; margin: 0 0 8px; }
  .bt .bt-h__stage p { grid-column: 1 / -1; }

  .bt .bt-list--cols { columns: 1; }
}

@media print {
  .bt { padding-top: 40px; padding-bottom: 40px; }
  .bt-fix, .bt-fix__tag, .bt-confirm, .bt-confirm__label, .bt-statement {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}