/* ======================================================================
   The Agentic Awakening — web edition.

   doc.css is the print stylesheet, loaded before this file and left
   untouched so every figure keeps rendering exactly as it does in the PDF.
   This file does two jobs, in this order:

   1. Neutralise A4 geometry. Every rule here is prefixed html.web so it
      outranks the print rule it replaces without editing the print rule.
   2. Add the chrome a document doesn't need on paper: a part bar, a
      contents tree, a pager, a hero.

   The palette and both typefaces come from doc.css — nothing new is
   introduced. Bessemer's ramps are the design system; this is layout.
   ====================================================================== */

html.web {
  --sheet-max: 210mm;          /* the print measure, already tuned to ~68ch */
  --tree-w: clamp(258px, 21vw, 312px);
  --bar-h: 56px;
  /* The book was being read at 125% browser zoom, which is the honest signal
     that print sizes are too small on a screen. Every size in doc.css is in pt
     — 138 of them — so there is no root size to scale and no list worth
     overriding. zoom on the content region reproduces exactly what the reader
     was already doing: it scales type and layout together rather than stretching
     the line.

     1.15 and not the full 1.25, because the column cannot grow with it — the
     gutter and the page margins are fixed, so every notch of zoom is paid for
     in characters per line. Measured: 1.0 gives 69 characters, 1.15 gives 60,
     1.25 gives 55 and starts overlapping the tree at 980px. 60 is inside the
     60-66 band that sets well; 55 is not. */
  --doc-zoom: 1;
  --edge: clamp(20px, 5vw, 27mm);
  /* Anchors land clear of the sticky bar rather than under it. */
  /* Clear the bar plus a blank line. At 16px the heading landed hard against
     the bar and read as clipped; a full line above it reads as the top of a
     page. site.js reads this value, so the animated scroll matches the jump. */
  scroll-padding-top: calc(var(--bar-h) + 52px);
  /* Deliberately not smooth. The tree and the takeaway links jump arbitrary
     distances through a 46-screen book — a takeaway to its chapter is 6,300px,
     which Chrome animates over roughly two seconds. Smooth scrolling suits
     short hops; here it just makes every jump slow and disorienting. */
}

/* Navigating between the six pages was a white flash: the browser tears down one
   document and paints the next. A cross-document view transition crossfades them
   instead, which is the whole reason the site can be six URLs and still read as
   one book.
 *
 * Chrome 126+ and Safari 18+. Everywhere else navigates exactly as before, so
   this needs no fallback and no JS. */
@view-transition {
  navigation: auto;
}

/* The bar and the tree are the same furniture on every page. Naming them takes
   them out of the root snapshot, so they hold still while the content changes
   under them — without this the entire viewport fades, chrome included, and it
   reads as a reload rather than a page turn. */
.bar { view-transition-name: masthead; }
.tree { view-transition-name: contents; }

/* Short. This is a book, not a slideshow. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* One ground for the whole document. The print build floats grey-bordered
   A4 sheets because a sheet is a real object; on screen the only ground
   changes that mean anything are the dark part openers. */
html.web body {
  background: var(--paper);
  font-size: 11pt;             /* 10pt is a print size; screens need one notch */
}

/* ---------- 1. undo the page ------------------------------------------ */

html.web .page {
  width: auto;
  min-height: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  break-after: auto;
  page-break-after: auto;
  overflow: hidden;            /* contains the absolutely-positioned orbs */
}

html.web .page-pad,
html.web .page.dark .page-pad,
html.web .security-commandments-page .page-pad {
  min-height: 0;
  height: auto;
  padding: clamp(28px, 5vw, 56px) var(--edge);
  max-width: var(--sheet-max);
  margin: 0 auto;
}

/* What was a page break becomes a hairline. */
html.web .page:not(.dark) + .page:not(.dark) .page-pad {
  border-top: 1px solid var(--rule);
}

/* Dark part openers go full-bleed. On paper they're a turn of the page; on
   screen the colour change has to do that work by itself. */
html.web .page.dark {
  background: var(--dark);
  position: relative;
}
html.web .page.dark .page-pad {
  min-height: min(62vh, 520px);
  justify-content: center;
  padding-block: clamp(48px, 9vw, 110px);
}
html.web .part-opener { flex: 0 1 auto; }

/* Print furniture. */
html.web .running-head,
html.web .page-footer,
html.web .toc-page,
html.web .closing-page { display: none; }


html.web .scroll-x {
  overflow-x: auto;
  margin-inline: calc(var(--edge) * -0.5);
  padding-inline: calc(var(--edge) * 0.5);
}
html.web .scroll-x > table { min-width: 32rem; }
/* Both of these fit a phone once they are allowed to; the 32rem floor above is
   for wide data tables and clipped these mid-word instead. */
html.web .scroll-x > .heatmap-table,
html.web .scroll-x > .diagnostic-table { min-width: 0; }
html.web svg { max-width: 100%; }

/* ---------- 2. chrome ------------------------------------------------- */

html.web .skip {
  position: absolute;
  left: -9999px;
}
html.web .skip:focus {
  left: 12px;
  top: 12px;
  z-index: 60;
  background: var(--paper);
  padding: 10px 16px;
  border-radius: 4px;
}

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
  padding-inline: clamp(14px, 3vw, 28px);
  background: var(--dark);
  color: var(--on-dark);
}
/* The masthead is Bessemer's lockup and nothing else, at every width.
 *
 * It used to be the book's title, which is why it was hidden above 980px: the
 * tree's first row is that same title linking to the same cover. The lockup
 * repeats nothing, so it can stay — and dropping the title with it is what
 * keeps the phone bar from overflowing once Contents and two controls are
 * also in there. The book is still named by the tree and by the cover. */
.bar-mark {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.bar-logo {
  height: 26px;
  width: auto;
  display: block;
}
.bar-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.bar-nav::-webkit-scrollbar { display: none; }
.bar-link {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--on-dark-mute);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
}
.bar-link:hover { color: var(--on-dark); }
.bar-link.is-active {
  color: var(--on-dark);
  border-bottom-color: var(--red);
}
.bar-num {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--eyebrow-dk);
}
/* Both bar controls are icons. Line art at the same weight as the book's own
   figures, and both carry an aria-label and a title, since an icon alone does
   not say "PDF". */
.bar-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--on-dark-mute);
  cursor: pointer;
}
.bar-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bar-icon:hover,
.bar-icon:focus-visible {
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Tooltips on the two icon controls.
 *
 * These carried title="" instead, which works but is the operating system's:
 * about a second of delay, its own styling, and nothing on keyboard focus. An
 * icon that does not say "PDF" anywhere needs a label that appears when you
 * look for it. aria-label stays and is what screen readers use; this is purely
 * visual, hence aria-hidden on the bubble. */
.bar-icon { position: relative; }
.bar-icon::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  padding: 5px 9px;
  border-radius: 4px;
  background: #10254F;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 0.25s;
}
.bar-icon:hover::after,
.bar-icon:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bar-icon::after { transition: none; }
}

/* A tooltip anchored to the bar is unreachable on a touch screen — it needs a
   hover that never happens, and it would sit under a finger anyway. */
@media (hover: none) {
  .bar-icon::after { display: none; }
}

/* The way out of full screen stays a worded button. The bar is hidden by then,
   so this and Escape are the only exits — not the place to make the reader
   interpret a glyph. */
.full-exit {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  position: fixed;
  z-index: 60;
  top: 14px;
  right: 16px;
  color: var(--soft);
  background: var(--paper);
  border-color: var(--rule);
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
/* The phone's way into the contents. Worded, not a hamburger: there is room
   for six letters, and "Contents" says what it opens. */
.bar-contents {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  padding: 7px 12px;
  cursor: pointer;
}
.bar-contents[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--on-dark);
}

.full-exit:hover { opacity: 1; color: var(--ink); }
.full-exit[hidden] { display: none; }

html.web.is-full .bar,
html.web.is-full .tree { display: none; }
html.web.is-full .frame,
html.web.is-full .site-foot { padding-left: 0; }
html.web.is-full { scroll-padding-top: 52px; }

.frame { display: block; }

/* Only the prose zooms.
 *
 * Deliberately .doc and not .frame: the tree is a child of .frame, and zoom
 * scales a fixed-position descendant's coordinates too — top: var(--bar-h)
 * resolved to 64.4px instead of 56, leaving an 8px white band under the bar,
 * and the gutter rendered 15% wider than the padding reserved for it. */
.doc { zoom: var(--doc-zoom); }

/* ---------- contents tree --------------------------------------------- */

/* The whole book, navy because it is furniture rather than content: it runs
   straight down out of the top bar so the two read as one L of chrome wrapping
   a white page, not a pale column of links floating on the paper.

   The accent is #E85717 — not a new colour, it is the mid stop of the cover
   orb's own gradient, and the only warm tone in the book already proven to
   carry on navy. --red (flame-800) is too dark to read here.

   Two placements, one set of styles: a fixed gutter on a wide screen, and a
   panel over the page on a phone. Only the positioning rules below are
   split by breakpoint. */
.tree {
  display: none;
  --tree-pad: 26px;
  --tree-hang: calc(1.4em + 9px);
  background: var(--dark);
  color: var(--on-dark-mute);
  font-size: 13px;
  overscroll-behavior: contain;

  /* A hairline thumb that shows on hover. The default bar is a slab of system
     chrome across a considered column. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.tree:hover { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.tree::-webkit-scrollbar { width: 7px; }
.tree::-webkit-scrollbar-track { background: transparent; }
.tree::-webkit-scrollbar-thumb {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  background-clip: padding-box;
}
.tree:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.24);
  background-clip: padding-box;
}

.tree-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eyebrow-dk);
  margin: 0 0 18px;
}
.tree-parts,
.tree-secs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tree-part { margin-bottom: 19px; }
.tree-part:last-child { margin-bottom: 0; }
.tree-top {
  display: flex;
  gap: 9px;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.2;
  /* A step below --on-dark, so the current part has somewhere brighter to go.
     At 10.2:1 this is still far clear of AA; the resting state is quiet, not
     faint. Same shape as the chapter links below, which rest at #D6DEEA. */
  color: #B9C5D8;
  text-decoration: none;
}
.tree-top:hover { color: #F7A47F; }
/* The blurb is part of the same target, so it answers the hover too —
   otherwise half of what you clicked looks inert. */
.tree-top:hover .tree-blurb { color: var(--on-dark); opacity: 0.9; }
.tree-top-body { display: block; }
.tree-num {
  flex: 0 0 1.4em;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--eyebrow-dk);
  padding-top: 0.4em;
}

/* The current part is marked on the spine edge — the one line the eye already
   follows down the tree. */
.tree-part.is-here {
  border-left: 2px solid #E85717;
  margin-left: calc(var(--tree-pad) * -1);
  padding-left: calc(var(--tree-pad) - 2px);
}
/* White, not the accent. Orange was the dimmest text in the sidebar at 4.91:1
   while everything around it sat above 13:1, so the current part read as
   recessed rather than active. The rail and the numeral keep #E85717 — a 2px
   rule is non-text and needs 3:1, where 14.5px type needs 4.5 — which is the
   same division the chapter links already use: white label, orange edge. */
.tree-part.is-here .tree-top { color: #ffffff; }
.tree-part.is-here .tree-num { color: #E85717; }

.tree-blurb {
  display: block;
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.5;
  color: var(--on-dark-mute);
  opacity: 0.72;
  transition: color 0.12s ease, opacity 0.12s ease;
}

/* The chapter list hangs off its own hairline, so the active item has an edge
   to sit against rather than floating in the column. One level under the part
   and no deeper — the tree is for finding a chapter, not for mirroring the
   whole outline. */
.tree-secs {
  margin: 10px 0 0 var(--tree-hang);
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}
/* Bessemer asked for these bolder and pure white. Bold yes; white at rest, no
   — and the reason is the typeface. Europa has exactly two drawn weights, 400
   and 700, so once a link is bold at rest there is no heavier weight to move to
   on hover. If it is also pure white at rest, brightness is spent too, and
   hover and the current chapter have nothing left to say.
 *
   So weight goes all the way up and brightness keeps one step in hand: #D6DEEA
   resting, pure white on hover and for the chapter being read. Against the navy
   that is 13.2:1 resting and 17.9:1 hovered — both far past AAA, with a step
   between them you can actually see. */
.tree-sec-link {
  display: block;
  padding: 4px 0 4px 10px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: #D6DEEA;
  /* 500, not 700. Bolding every row spent the emphasis before the current one
     could use it — the list read as uniformly loud, and "you are here" had only
     colour left to say it with. The current row takes the 700. */
  font-weight: 500;
  text-decoration: none;
  line-height: 1.35;
}
.tree-sec-link:hover,
.tree-sec-link:focus-visible { color: #ffffff; }
/* 700 rather than var(--sans-bold), which resolves to the same family string
   as --sans and so changes nothing on its own. Europa Bold is a drawn face at
   700, so this picks it up rather than synthesising. */
/* The chapter being read is pure white against the resting #D6DEEA, plus the
   accent on the spine. Weight can no longer mark it — everything is 700 now —
   so the marker carries more of the work. */
.tree-sec-link.is-current {
  color: #ffffff;
  font-weight: 700;
  border-left-color: #E85717;
}

/* ---------- where the tree sits: gutter, or panel ---------------------- */

@media (min-width: 980px) {
  /* Only here. The narrow layout is already tuned to fit a 390px screen — the
     2x2 figures, the heatmap's minimum width, the diagnostic tables — and
     scaling it breaks each of those fits. A phone has no slack to spend. */
  html.web { --doc-zoom: 1.15; }

  /* The tree owns part navigation, so the bar keeps only the mark and the two
     controls — which then need the push the part links used to give them. */
  .bar-nav,
  .bar-contents { display: none; }
  /* .bar-full by name, not .bar-icon:first-of-type. :first-of-type means first
     of its *tag* among siblings, not first with the class — so when a
     <button class="bar-contents"> was added ahead of it, the selector quietly
     matched nothing and both controls drifted back to the left. */
  .bar-full { margin-left: auto; }
  .frame,
  .site-foot { padding-left: var(--tree-w); }

  .tree {
    display: block;
    position: fixed;
    z-index: 40;
    top: var(--bar-h);
    left: 0;
    width: var(--tree-w);
    height: calc(100vh - var(--bar-h));
    overflow-y: auto;
    padding: 28px var(--tree-pad) 36px;
    /* Invisible against a white page, but the only thing separating tree from
       part opener when both are navy. */
    border-right: 1px solid rgba(255, 255, 255, 0.11);
  }
}

/* On a phone the gutter has nowhere to go, so the same tree becomes a panel
   over the page, opened from the bar. Before this there was no way to reach
   the contents on a phone at all: the gutter was hidden and the bar's part
   strip scrolled sideways, cut off mid-word. */
@media (max-width: 979px) {
  .bar-nav { display: none; }

  /* The per-heading # anchors are revealed on hover, which a touch screen does
     not have — so on a phone they are invisible links that nothing can use,
     still sitting in the tab order and still read out after every heading. */
  html.web .anchor { display: none; }

  html.web.is-contents .tree {
    display: block;
    position: fixed;
    z-index: 45;
    inset: var(--bar-h) 0 0 0;
    width: auto;
    overflow-y: auto;
    padding: 26px var(--tree-pad) 48px;
    -webkit-overflow-scrolling: touch;
  }
  /* The button already says Contents; the panel need not say it again. */
  html.web.is-contents .tree-label { display: none; }

  /* Everything tappable clears 44px, Apple's minimum. A cursor can hit a 32px
     icon; a thumb on a moving train cannot. Measured, not eyeballed. */
  .bar-mark { padding-block: 14px; }
  .bar-contents {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 0 14px;
  }
  .bar-icon { width: 44px; height: 44px; }

  html.web.is-contents .tree-top { font-size: 17px; padding-block: 12px; }
  html.web.is-contents .tree-part { margin-bottom: 14px; }
  html.web.is-contents .tree-sec-link { padding: 13px 0 13px 12px; font-size: 14px; }
  html.web.is-contents .tree-blurb { font-size: 12.5px; }

  /* Comes up rather than appearing. Short, and off under reduced motion. */
  html.web.is-contents .tree { animation: panel-in 180ms ease both; }
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.web.is-contents .tree { animation: none; }
  }
  /* The page behind must not scroll while the panel is up. */
  html.web.is-contents body { overflow: hidden; }
}
/* Key takeaways. On paper they are a summary; here each row is the way into the
   chapter that argues it, so the whole row — claim and gloss — is one target.
   doc.css numbers these with an ::before on the li, which the wrapper leaves
   alone. */
html.web .bottom-lines a.tk-link {
  display: block;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  border-bottom: 0;
  position: relative;
}
html.web .bottom-lines a.tk-link .bl-head {
  transition: color 0.12s ease;
}
html.web .bottom-lines a.tk-link:hover .bl-head,
html.web .bottom-lines a.tk-link:focus-visible .bl-head {
  color: var(--red);
}
/* A mark that appears on hover rather than twelve permanent arrows down the
   page — the takeaways should still read as a summary at rest. */
html.web .bottom-lines a.tk-link .bl-head::after {
  content: " \2192";
  color: var(--red);
  opacity: 0;
  transition: opacity 0.12s ease;
}
html.web .bottom-lines a.tk-link:hover .bl-head::after,
html.web .bottom-lines a.tk-link:focus-visible .bl-head::after {
  opacity: 1;
}

/* The Ten Commandments, and the other numbered check lists.
 *
 * On paper this is ten items squeezed onto one A4 page, so the type is set at
 * 8.1pt and boxed in grey to hold it together. On screen that came out at
 * 10.8px against 14.7px body text — a quarter smaller than everything around
 * it, for a constraint the web does not have.
 *
 * So: type back up to something you would actually read, the grey panel
 * dropped for the hairlines the rest of the edition uses, and the numerals set
 * in the book's own serif rather than pale chrome circles. */
html.web .provider-check {
  padding: 0;
  background: none;
  border: 0;
  border-top: 2px solid var(--accent);
  /* The print panel is a rounded card; with the fill gone the radius survives
     as a curl at each end of the top rule. A rule should be a straight line. */
  border-radius: 0;
}
html.web .provider-check-item {
  font-size: 13.5px;
  line-height: 1.5;
  padding-block: 18px;
  align-items: baseline;
}
html.web .provider-check-item strong {
  font-size: 15.5px;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--ink);
}
/* A numeral, not a badge: no circle, no fill, no border — the same editorial
   treatment the takeaways and the cluster cards use. */
html.web .provider-check-num {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--soft);
  justify-content: flex-start;
  line-height: 1.2;
}
html.web .security-commandments-page .provider-check-item {
  padding-inline: 0 26px;
}
html.web .security-commandments-page .provider-check-item:nth-child(n + 6) {
  padding-inline: 26px 0;
}

/* Heading anchors: present for the keyboard, quiet until hover. */
/* Citation links keep the printed page's quiet grey — doc.css would otherwise
   give them the navy monospace treatment meant for inline references. */
html.web .page-pad a.src-link {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-bottom: 1px solid transparent;
}
html.web .page-pad a.src-link:hover,
html.web .page-pad a.src-link:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
}

html.web h2, html.web h3 { position: relative; }
/* A link glyph rather than a '#'. The click copies the section's URL, and '#'
   is a developer convention for a fragment -- it named the wrong action. Drawn to
   the same spec as the bar controls so the chrome stays one family. */
.anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4em;
  color: var(--soft);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s;
  vertical-align: middle;
}
.anchor svg {
  width: 0.62em;
  height: 0.62em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus,
/* Stay visible while confirming, or the confirmation vanishes with the cursor. */
.anchor.is-copied { opacity: 1; }

/* Clicking the anchor copies its absolute URL; this says so. Positioned above
   the mark rather than beside it, so it cannot push the heading's line around. */
.anchor.is-copied::after {
  content: 'Copied';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--dark);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.anchor { position: relative; }
html.web .page-pad a.anchor { border-bottom: 0; font-family: var(--sans); }

/* ---------- hero ------------------------------------------------------ */

/* The cover's red orb, carried over as a background rather than a positioned
   disc: a disc has an edge, and at screen scale the edge reads as a seam. */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  /* Flat. The three plates carry the colour now, and the glow behind them was
     two warm sources competing in one eyeful. */
  background: var(--dark);
}
/* The cover is the whole page now, with nothing to scroll into, so it holds the
   viewport rather than sitting on top of content. */
.hero {
  /* Divided by the zoom: vh resolves against the real viewport and is then
     scaled with everything else, so the undivided value renders 15% taller
     than the screen and the cover — which is meant to be exactly one
     viewport — scrolled. */
  min-height: calc((100vh - var(--bar-h)) / var(--doc-zoom));
  display: flex;
  align-items: center;
}
.hero-in {
  position: relative;
  width: 100%;
  /* Wider than the prose measure the rest of the site uses. The cover is not a
     page of prose: it is a title, a tagline that caps itself at 46ch, a row of
     three cards and two bio columns. At 210mm the cards were squeezed until the
     longest title wrapped and its blurb ran a line longer than the others. */
  /* Not the prose measure: the cover is a title, a tagline that caps itself at
     46ch, a row of three cards and two bio columns. 210mm squeezed the cards
     until the longest title wrapped; 1080px made the images bigger than they
     needed to be and dropped the blurbs to three lines. 880 sits between --
     cards near 224px, every title on one line, all three blurbs at four. Below
     roughly 780 the longest title wraps again, so this keeps clear of it. */
  max-width: min(880px, 100%);
  margin: 0 auto;
  /* Top padding is set to align the kicker with the tree's first row -- the row
     that carries the same title the hero does. They sat 34px apart, which read
     as a mistake rather than a choice. Bottom keeps its breathing room. */
  padding: 23px var(--edge) clamp(36px, 5.5vh, 62px);
}
/* Three plates, one per part. The cover already claims the book is "in three
   parts"; this makes that visible and turns each into a way in. Shown at their
   own 4:3, so nothing is cropped. */
html.web .parts-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eyebrow-dk);
  margin: clamp(30px, 4.5vh, 50px) 0 0;
}
html.web .parts {
  list-style: none;
  /* A real gap before the plates: the title, tagline and triptych are three
     separate moves and this is the pause between the second and the third.
     Held at 70px rather than the 85 it was, because the budget is fixed -- at 85
     the author names land exactly on the fold at a 950px viewport. Aligning the
     kicker above bought the 34px that pays for most of this. */
  margin: clamp(38px, 7.4vh, 70px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
html.web .part-card a {
  display: grid;
  gap: 5px;
  text-decoration: none;
  color: inherit;
}
html.web .part-card img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
  opacity: 0.88;
  transition: opacity 0.18s ease;
}
html.web .part-card a:hover img { opacity: 1; }
html.web .part-card-num {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--eyebrow-dk);
}
html.web .part-card-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--on-dark);
}
html.web .part-card-blurb {
  font-size: 12px;
  line-height: 1.45;
  color: var(--on-dark-mute);
}
@media (max-width: 760px) {
  html.web .parts { grid-template-columns: 1fr; }
}

.hero-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eyebrow-dk);
  margin: 0 0 clamp(20px, 4vh, 34px);
}
.hero-title {
  font-family: var(--serif);
  /* Two hand-set lines, so the binding measure is "The Agentic" and not the
     whole title. The floor matters as much as the cap: between 720 and 980 the
     gutter has not appeared yet and the column runs to its full 880px, so a
     purely vw-driven size collapsed there — 41px in a 692px column. */
  font-size: clamp(56px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.014em;
  color: var(--on-dark);
  margin: 0;
}
/* doc.css sets a bare `p { color: var(--body) }` for the printed page, which
   beats inheritance from the dark ground — every <p> on a dark surface here
   has to name its colour. */
.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(15px, 1.95vw, 18.5px);
  line-height: 1.45;
  color: var(--on-dark);
  /* 30ch put this on four lines. Wider is still inside a comfortable measure
     and lands the last line short rather than orphaning two words. */
  max-width: 46ch;
  margin: clamp(20px, 3vh, 27px) 0 0;
}
.hero-meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-dark-mute);
  max-width: 46ch;
  margin: 16px 0 0;
}
.hero-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 5vh, 40px);
}
.btn {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.btn-solid { background: var(--red); color: #fff; }
.btn-solid:hover { background: #7d2216; }
.btn-ghost { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.32); }
.btn-ghost:hover { border-color: var(--on-dark); }

/* The authors, on the cover. Set off by a rule and held to a narrow measure so
   they read as a colophon under the title rather than competing with it. */
.cover-authors {
  margin-top: clamp(26px, 3vh, 36px);
  padding-top: clamp(24px, 3vh, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  scroll-margin-top: calc(var(--bar-h) + 24px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}
.cover-authors .cover-legal {
  grid-column: 1 / -1;
  margin: clamp(18px, 2vh, 26px) 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--on-dark-mute);
  opacity: 0.6;
}

/* ---------- pager + footer -------------------------------------------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 0 var(--edge) clamp(48px, 8vw, 84px);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  padding: 18px 0 0;
  border-top: 2px solid var(--ink);
}
.pager-next { text-align: right; }
.pager a span {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}
.pager a:hover { color: var(--red); border-top-color: var(--red); }

.site-foot {
  background: var(--dark);
  color: var(--on-dark-mute);
}
.foot-in {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: clamp(28px, 3vw, 40px) var(--edge);
}
/* Two columns: the PDF call to action, and who wrote it. Stacks on narrow. */
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
/* Two people, stacked. Scroll-margin so landing on the tree's "About the
   authors" link clears the sticky bar. */
.foot-authors { scroll-margin-top: calc(var(--bar-h) + 24px); }
/* Only when they stack. On the cover they are grid siblings and the gap does
   this job — the margin was pushing the second name 26px below the first. */
.foot-authors .foot-person + .foot-person { margin-top: 26px; }
.foot-name {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.2;
  color: var(--on-dark);
  margin: 0 0 6px;
}
.foot-bio {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-dark-mute);
  margin: 0;
  max-width: 46ch;
}
.foot-links {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.foot-links a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -6px;          /* optical: align the first glyph with the text above */
  border-radius: 3px;
  color: var(--on-dark-mute);
}
.foot-links a:first-child { margin-left: -6px; }
.foot-links svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.foot-links a:hover,
.foot-links a:focus-visible { color: var(--on-dark); }
.foot-with {
  font-size: 11.5px;
  color: var(--on-dark-mute);
  opacity: 0.72;
  margin: 12px 0 0;
}

.foot-legal {
  font-size: 11px;
  line-height: 1.6;
  color: var(--on-dark-mute);
  margin: 0;
  max-width: 60ch;
}

/* ---------- narrow ---------------------------------------------------- */

@media (max-width: 720px) {
  /* Print sets several measures in mm to hold a column on A4; on a phone
     those become horizontal overflow. */
  html.web .page-pad .lead,
  html.web .page-pad p,
  html.web .page-pad blockquote,
  html.web .cover-tagline,
  html.web .cover-descriptor,
  html.web .part-opener .lead { max-width: 100%; }
  html.web body { font-size: 11.5pt; }

  /* Sized to "The Agentic", the longer of the cover's two hand-set lines,
     rather than to the whole title — which is what 8.8vw was measuring, and
     why the phone cover looked undersized against its own margins. */
  /* Capped rather than open-ended: at 720px, 12vw is 86px against the 56px the
     rule above starts at, and the title jumped by half crossing the
     breakpoint. */
  .hero-title { font-size: clamp(38px, 12vw, 60px); }
}

/* Two by two on a phone, not a swipe.
 *
 * Four across at phone width is about 87px a panel — roughly ten characters to
 * a line of description, which is not reading. But two across is ~175px, which
 * is the same width each panel gets on a 1440px desktop. So 2x2 costs nothing
 * in legibility and keeps what the figure is for: all four levels in view at
 * once, compared at a glance. Scrolling gave that up, and clipped a panel to
 * do it.
 *
 * The progression still reads I, II, III, IV — that is ordinary reading order.
 */
@media (max-width: 720px) {
  html.web .flow,
  html.web .stair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    /* The print CSS pins these to a fixed height — 66mm on the coding-tools
       scale, with an !important — which one row of four panels fills exactly.
       Two rows then split that height between them and clip every label. The
       height only ever existed to make the figure fit an A4 page. */
    height: auto !important;
  }
  /* doc.css divides the panels with a right border, which in a grid has to
     become an inner rule on both axes. */
  html.web .flow > .step,
  html.web .stair > .ph {
    flex: none;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  html.web .flow > .step:nth-child(2n),
  html.web .stair > .ph:nth-child(2n) { border-right: 0; }
  html.web .flow > .step:nth-last-child(-n + 2),
  html.web .stair > .ph:nth-last-child(-n + 2) { border-bottom: 0; }

  /* The four conversion clusters, same argument as the maturity scales: four
     across at phone width clipped the fourth entirely. */
  html.web .sec-vectors {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  html.web .sec-vector { border-bottom: 1px solid var(--rule); }
  html.web .sec-vector:nth-child(2n) { border-right: 0; }
  html.web .sec-vector:nth-last-child(-n + 2) { border-bottom: 0; }

  /* The play list ran a 52mm label column against whatever was left, which on a
     phone is 197px of title beside 140px of description. Flip the balance. */
  html.web .architecture-play {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
  }

  /* The radar profiles are square, so a full-width one is a full-width-tall
     one — three of those is most of a screen each. Hold them to a size you can
     take in at a glance. */
  html.web .profile svg,
  html.web .radar-figure {
    max-width: 250px;
    margin-inline: auto;
  }

  /* The scorecard heatmap does not need to scroll — its four data cells hold a
     single digit each. What overflowed was the label column, fixed at 60mm,
     which is 227px of a 370px phone column. As a percentage it scales, and the
     table fits with room to spare. */
  html.web .heatmap-table {
    border-spacing: 1px;
    font-size: 12px;
  }
  html.web .heatmap-table col.col-label { width: 40%; }
  /* The 32rem floor that stops prose tables from crushing is 512px, which pins
     this one wider than the screen no matter what the columns say. It has four
     single-digit cells and does not need a floor. */
  html.web .scroll-x > .heatmap-table { min-width: 0; }
  html.web .heatmap-table thead th {
    font-size: 7.5px;
    letter-spacing: 0.04em;
    padding: 8px 2px;
  }
  html.web .heatmap-table tbody td { padding-inline: 2px; }
  html.web .heatmap-table tbody td:first-child {
    font-size: 12px;
    padding-right: 8px;
  }

  /* Tables that genuinely cannot reflow — three columns of prose need the width
     they need — keep scrolling, with the same hidden scrollbar and edge fade the
     figures use, so it reads as swipeable rather than broken. */
  html.web .scroll-x {
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
  }
  html.web .scroll-x::-webkit-scrollbar { display: none; }

  /* Card grids stack — they are lists, not comparisons, so there is nothing to
     compare side by side. Only the three that still exist in the book are
     listed; rules for .tier-row, .spend-bands, .signal-grid and
     .distinguish-grid were dropped once those figures left the source. */
  html.web .throughput-roadmap-grid,
  html.web .profiles {
    grid-template-columns: 1fr;
  }
  html.web .provider-check-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  /* The rule that divides the two print columns has nothing to divide in one
     column — it was drawing a stray line down the right edge. */
  html.web .provider-check-item,
  html.web .security-commandments-page .provider-check-item {
    border-right: 0;
    padding-inline: 0;
  }
  html.web .provider-check-item:last-child { border-bottom: 0; }
}

/* Bessemer's terms, required on every page by their legal team as the condition
   for launching to portfolio companies without a cookie banner.
 *
 * Sized and coloured to sit below the pager as a legal notice rather than as
 * navigation — it is there to be findable, not read. Deliberately not a footer
 * band: reinstating one for a single link would undo the decision that took the
 * copyright off all five inner pages in the first place. */
html.web .page-legal {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 0 var(--edge) clamp(28px, 4vh, 44px);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.75;
}
html.web .page-legal a { color: inherit; }

/* The cover's copy sits on the dark ground, where the inherited link colour has
   too little contrast to read as a link at 11px. */
.cover-authors .cover-legal a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 2px;
}

/* The cover's legal line carries a required link now, so it has to be legible.
   It was muted with opacity: 0.6, which a child cannot escape — a parent's
   opacity multiplies through — leaving the link at 3.87:1 against the dark
   ground, under the 4.5:1 AA floor for 11px text. Muting by colour instead
   keeps the same visual weight and lets the link sit at full strength. */
html.web .cover-authors .cover-legal {
  opacity: 1;
  color: var(--on-dark-mute);
}


/* The download control says what it is, at widths that can afford the word.
   An icon alone was the only route to the file, and a download glyph is not
   self-evident enough to carry the one action a reader is most likely to want. */
.bar-icon-label { display: none; }
@media (min-width: 980px) {
  /* .bar-icon is a 32px grid box, so the label landed underneath the glyph as a
     second row. Flex puts them on one line; the fixed width has to go with it. */
  .bar-pdf {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    padding-inline: 11px;
  }
  .bar-icon-label {
    display: inline;
    /* doc.css underlines anchors; the control carried no text before, so this
       never showed. The other bar controls are not underlined and this one is
       furniture, not prose. */
    text-decoration: none;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
}

/* The cover is dark from edge to edge, but the page ground underneath it is
   var(--paper) — white, because every other page is a white sheet. Anything the
   hero does not cover therefore shows as a white band.
 *
   .hero carries min-height: 100vh - bar, so normally nothing is left over. That
   holds only while the arithmetic does: a viewport taller than the hero's
   computed height for any reason — browser zoom, a monitor tall enough that a
   rounded vh lands short, the URL bar collapsing on a phone — leaves a strip at
   the bottom, and it was reported on a wide external display.
 *
   Colouring the ground for this one page removes the dependency on the
   arithmetic being exact. is-cover is already on <html> for the cover only, so
   the chapter pages keep their white sheet. */
html.web.is-cover body { background: var(--dark); }