/* Intelligence: the contents page and the three engineering notes (assets/bodies-intelligence.js). Each note is set in
   type alone, each in a composition of its own: Deployment is an essay with its index of environments, Workflows writes
   its brief as the essay is read, After launch walks the work after launch along one line. Every block reads in a plain
   layout of its own; the scenes take over only under html.bodies-live. */

[data-topic="intelligence"] { --b-bg: #07090d; }

/* the contents: a deck of the notes, each its painting with its name on it (the picture grows into the note's hero) */
.b-int-deck { position: relative; display: grid; gap: 4vh; padding: 10vh var(--gutter); }
.b-int-card { position: relative; display: block; height: 72vh; min-height: 420px; overflow: hidden; border-radius: 3px; background: #0b0d10; color: var(--sys-text); }
.b-int-pic { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: 50% 50%; }
.b-int-pic::before { content: ""; position: absolute; inset: 0; background: inherit; transition: transform .9s var(--sys-ease); }
.b-int-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 9, 13, .1) 30%, rgba(7, 9, 13, .86) 100%); }
.b-int-shade { position: absolute; inset: 0; background: #07090d; opacity: 0; pointer-events: none; }
.b-int-words { position: absolute; left: 6%; right: 6%; bottom: 7vh; display: block; }
.b-int-t { display: block; max-width: 18ch; font: 200 clamp(40px, 4.8vw, 92px)/1 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-int-d { display: block; max-width: 42ch; margin-top: 18px; font: 400 clamp(16px, 1.3vw, 20px)/1.5 var(--sys-body); color: #c9cfd5; }
@media (hover: hover) and (pointer: fine) { .b-int-card:hover .b-int-pic::before { transform: scale(1.03); } }
/* plainly (reduced motion) the deck starts below the hand-off's soft edge, so no card's edge ever crosses the dissolving
   picture; as a scene the first card waits for the dissolve instead (bodies-intelligence.js) */
html:not(.bodies-live) .b-int-deck { padding-top: 46vh; }
.bodies-live .b-int-deck { display: block; height: 100vh; padding: 0; overflow: hidden; }
.bodies-live .b-int-card { position: absolute; left: var(--gutter); right: var(--gutter); top: 13vh; bottom: 6vh; height: auto; min-height: 0; transform-origin: 50% 0%; will-change: transform; }

/* the notes' section heads */
.b-eh { font: 200 clamp(32px, 3vw, 52px)/1.06 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }

/* the closes. Each stands outside .b, in the ending screen, where the heading's default margins would come back and push
   the ending past one screen; so each sets its own spacing, and on a phone its type steps down a size */
.t-end > .b-close .b-h { margin: 0; }
.t-end > .b-close .b-h + .b-p { margin-top: 3.4vh; }
.t-end > .b-close .b-close-p { margin-top: 0; }
.t-end > .b-close .b-close-p + .b-h { margin-top: 3.2vh; }
@media (max-width: 760px) {
  .t-end > .b-close .b-h { font-size: clamp(32px, 9.4vw, 40px); }
  .t-end > .b-close .b-p { font-size: 16px; }
  .t-end > .b-close .b-h + .b-p { margin-top: 2.2vh; }
  .t-end > .b-close .b-close-p + .b-h { margin-top: 2.4vh; }
}

/* ---- Deployment: an essay with its index. The opening steps down from the decision to what it decides; each part of
   the essay hangs its head in the margin under a line drawn across the page; the four environments are the index, each
   name standing on its own line, with what it asks of you at the line's far end. The close steps down the same way ---- */
.b-nd > section { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.b-nd-open { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); padding-top: 26vh; padding-bottom: 15vh; }
.b-nd-open .b-lede { grid-column: 1 / span 9; max-width: 15ch; margin: 0; font-size: clamp(40px, 4.9vw, 92px); line-height: 1.04; letter-spacing: -.022em; text-align: left; }
.b-nd-open .b-p { grid-column: 7 / span 6; max-width: 34ch; margin: 7vh 0 0; text-align: left; }
.b-nd-part { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); align-items: start; padding-top: 5.5vh; padding-bottom: 13vh; }
.b-nd-part::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: rgba(13, 17, 23, .22); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
.b-nd-part .b-eh { max-width: 12ch; }
.b-nd-part .b-p { max-width: 42ch; margin: .5em 0 0; text-align: left; }
/* the index: the name's size sets the row's, so the line keeps clear of its descenders at every width */
.b-nd-index { padding-top: 0; padding-bottom: 15vh; }
.b-nd-row { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: 5vw; row-gap: 14px; padding: .5em 0 .26em; font-size: clamp(52px, 6.6vw, 124px); }
.b-nd-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(13, 17, 23, .26); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
.b-nd-row h3 { font: 200 1em/.92 var(--sys-display); letter-spacing: -.035em; }
.b-nd-row p { max-width: 31ch; padding-bottom: .1em; font: 400 clamp(16px, 1.2vw, 19px)/1.5 var(--sys-body); color: #3f4954; text-align: right; }
/* the close: the line it ends on, then what to bring and where to go, stepped down to the right like the opening */
.t-end > .b-nd-close { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-content: center; width: 100%; max-width: 1320px; margin: 0 auto; text-align: left; }
.b-nd-close .b-h { grid-column: 1 / -1; max-width: 20ch; margin: 0; font-size: clamp(42px, 4.6vw, 86px); line-height: 1.02; letter-spacing: -.02em; }
.b-nd-close .b-p { grid-column: 2; max-width: 36ch; margin: 4.4vh 0 0; text-align: left; }
.t-end > .b-nd-close .b-actions { grid-column: 2; justify-content: flex-start; margin-top: 4vh; }
@media (max-width: 760px) {
  .b-nd-open { display: block; padding-top: 22vh; padding-bottom: 9vh; }
  .b-nd-open .b-lede { max-width: 14ch; font-size: clamp(34px, 9.4vw, 42px); }
  .b-nd-open .b-p { max-width: 30ch; margin: 4.5vh 0 0 14%; }
  .b-nd-part { display: block; padding-top: 3.6vh; padding-bottom: 8vh; }
  .b-nd-part .b-eh { max-width: none; font-size: clamp(30px, 8.4vw, 36px); }
  .b-nd-part .b-p { margin-top: 2.2vh; }
  .b-nd-index { padding-bottom: 9vh; }
  .b-nd-row { display: block; font-size: clamp(42px, 12.6vw, 56px); padding: .55em 0 .3em; }
  .b-nd-row p { max-width: none; margin-top: 12px; padding: 0; font-size: 16px; text-align: left; }
  .t-end > .b-nd-close { display: flex; }
  .b-nd-close .b-h { font-size: clamp(32px, 9vw, 40px); }
  .b-nd-close .b-p { margin-top: 2.2vh; font-size: 16px; }
  .t-end > .b-nd-close .b-actions { margin-top: 3vh; }
}

/* ---- Workflows: the brief writes itself as the essay is read. The brief is a form of five lines; each part of the
   essay stands in the margin beside the line it fills, and the line stays filled, so the last part finds the whole
   brief on one page ---- */
.b-nw-scene { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 112px); align-items: start; max-width: 1320px; margin: 0 auto; padding: 22vh var(--gutter) 14vh; }
.b-nw-says { position: relative; }
.b-nw-say { margin-bottom: 11vh; text-align: right; }
.b-nw-lede { font: 300 clamp(26px, 2.4vw, 42px)/1.18 var(--sys-display); letter-spacing: -.014em; text-wrap: balance; }
.b-nw-say .b-eh { font: italic 400 clamp(34px, 3.2vw, 58px)/1.04 var(--sys-accent); letter-spacing: -.005em; }
.b-nw-say .b-eh .accent { font-size: 1em; }
.b-nw-say .b-p { max-width: 36ch; margin: 20px 0 0 auto; font-size: clamp(16px, 1.2vw, 20px); }
.b-nw-sheet { position: sticky; top: 26vh; }
.b-nw-sheet > div { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 2.4vw, 40px); align-items: baseline; padding: 2.1vh 0 2.3vh; }
.b-nw-sheet > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(13, 17, 23, .22); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
.b-nw-sheet dt { font: 300 clamp(22px, 2vw, 36px)/1.1 var(--sys-display); letter-spacing: -.014em; color: #11151b; }
.b-nw-sheet dd { max-width: 38ch; font: 400 clamp(16px, 1.2vw, 19px)/1.45 var(--sys-body); color: #3f4954; }
/* the scene: one screen. The margin holds one part at a time, set level with its line (bodies-intelligence.js). It is
   the layout the script chose as the page loaded on a wide screen (.is-wide), so a phone turned on its side keeps the
   plain layout its script is running */
.bodies-live .b-nw.is-wide .b-nw-scene { display: grid; height: 100vh; align-items: center; padding: 64px var(--gutter) 0; }
.bodies-live .b-nw.is-wide .b-nw-says { align-self: stretch; }
.bodies-live .b-nw.is-wide .b-nw-say { position: absolute; left: 0; right: 0; top: var(--y, 50%); margin: 0; translate: 0 var(--t, -50%); }
.bodies-live .b-nw.is-wide .b-nw-sheet { position: relative; top: 0; }
@media (max-width: 760px) {
  .b-nw-scene { display: block; padding: 18vh var(--gutter) 9vh; }
  .b-nw-say { margin-bottom: 7vh; text-align: left; }
  .b-nw-say .b-eh { font-size: clamp(30px, 8.6vw, 38px); }
  .b-nw-say .b-p { margin: 16px 0 0; }
  .b-nw-sheet { position: static; margin-top: 2vh; }
  .b-nw-sheet > div { grid-template-columns: 1fr; row-gap: 6px; padding: 14px 0 15px; }
  .b-nw-sheet dt { font-size: 22px; }
}

/* ---- After launch: one line from launch day across the screen. Each chapter's head rises above the line at its mark
   and its words hang below it, so the reading moves along the line as the work after launch does. In the plain layout
   the line runs down the page instead, with the chapters beside it ---- */
.b-na-round { position: relative; max-width: 840px; margin: 0 auto; padding: 24vh var(--gutter) 12vh; }
.b-na-rail { position: relative; display: flex; align-items: center; }
.b-na-start { flex: none; font: italic 400 clamp(20px, 1.6vw, 26px)/1 var(--sys-accent); color: #59626c; }
.b-na-line { position: relative; flex: 1; height: 1px; }
.b-na-line::before { content: ""; position: absolute; inset: 0; background: rgba(13, 17, 23, .2); transform: scaleX(var(--base, 1)); transform-origin: 0 50%; }
.b-na-line i { position: absolute; inset: 0; background: #9a2b3c; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.b-na-mark { position: absolute; top: -4px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--sys-ice); box-shadow: inset 0 0 0 1px rgba(13, 17, 23, .34); }
.b-na-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #9a2b3c; opacity: 0; transition: opacity .35s var(--sys-ease); }
.b-na-mark.is-on::after { opacity: 1; }
.b-na-lede { font: 300 clamp(30px, 2.9vw, 54px)/1.14 var(--sys-display); letter-spacing: -.016em; text-wrap: balance; }
.b-na-ch .b-eh { font-size: clamp(34px, 3.3vw, 62px); }
.b-na-ch .b-p { max-width: 40ch; margin: 16px 0 0; font-size: clamp(17px, 1.3vw, 21px); text-align: left; }
html:not(.bodies-live) .b-na-rail { margin-bottom: 4vh; }
html:not(.bodies-live) .b-na-line { display: none; }
html:not(.bodies-live) .b-na-chs { position: relative; padding-left: 36px; }
html:not(.bodies-live) .b-na-chs::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgba(13, 17, 23, .2); }
html:not(.bodies-live) .b-na-ch { position: relative; padding-bottom: 9vh; }
html:not(.bodies-live) .b-na-ch::before { content: ""; position: absolute; left: -36px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: #9a2b3c; }
/* the scene: one screen, the line across it a little below the middle */
.bodies-live .b-na-round { height: 100vh; max-width: none; margin: 0; padding: 0; }
.bodies-live .b-na-rail { position: absolute; left: var(--gutter); right: var(--gutter); top: 54vh; column-gap: 22px; }
.bodies-live .b-na-chs { position: absolute; left: calc(var(--gutter) + var(--lead, 0px)); right: var(--gutter); top: 54vh; height: 0; }
.bodies-live .b-na-ch { position: absolute; top: 0; left: var(--at, 0px); width: min(38%, 620px); }
.bodies-live .b-na-ch > :first-child { position: absolute; left: 0; right: 0; bottom: 3.6vh; margin: 0; }
.bodies-live .b-na-ch > .b-p { position: absolute; left: 0; top: 3.6vh; margin: 0; }
@media (max-width: 760px) {
  .b-na-round { padding-top: 18vh; }
  .b-na-start { font-size: 18px; }
  .b-na-lede { font-size: clamp(26px, 7.4vw, 32px); }
  .b-na-ch .b-eh { font-size: clamp(28px, 7.8vw, 34px); }
  .bodies-live .b-na-rail { top: 50vh; column-gap: 14px; }
  .bodies-live .b-na-chs { left: var(--gutter); top: 50vh; }
  .bodies-live .b-na-ch { left: 0; width: 100%; }
  .bodies-live .b-na-ch > :first-child { bottom: 3vh; }
  .bodies-live .b-na-ch > .b-p { top: 3vh; }
}

/* ---- the heroes: each note sets its words its own way, at its own size ---- */
[data-topic="intelligence"] .t-title { font-size: clamp(60px, 8vw, 152px); }
[data-topic="note-deployment"] .t-title { font-size: clamp(48px, 6.6vw, 126px); }
/* Workflow ownership: a narrow column set between the two people, in the window over their heads, the key hanging
   below it */
.t-hero-text.at-crown { top: 10vh; bottom: auto; left: 41.5vw; right: auto; width: 26vw; padding: 0; text-align: center; }
.t-hero-text.at-crown > * { position: relative; margin-left: auto; margin-right: auto; }
.t-hero-text.at-crown :is(.t-title, .t-statement, .t-line)::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .6), rgba(6, 8, 11, 0)); }
[data-topic="note-workflows"] .t-title { font-size: clamp(40px, 3.7vw, 70px); line-height: .98; }
[data-topic="note-workflows"] .t-statement { margin-top: .36em; font-size: clamp(22px, 1.9vw, 36px); }
[data-topic="note-workflows"] .t-line { margin-top: 12px; max-width: 26ch; font-size: 15px; }
.t-hero:has(.at-crown) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .66) 0%, rgba(8, 10, 10, .34) 24%, rgba(8, 10, 10, 0) 42%, rgba(8, 10, 10, 0) 80%, rgba(8, 10, 10, .45) 100%); }
/* After launch: the name stacked large in the dark beside the racks, the promise under it, set right */
.t-hero-text.at-stack .t-title { font-size: clamp(64px, 10.4vw, 196px); line-height: .88; letter-spacing: -.024em; }
.t-hero-text.at-stack .t-statement { margin-top: .6em; }
@media (max-width: 760px) {
  [data-topic="note-workflows"] .t-hero-text.at-crown { top: auto; bottom: 9vh; left: var(--gutter); right: var(--gutter); width: auto; padding: 0; text-align: right; }
  [data-topic="note-workflows"] .t-hero-text.at-crown > * { margin-left: auto; margin-right: 0; }
  [data-topic="note-workflows"] .t-title { font-size: clamp(40px, 11vw, 58px); }
  [data-topic="note-workflows"] .t-statement { font-size: clamp(26px, 7.4vw, 36px); }
  [data-topic="note-workflows"] .t-hero-text .t-line { max-width: 30ch; }
  .t-hero-text.at-stack .t-title { font-size: clamp(56px, 16vw, 76px); }
  /* a phone's slice of the corridor puts its nearest ceiling light in the top right corner, under the header's menu,
     where it kept passing behind the menu while the card's picture grew into the hero: that corner of the ceiling lies
     in its own shadow (the ground under the header is measured with it, tools/hero-grounds.mjs) */
  [data-topic="note-after-launch"] .t-media::after { background: radial-gradient(ellipse 50% 18% at 100% 0%, rgba(8, 10, 10, .92) 0%, rgba(8, 10, 10, .88) 38%, rgba(8, 10, 10, .6) 60%, rgba(8, 10, 10, .26) 80%, rgba(8, 10, 10, 0) 100%), linear-gradient(180deg, rgba(8, 10, 10, .42) 0%, rgba(8, 10, 10, 0) 24%, rgba(8, 10, 10, 0) 42%, rgba(8, 10, 10, .86) 100%), linear-gradient(90deg, rgba(8, 10, 10, .5) 0%, rgba(8, 10, 10, 0) 58%); }
}

/* on the notes' light ground the header's own band runs solid a little further down, so a line that comes to rest
   under the search field is covered there instead of showing through it */
:is([data-topic="note-deployment"], [data-topic="note-workflows"], [data-topic="note-after-launch"]) .bar::before { background: linear-gradient(180deg, var(--sys-ice) 0%, var(--sys-ice) 70%, rgba(237, 241, 244, 0) 100%); }
/* After launch closes on one line set wholly in the italic serif */
[data-topic="note-after-launch"] .t-end .b-h .accent { font-size: 1em; }