/* Industries: the section page and six industry bodies (assets/bodies-industries.js). As in topic-bodies.css, every
   block has a plain readable layout, which is what a reader with reduced motion gets; the scenes take over under
   html.bodies-live. The bodies are set in type and line alone: no picture stands beside the words (the pictures are the
   hero paintings, and the landing and Healthcare play their scenes on the hero itself). */

[data-topic="industries"] { --b-bg: #07090d; }
[data-topic="healthcare"] { --b-bg: #080b10; }
[data-topic="industrial"] { --b-bg: #0b0e12; }
[data-topic="aviation"] { --b-bg: #06080b; }

/* the heroes: seven pages, seven scales and placements (the at-* placements are in topic-bodies.css) */
@media (min-width: 761px) {
  [data-topic="industries"] .t-title { font-size: clamp(64px, 9.6vw, 184px); }
  [data-topic="healthcare"] .t-title { font-size: clamp(56px, 8.4vw, 160px); }
  [data-topic="defense"] .t-title { font-size: clamp(48px, 6.4vw, 122px); }
  [data-topic="defense"] .t-hero-text.at-row .t-statement { font-size: clamp(28px, 2.7vw, 52px); }
  [data-topic="life-sciences"] .t-title { font-size: clamp(48px, 6vw, 112px); }
  [data-topic="industrial"] .t-hero-text.at-words .t-title { font-size: clamp(40px, 3.8vw, 74px); }
  [data-topic="industrial"] .t-statement { max-width: 15ch; font-size: clamp(24px, 2.4vw, 44px); }
  /* the line keeps to the dark of the turbine, clear of the lit tablet, with a shade of its own behind it */
  [data-topic="industrial"] .t-hero-text .t-line { position: relative; max-width: 19ch; text-wrap: balance; }
  [data-topic="industrial"] .t-hero-text .t-line::before { content: ""; position: absolute; inset: -38% -20% -38% -26%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 8, 11, .86), rgba(6, 8, 11, .5) 60%, rgba(6, 8, 11, 0)); }
  /* Healthcare's promise keeps to the foot of the bed, clear of the figure as the camera closes in */
  [data-topic="healthcare"] .t-hero-text .t-statement { max-width: 14ch; }
  /* Pharma's name crosses the lit cabinet, and its line the reader's helmet as the camera settles: a shade of their own */
  [data-topic="life-sciences"] .t-hero-text :is(.t-title, .t-line) { position: relative; }
  [data-topic="life-sciences"] .t-hero-text .t-title::before, [data-topic="life-sciences"] .t-hero-text .t-line::before { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 8, 11, .7), rgba(6, 8, 11, .4) 62%, rgba(6, 8, 11, 0)); }
  [data-topic="life-sciences"] .t-hero-text .t-title::before { inset: -22% -16% -24% -14%; background: radial-gradient(closest-side, rgba(6, 8, 11, .84), rgba(6, 8, 11, .55) 64%, rgba(6, 8, 11, 0)); }
  [data-topic="life-sciences"] .t-hero-text.at-row { grid-template-rows: auto 1fr; }
  [data-topic="life-sciences"] .t-hero-text .t-line::before { inset: -60% -10% -60% -8%; }
  [data-topic="finance"] .t-title { font-size: clamp(44px, 4.6vw, 88px); }
  [data-topic="finance"] .t-statement { font-size: clamp(30px, 3.3vw, 62px); }
}

/* The endings. Each is one screen with the way on and the footer (topic-bodies.css). The builder moves the close out of
   the body, where the body's reset no longer reaches it, so its heading carried the browser's own margins (.83em above
   and below) and pushed several endings past one screen: here it has none */
:where(.t-end > .b-close) :where(h2) { margin: 0; }
:is([data-topic="industrial"], [data-topic="healthcare"]) .b-close .b-h .accent { white-space: nowrap; }
/* Defense ends its file: a last rule across the reading width, and the close flush left under it */
[data-topic="defense"] .t-end > .b-close { --col: max(var(--gutter), (100% - 1280px) / 2); align-items: flex-start; padding-left: var(--col); padding-right: var(--col); text-align: left; }
[data-topic="defense"] .t-end > .b-close::before { content: ""; align-self: stretch; height: 1px; margin-bottom: 6.5vh; background: rgba(13, 17, 23, .2); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
[data-topic="defense"] .t-end > .b-close .b-h { max-width: 22ch; }
[data-topic="defense"] .t-end > .b-close .b-actions { justify-content: flex-start; }
/* Aviation's close stands to the right, where its hero's promise stood */
[data-topic="aviation"] .t-end > .b-close { --col: max(var(--gutter), (100% - 1280px) / 2); align-items: flex-end; padding-left: var(--col); padding-right: var(--col); text-align: right; }
[data-topic="aviation"] .t-end > .b-close .b-h { max-width: 13ch; }
[data-topic="aviation"] .t-end > .b-close .b-actions { justify-content: flex-end; }
/* Finance's close carries the reviewer's mark from its file: a crimson line drawn under "under review." */
.b-cited { position: relative; white-space: nowrap; }
.b-cited::after { content: ""; position: absolute; left: 0; right: .1em; bottom: .02em; height: 1px; background: rgba(181, 47, 67, .85); transform: scaleX(var(--cite, 1)); transform-origin: 0 50%; pointer-events: none; }

/* The landing and Healthcare play their scenes on the hero itself (bodies-industries.js). Their hero picture is laid out
   at the painting's own shape, centred, at the size the cover framing gave it: it arrives framed exactly as before, and
   the camera can reach every part of the painting (--pa is the painting's width over its height) */
:is([data-topic="industries"], [data-topic="healthcare"]) .t-img { --fw: max(108vw, max(100vh, 560px) * 1.14 * var(--pa)); left: calc(50% - var(--fw) / 2); right: auto; width: var(--fw); top: calc(50% - var(--fw) / var(--pa) / 2); bottom: auto; height: calc(var(--fw) / var(--pa)); }
[data-topic="industries"] { --pa: 2.33252; }
[data-topic="healthcare"] { --pa: 1.77683; }

/* Industries: the walk across the settlement, a tracking shot along the hero */
/* without the scene (reduced motion) the industries are an index in type: each name, and what its work is */
.b-ind-pan { position: relative; padding: 22vh var(--gutter) 8vh; }
.b-ind-intro { text-align: center; }
.b-ind-intro .b-p { color: #b4bcc4; }
.b-ind-track { display: grid; gap: 7vh; max-width: 1080px; margin: 12vh auto 0; text-align: center; }
.b-ind-track .b-ind-stop { display: block; color: inherit; }
.b-ind-track .b-ind-window { display: none; }
.b-ind-name { display: block; font: 200 clamp(30px, 3.4vw, 60px)/1.08 var(--sys-display); letter-spacing: -.01em; }
.b-ind-says { display: block; margin-top: 10px; font: italic 400 clamp(19px, 1.5vw, 24px)/1.3 var(--sys-accent); color: #d4d9de; }
.b-ind-track .b-ind-stop:hover .b-ind-name { color: #ffffff; }
.b-ind-caption { display: none; }
.bodies-live .b-ind-pan.is-staged { display: none; }
/* (the stages' words live in the hero, outside the body, so they take the body's reset with them) */
:where(.b-ind-stage, .b-hc-stage) :where(h2, h3, p, ul) { margin: 0; }
/* the stage: the opening and each industry's name at the foot of the screen, over a shade of the page's own */
.b-ind-stage { --stage-shade: linear-gradient(180deg, rgba(7, 9, 13, .5) 0%, rgba(7, 9, 13, 0) 20%, rgba(7, 9, 13, 0) 58%, rgba(7, 9, 13, .78) 100%); --stage-shade-m: linear-gradient(180deg, rgba(7, 9, 13, .62) 0%, rgba(7, 9, 13, 0) 22%, rgba(7, 9, 13, 0) 52%, rgba(7, 9, 13, .9) 100%); }
.b-ind-stage .b-ind-intro, .b-ind-stage .b-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-ind-stage .b-ind-caption { display: block; position: absolute; left: 0; right: 0; bottom: 9vh; height: 22vh; pointer-events: none; }
.b-ind-cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 var(--gutter); text-align: center; }
.b-ind-cap-name { font: 200 clamp(38px, 4.2vw, 76px)/1.04 var(--sys-display); letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(4, 6, 9, .5), 0 0 16px rgba(4, 6, 9, .5); }
.b-ind-cap-says { margin-top: 12px; font: italic 400 clamp(20px, 1.7vw, 28px)/1.25 var(--sys-accent); color: #dfe3e7; text-shadow: 0 1px 2px rgba(4, 6, 9, .8), 0 0 12px rgba(4, 6, 9, .7); }
.b-ind-cap-lede { max-width: 26ch; font: 300 clamp(28px, 2.7vw, 50px)/1.18 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; text-shadow: 0 1px 2px rgba(4, 6, 9, .5), 0 0 16px rgba(4, 6, 9, .5); }
.b-ind-cap-p { margin-top: 14px; font: 400 clamp(16px, 1.25vw, 20px)/1.5 var(--sys-body); color: #d0d6dc; text-shadow: 0 1px 2px rgba(4, 6, 9, .8), 0 0 12px rgba(4, 6, 9, .7); }
/* on the picture: each facility's frame (the link into its industry) and the lamps that come on as the camera arrives */
.b-ind-places { position: absolute; inset: 0; pointer-events: none; }
.b-ind-places .b-ind-stop { position: absolute; display: block; color: inherit; pointer-events: auto; }
.b-ind-places .b-ind-window { position: absolute; inset: 0; opacity: 0; background-repeat: no-repeat; }
.b-ind-places .b-ind-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-ind-corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(239, 238, 233, .9); pointer-events: none; }
.b-ind-corner.is-tl { left: 0; top: 0; border-width: 1px 0 0 1px; transform-origin: 0 0; }
.b-ind-corner.is-tr { right: 0; top: 0; border-width: 1px 1px 0 0; transform-origin: 100% 0; }
.b-ind-corner.is-bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; transform-origin: 0 100%; }
.b-ind-corner.is-br { right: 0; bottom: 0; border-width: 0 1px 1px 0; transform-origin: 100% 100%; }
.b-ind-places .b-ind-stop:focus-visible { outline: 1px solid rgba(156, 195, 224, .9); outline-offset: 6px; }
.b-ind-lamp { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.b-ind-lamp.is-warm { background: radial-gradient(closest-side, rgba(255, 200, 134, .95), rgba(255, 152, 76, .42) 40%, rgba(255, 140, 60, 0)); }
.b-ind-lamp.is-ice { background: radial-gradient(closest-side, rgba(186, 218, 255, .95), rgba(112, 162, 236, .4) 40%, rgba(100, 150, 230, 0)); }
.b-ind-lamp.is-swell.is-warm { background: radial-gradient(closest-side, rgba(255, 176, 104, .5), rgba(255, 140, 60, .16) 50%, rgba(255, 140, 60, 0)); }
.b-ind-lamp.is-swell.is-ice { background: radial-gradient(closest-side, rgba(160, 200, 255, .5), rgba(100, 150, 230, .16) 50%, rgba(100, 150, 230, 0)); }

/* Healthcare: the room on the hero is the stage (bodies-industries.js); the camera goes to each place in it, and a line
   runs from the light at that place to its note on the dark side of the room. Without the scene the notes read in turn */
.b-hc-notes { position: relative; padding: 22vh var(--gutter) 6vh; }
.b-hc-leads { display: none; }
.b-hc-note { max-width: 600px; margin: 0 auto; padding: 5vh 0; text-align: center; }
.b-hc-note h3 { font: 200 clamp(32px, 3vw, 52px)/1.06 var(--sys-display); letter-spacing: -.01em; }
.b-hc-note p { max-width: 40ch; margin: 16px auto 0; font: 400 clamp(16px, 1.25vw, 20px)/1.5 var(--sys-body); color: #c3cad1; }
.b-hc-note .b-hc-from { font-size: 15px; color: #a3adb7; }
.b-hc-open .b-lede { max-width: 24ch; margin-top: 0; font: 300 clamp(26px, 2.3vw, 42px)/1.22 var(--sys-display); letter-spacing: -.012em; color: var(--sys-text); }
.b-hc-open .b-p { max-width: 40ch; margin-top: 22px; font: 400 clamp(16px, 1.2vw, 19px)/1.55 var(--sys-body); color: #c3cad1; }
.bodies-live .b-hc-notes.is-staged { display: none; }
.b-hc-stage { --stage-shade: linear-gradient(90deg, rgba(6, 8, 12, .74) 0%, rgba(6, 8, 12, .26) 33%, rgba(6, 8, 12, 0) 46%, rgba(6, 8, 12, 0) 54%, rgba(6, 8, 12, .26) 67%, rgba(6, 8, 12, .74) 100%); --stage-shade-m: linear-gradient(180deg, rgba(6, 8, 12, .5) 0%, rgba(6, 8, 12, 0) 22%, rgba(6, 8, 12, 0) 42%, rgba(6, 8, 12, .9) 100%); }
.b-hc-stage .b-hc-leads { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-hc-leads path { fill: none; stroke: rgba(176, 210, 234, .9); stroke-width: 1; }
.b-hc-pins { position: absolute; inset: 0; pointer-events: none; }
.b-hc-dot { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 1px solid rgba(156, 195, 224, .95); border-radius: 50%; box-shadow: 0 0 18px 4px rgba(156, 195, 224, .3); pointer-events: none; }
.b-hc-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #e7f1f8; }
.b-hc-stage .b-hc-note { position: absolute; top: 50%; width: min(430px, 32vw); max-width: none; margin: 0; padding: 0; translate: 0 -50%; text-align: left; }
/* a soft dark of its own behind each note, so the words hold on the lit parts of the room */
.b-hc-stage .b-hc-note::before { content: ""; position: absolute; inset: -22% -18%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 8, 12, .74), rgba(6, 8, 12, .3) 70%, rgba(6, 8, 12, 0)); }
/* (over the picture the small line under each note takes the paragraph's tone: in the plain layout's grey it fell
   under 4.5:1 where the light reaches it) */
.b-hc-stage .b-hc-note .b-hc-from { color: #c3cad1; }
.b-hc-stage .b-hc-note.is-left { left: 6vw; }
.b-hc-stage .b-hc-note.is-right { right: 6vw; text-align: right; }
.b-hc-stage .b-hc-note.is-under { top: auto; bottom: 13vh; translate: none; }
.b-hc-stage .b-hc-note p, .b-hc-stage .b-hc-open .b-lede { margin-left: 0; }
.b-hc-stage .b-hc-note.is-right p, .b-hc-stage .b-hc-note.is-right .b-lede { margin-left: auto; margin-right: 0; }
.b-hc-stage .b-hc-open { width: min(520px, 38vw); }

/* Defense & GovCon: the file, set in type and rules. The opening states the boundary, and the regulations it answers
   to hang beneath it in the reading column. Then the register of the work: each row opens on a rule across the file,
   the work's name to the left and, in the reading column, what it does and then, under a short rule like a line for a
   signature, who checks it. A row's rules draw as it is read, and its words come out from under their bars */
[data-topic="defense"] .t-body[data-tone="light"] { --rd: #b4c2ce; }
.b-def-open, .b-def-file, .b-def-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; }
.b-def-open, .b-def-file { --col: max(var(--gutter), (100% - 1280px) / 2); padding-left: var(--col); padding-right: var(--col); text-align: left; }
.b-def-open { padding-top: 24vh; padding-bottom: 15vh; }
.b-def-open .b-lede { grid-column: 1 / span 8; max-width: 17ch; margin: 0; text-align: left; font: 300 clamp(32px, 3.6vw, 64px)/1.1 var(--sys-display); letter-spacing: -.016em; color: #11151b; }
.b-def-open .b-p { grid-column: 7 / span 5; max-width: 44ch; margin: 7vh 0 0; }
.b-def-file { padding-bottom: 12vh; }
.b-def-row { grid-column: 1 / -1; position: relative; align-items: first baseline; padding: 6vh 0 9vh; }
.b-def-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(13, 17, 23, .2); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
.b-def-row h3 { grid-column: 1 / span 5; max-width: 12ch; font: 200 clamp(36px, 4vw, 72px)/1.02 var(--sys-display); letter-spacing: -.014em; color: #11151b; text-wrap: balance; }
.b-def-say { grid-column: 7 / span 5; }
.b-def-desc { max-width: 42ch; font: 400 clamp(17px, 1.25vw, 20px)/1.55 var(--sys-body); color: #3f4954; text-wrap: pretty; }
.b-def-check { max-width: 30ch; margin-top: 5vh; font: 300 clamp(21px, 1.7vw, 30px)/1.28 var(--sys-display); letter-spacing: -.01em; color: #11151b; text-wrap: balance; }
.b-def-check::before { content: ""; display: block; width: 64px; height: 1px; margin-bottom: 2.4vh; background: rgba(13, 17, 23, .55); transform: scaleX(var(--sign, 1)); transform-origin: 0 50%; }

/* Pharma + Life Sciences: a reading page with a margin. The opening sits at the centre; then each finding is read in
   the main column, its name in the italic serif, and its source is noted in the margin beside it, across one hairline
   that runs the length of the reading: the reference stays close to the interpretation. The hairline draws on down as
   each finding is read, and its note arrives after it */
.b-ls-open { max-width: calc(1080px + 2 * var(--gutter)); margin: 0 auto; padding: 24vh var(--gutter) 15vh; text-align: center; }
.b-ls-open .b-lede { max-width: 20ch; font: 300 clamp(32px, 3.4vw, 60px)/1.14 var(--sys-display); letter-spacing: -.014em; color: #11151b; }
.b-ls-open .b-p { max-width: 44ch; margin-top: 5vh; }
.b-ls-read { --gap: 7vw; position: relative; max-width: calc(980px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 16vh; }
.b-ls-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); padding-bottom: 14vh; }
.b-ls-entry:last-child { padding-bottom: 0; }
/* the margin's hairline, one line the length of the reading down the middle of the page, the findings to its left and
   their sources to its right (with the scene it is drawn down by the scroll, keeping pace with the reader) */
.b-ls-margin { position: absolute; top: .6vh; bottom: 14vh; left: 50%; width: 1px; background: rgba(13, 17, 23, .17); transform-origin: 50% 0; pointer-events: none; }
.b-ls-entry h3 { grid-column: 1; font: italic 400 clamp(34px, 3.4vw, 60px)/1.06 var(--sys-accent); letter-spacing: 0; color: #11151b; text-wrap: balance; }
.b-ls-does { grid-column: 1; max-width: 37ch; margin-top: 2.6vh; font: 400 clamp(18px, 1.4vw, 22px)/1.55 var(--sys-body); color: #2b333d; text-wrap: pretty; }
.b-ls-src { grid-column: 2; grid-row: 2; align-self: start; max-width: 30ch; margin-top: calc(2.6vh + .3em); font: 400 clamp(14px, 1.05vw, 16px)/1.65 var(--sys-body); color: #4a5461; text-wrap: pretty; }

/* Energy + Manufacturing + Logistics: the line. A hairline runs across the screen. The work in hand stands above it,
   its name and what it does; the records it gathers come in from wherever they lay and settle on the line, and who
   reviews the work reads under it. The opening reads across the same line: the plants and the office above it, and
   below it why a problem in the office cannot stop the line. Without the scene, each work reads down the page with the
   line over its records */
.b-op-scene { position: relative; padding: 22vh var(--gutter) 4vh; }
.b-op-line { display: none; }
.b-op-step { max-width: 980px; margin: 0 auto 15vh; text-align: center; }
.b-op-open .b-lede { max-width: 27ch; margin: 0 auto; font: 300 clamp(28px, 2.9vw, 52px)/1.2 var(--sys-display); letter-spacing: -.012em; color: var(--sys-text); }
.b-op-open .b-p { max-width: 46ch; margin: 4vh auto 0; }
.b-op-work h3 { max-width: 18ch; margin: 0 auto; font: 200 clamp(34px, 3.5vw, 64px)/1.04 var(--sys-display); letter-spacing: -.012em; color: var(--sys-text); text-wrap: balance; }
.b-op-does { max-width: 44ch; margin: 2.4vh auto 0; font: 400 clamp(16px, 1.2vw, 19px)/1.55 var(--sys-body); color: #c3cad1; text-wrap: pretty; }
.b-op-records { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4vh 4.6vw; margin-top: 5vh; padding-top: 3.2vh; font: 300 clamp(20px, 1.8vw, 32px)/1.15 var(--sys-display); letter-spacing: -.01em; color: #b9d3e6; }
.b-op-records::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(156, 195, 224, 0), rgba(156, 195, 224, .4) 16%, rgba(156, 195, 224, .4) 84%, rgba(156, 195, 224, 0)); transform: scaleX(var(--draw, 1)); }
.b-op-review { max-width: 44ch; margin: 3.4vh auto 0; font: 400 15px/1.55 var(--sys-body); color: #a7b0b9; }
@media (min-width: 761px) {
  .bodies-live .b-op-scene { --line: 61vh; --rec: calc(clamp(20px, 1.8vw, 32px) * 1.15); height: 100vh; padding: 0; overflow: hidden; }
  .bodies-live .b-op-line { display: block; position: absolute; left: 0; right: 0; top: var(--line); height: 1px; background: linear-gradient(90deg, rgba(156, 195, 224, 0), rgba(156, 195, 224, .42) 14%, rgba(156, 195, 224, .42) 86%, rgba(156, 195, 224, 0)); }
  .bodies-live .b-op-step { position: absolute; inset: 0; max-width: none; margin: 0; }
  .bodies-live :is(.b-op-head, .b-op-records, .b-op-foot) { position: absolute; left: 50%; width: min(980px, 76vw); translate: -50% 0; }
  /* the records stand on the line, the work above them, and who reviews it below */
  .bodies-live .b-op-records { bottom: calc(100% - var(--line) + 1.5vh); flex-wrap: nowrap; margin: 0; padding: 0; }
  .bodies-live .b-op-records::before { display: none; }
  .bodies-live .b-op-records li { white-space: nowrap; will-change: transform; }
  .bodies-live .b-op-head { bottom: calc(100% - var(--line) + 1.5vh + var(--rec) + 5.5vh); }
  .bodies-live .b-op-open .b-op-head { bottom: calc(100% - var(--line) + 6vh); }
  .bodies-live .b-op-foot { top: calc(var(--line) + 3.6vh); }
  .bodies-live .b-op-foot :is(.b-p, .b-op-review) { margin-top: 0; }
}

/* Aviation: the work stands along a taxiway that the scroll carries past; the opening stands first on the line */
.b-av-line { position: relative; padding: 22vh var(--gutter) 10vh; }
.b-av-track { display: grid; gap: 9vh; max-width: 680px; margin: 0 auto; }
.b-av-stand { text-align: center; }
.b-av-lead .b-p { margin-top: 26px; }
.b-av-stand h3 { font: 200 clamp(34px, 3.3vw, 58px)/1.06 var(--sys-display); letter-spacing: -.01em; }
.b-av-stand p { max-width: 38ch; margin: 16px auto 0; font: 400 clamp(16px, 1.25vw, 20px)/1.5 var(--sys-body); color: #c3cad1; }
.b-av-stand .b-av-rev { font: italic 400 clamp(18px, 1.4vw, 23px)/1.4 var(--sys-accent); color: #e8ebee; }
.b-av-stand.b-av-lead .b-lede { max-width: 24ch; margin: 0 auto; font: 300 clamp(26px, 2.6vw, 48px)/1.22 var(--sys-display); letter-spacing: -.012em; color: var(--sys-text); }
.b-av-lights { display: none; }
@media (min-width: 761px) {
  .bodies-live .b-av-line { height: 100vh; padding: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
  .bodies-live .b-av-track { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 0; max-width: none; margin: 0; padding: 0 14vw 0 calc(var(--gutter) + 4vw); will-change: transform; }
  .bodies-live .b-av-stand { flex: 0 0 auto; width: min(460px, 32vw); margin-right: 9vw; text-align: left; }
  .bodies-live .b-av-stand:nth-child(odd) { translate: 0 9vh; }
  .bodies-live .b-av-stand:nth-child(even) { translate: 0 -7vh; }
  .bodies-live .b-av-lead { width: min(600px, 40vw); translate: 0 -4vh; }
  .bodies-live .b-av-stand.b-av-lead .b-lede { max-width: 21ch; margin: 0; text-align: left; }
  .bodies-live .b-av-stand p { margin-left: 0; }
  /* the runway lights: a row of points along the foot of the scene that runs past faster than the stands */
  .bodies-live .b-av-lights { display: block; position: absolute; left: 0; bottom: 13vh; width: 400vw; height: 6px; pointer-events: none; will-change: transform;
    background: radial-gradient(circle at 3px 3px, rgba(156, 195, 224, .85) 0 1.6px, rgba(156, 195, 224, .18) 2.4px, transparent 3.2px) 0 0 / 74px 6px repeat-x; }
  .bodies-live .b-av-lights::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: linear-gradient(90deg, rgba(156, 195, 224, .1), rgba(156, 195, 224, .22), rgba(156, 195, 224, .1)); }
}

/* M&A + Finance: the citation opens. Each work is one sentence with the phrase a reviewer would check marked in it.
   When the work is in hand the mark is drawn under the phrase and runs down into a thread, and from the thread hangs
   the citation: the reviewer's question and where its answer is found, or, for the opening, the rules the evidence
   answers to. It folds away before the next work */
.b-fin-scene { position: relative; max-width: 1120px; margin: 0 auto; padding: 24vh var(--gutter) 6vh; }
.b-fin-file .b-fin-work { margin-top: 16vh; }
.b-fin-work { position: relative; }
.b-fin-say { max-width: 30em; margin: 0 auto; text-align: center; font: 200 clamp(26px, 2.75vw, 50px)/1.24 var(--sys-display); letter-spacing: -.012em; color: var(--sys-graphite); text-wrap: balance; }
.b-fin-say > h3, .b-fin-say > p { display: inline; font: inherit; letter-spacing: inherit; }
.b-fin-say > h3 { font-family: var(--sys-accent); font-style: italic; font-weight: 400; letter-spacing: 0; }
.b-fin-say mark { color: inherit; background: linear-gradient(rgba(181, 47, 67, .85), rgba(181, 47, 67, .85)) 0 96% / 100% 1px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* with the scene the mark is drawn with the thread, so the phrase carries no line of its own */
.bodies-live .b-fin-say mark { background: none; }
.b-fin-cite { max-width: 34ch; margin: 6vh auto 0; text-align: center; }
.b-fin-cite .b-p { max-width: 44ch; margin: 0 auto; }
.b-fin-open .b-fin-cite { max-width: 44ch; }
.b-fin-ask { font: italic 400 clamp(26px, 2.3vw, 42px)/1.14 var(--sys-accent); color: #11151b; text-wrap: balance; }
.b-fin-answer { max-width: 34ch; margin: 1.8vh auto 0; font: 400 clamp(16px, 1.2vw, 19px)/1.55 var(--sys-body); color: #3f4954; text-wrap: pretty; }
.b-fin-thread { display: none; }
.bodies-live .b-fin-thread { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-fin-thread path { fill: none; stroke: rgba(181, 47, 67, .85); stroke-width: 1; }
@media (min-width: 761px) {
  .bodies-live .b-fin-scene { height: 100vh; max-width: none; padding: 0; overflow: hidden; }
  .bodies-live .b-fin-work { position: absolute; inset: 0; margin: 0; }
  .bodies-live .b-fin-say { position: absolute; left: 50%; top: 19vh; width: min(1060px, 78vw); max-width: none; translate: -50% 0; }
  /* the citation hangs from the thread: its left edge where the thread comes down (bodies-industries.js sets --x) */
  .bodies-live .b-fin-cite { position: absolute; left: var(--x, 50%); top: 52vh; width: min(440px, 33vw); max-width: none; margin: 0; text-align: left; }
  .bodies-live .b-fin-open .b-fin-cite { width: min(520px, 38vw); }
  .bodies-live .b-fin-cite .b-p { margin: 0; }
  .bodies-live .b-fin-answer { margin-left: 0; }
}

@media (max-width: 760px) {
  /* the endings on a phone: the close's line a size that leaves room for the way on and the footer on a small screen */
  .t-end > .b-close .b-h { font-size: clamp(33px, 9.2vw, 44px); }
  .t-end > .b-close .b-p { margin-top: 2.6vh; font-size: 16px; }
  [data-topic="defense"] .t-end > .b-close::before { margin-bottom: 4.5vh; }
  .b-ind-pan { padding-top: 18vh; }
  .b-ind-track { gap: 6vh; }
  .b-ind-stage .b-ind-caption { bottom: 7vh; }
  .b-ind-cap-lede { font-size: clamp(24px, 6.6vw, 30px); }
  .b-ind-cap-p { font-size: 15px; }
  .b-hc-notes { padding-top: 18vh; }
  .b-hc-stage .b-hc-note, .b-hc-stage .b-hc-note.is-right, .b-hc-stage .b-hc-open { left: var(--gutter); right: var(--gutter); width: auto; translate: none; text-align: left; }
  .b-hc-stage .b-hc-note.is-right p, .b-hc-stage .b-hc-note.is-right .b-lede { margin-left: 0; }
  .b-hc-stage .b-hc-note, .b-hc-stage .b-hc-note.is-under { top: auto; bottom: 7vh; }
  .b-hc-open .b-lede { font-size: 24px; }
  /* Defense on a phone: the file in one column, each row on its rule */
  .b-def-open, .b-def-file, .b-def-row { display: block; }
  .b-def-open { padding-top: 18vh; padding-bottom: 9vh; }
  .b-def-open .b-lede { font-size: clamp(30px, 8.4vw, 36px); line-height: 1.14; }
  .b-def-open .b-p { margin-top: 4vh; font-size: 16px; }
  .b-def-file { padding-bottom: 8vh; }
  .b-def-row { padding: 4.4vh 0 6.5vh; }
  .b-def-row h3 { max-width: none; font-size: clamp(30px, 8.6vw, 38px); }
  .b-def-say { margin-top: 2.4vh; }
  .b-def-desc { font-size: 16px; }
  .b-def-check { margin-top: 3.6vh; font-size: 21px; }
  .b-def-check::before { width: 48px; margin-bottom: 1.8vh; }
  /* Pharma + Life Sciences on a phone: each finding with its source under it, the margin's hairline beside the note */
  .b-ls-open { padding: 18vh var(--gutter) 9vh; }
  .b-ls-open .b-lede { font-size: clamp(28px, 7.8vw, 34px); }
  .b-ls-open .b-p { margin-top: 3.4vh; font-size: 16px; }
  .b-ls-read { padding-bottom: 9vh; }
  .b-ls-entry { display: block; padding-bottom: 8vh; }
  .b-ls-margin { display: none; }
  .b-ls-entry h3 { font-size: clamp(30px, 8.4vw, 36px); }
  .b-ls-does { max-width: none; margin-top: 1.8vh; font-size: 17px; }
  .b-ls-src { position: relative; max-width: none; margin-top: 2.8vh; padding: 2px 0 2px 16px; font-size: 14px; }
  .b-ls-src::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(13, 17, 23, .22); transform: scaleY(var(--draw, 1)); transform-origin: 50% 0; }
  /* Energy + Manufacturing + Logistics on a phone: each work reads down the page, its records on the line */
  .b-op-scene { padding-top: 18vh; }
  .b-op-step { margin-bottom: 11vh; }
  .b-op-open .b-lede { font-size: clamp(26px, 7.2vw, 30px); }
  .b-op-open .b-p { font-size: 16px; }
  .b-op-work h3 { font-size: clamp(30px, 8.4vw, 36px); }
  .b-op-does { font-size: 16px; }
  .b-op-records { gap: 1.2vh 7vw; margin-top: 3.6vh; padding-top: 2.6vh; font-size: 21px; }
  .b-op-review { margin-top: 2.6vh; }
  /* Aviation on a phone */
  .b-av-line { padding-top: 18vh; }
  /* M&A + Finance on a phone: the works read down the page, each citation hanging from its sentence on its thread */
  .b-fin-scene { padding-top: 18vh; }
  .b-fin-file .b-fin-work { margin-top: 12vh; }
  .b-fin-say { font-size: 25px; }
  .b-fin-cite { margin-top: 7vh; }
  .b-fin-ask { font-size: 26px; }
  :is([data-topic="life-sciences"], [data-topic="defense"]) .t-next-text { font-size: 26px; }
  /* on a phone three heroes' lines fall across a helmet or a nacelle in their paintings: a shade of their own */
  :is([data-topic="life-sciences"], [data-topic="aviation"], [data-topic="finance"]) .t-hero-text .t-line { position: relative; }
  :is([data-topic="life-sciences"], [data-topic="aviation"], [data-topic="finance"]) .t-hero-text .t-line::before { content: ""; position: absolute; inset: -55% -12% -55% -12%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 8, 11, .86), rgba(6, 8, 11, .55) 60%, rgba(6, 8, 11, 0)); }
}