@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --method-ink: var(--mhc-on-paper);
  --method-soft: var(--mhc-on-paper-3);
  --method-line: var(--mhc-hairline-paper-soft);
  /* A COMPANION WEARS THE COLOR OF WHAT IT DOCUMENTS, which the Measurement
     companion has always done in the `.measurement-method` block near the foot
     of this file and B had never done at all. B ran on the brand accent, so a
     reader who pressed the citron Method Register in a chapter arrived in an
     orange room that matched neither the control they had pressed nor the rail
     label above it; the archive already named that color in two other places,
     link-affordance among them, so the rule below is the page catching up with
     what the rest of the archive was already saying about it.

     The brand accent stays here as the DEFAULT rather than as B's color, which
     is what any document loading this sheet without declaring a chapter gets,
     and what a third companion would inherit until it named one. */
  --method-accent: var(--mhc-accent-ink);
  --method-field: var(--mhc-accent);
  --method-ground: var(--mhc-surface-room);
  /* Derived from the field rather than restating the accent, so a companion
     that changes its color changes its wash with it and cannot drift. */
  --method-wash: color-mix(in srgb, var(--method-field) 7%, var(--method-ground));
  --method-sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --method-mono: "Geist Mono", ui-monospace, monospace;
  --method-ease: cubic-bezier(.16, 1, .3, 1);
  --method-gutter: clamp(24px, 5vw, 80px);

  /* ONE DESCENDING LADDER, DECLARED ONCE. Before this block existed, any rule
     that needed a heading chose a number, and the page ended up with a fourth
     level that outranked every third one: the four Stone causal types were set
     at 28px inside a section whose own frameworks were set at 22px, while the
     Summary's limits arrived at 25px beside frameworks at 22px although both do
     the same job of opening a movement. The five ranks below are named for the
     job rather than the size, every heading rule takes the rank its element
     occupies in the document outline, and the two breakpoints at the foot of
     this file restate the ranks instead of overriding individual headings.
     Adding a sixth rank is therefore a decision about the structure of the page,
     whereas changing a font-size in place is only a decision about one line. */
  --method-type-title: clamp(56px, 7.4vw, 96px);
  --method-type-statement: clamp(34px, 4.3vw, 60px);
  --method-type-movement: clamp(23px, 1.9vw, 27px);
  --method-type-passage: clamp(19px, 1.5vw, 21px);
  --method-type-label: 18px;

  /* Prose answers to the ladder without extending it, because a lede is the
     sentence that supports a statement rather than a rank that something else
     could sit beneath. */
  --method-type-lede: clamp(19px, 1.7vw, 22px);
  --method-type-body: 17px;
  --method-type-cell: 16px;
  --method-type-note: 15px;
  --method-type-aside: 14px;

  /* MEASURE. A `ch` is the advance of the digit zero, and in Helvetica that is
     .556em against an average of .432em for the letters of running prose, which
     with this page's own tracking of -.012em leaves an effective .420em to the
     character. Fifty of them therefore carry about sixty-six characters to the
     line, which is the top of the band a reader can follow without losing the
     return. The measure that this page had been keeping was 72ch for body prose
     and 90ch for the body of a disclosure, and those are ninety-five and a
     hundred and nineteen characters respectively, so the longest passages in
     the companion were running at close to twice a comfortable line. Stating
     the measure in `ch` rather than in pixels also holds the character count
     steady wherever the page changes size, because a note set smaller keeps its
     own line length in a narrower column instead of reaching further right. */
  --method-measure: 50ch;
  --method-measure-lede: 42ch;
  --method-measure-note: 44ch;

  /* VERTICAL RHYTHM. Every block-level margin and padding that separates one
     thing from the next comes from these five steps, so that the distance
     between two sections and the distance between two rows of a register are
     recognisably the same decision taken at different strengths. Leading
     between paragraphs is deliberately not on the ladder, because that is a
     property of the type rather than of the composition. */
  --method-step-1: 12px;
  --method-step-2: 18px;
  --method-step-3: 26px;
  --method-step-4: 36px;
  --method-step-5: 48px;
  --method-step-section: clamp(76px, 10vw, 136px);

  /* Two weights of rule, which is what the page uses in place of the plates it
     used to draw around prose: the soft line separates rows inside a register,
     and the firm line opens a field that would otherwise have no edge at all. */
  --method-line-strong: var(--mhc-hairline-paper);
}

/* Keyed off the attribute B's own document already declares, so the color and
   the scrollbar and the route pill all read one source. The Measurement
   companion needs nothing here; it states its pair on its body class already. */
:root[data-scrollbar-chapter="methodology"] {
  --method-field: var(--mhc-chapter-method-field);
  --method-accent: var(--mhc-chapter-method-ink);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 114px;
  scrollbar-width: thin;
  scrollbar-color: var(--method-field) var(--method-ground);
}
body {
  margin: 0;
  background: var(--method-ground);
  color: var(--method-ink);
  font: 400 var(--method-type-body)/1.6 var(--method-sans);
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--method-field); color: var(--mhc-on-chroma); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--method-accent); outline-offset: 5px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, h4, p, dl, dd, ol { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
b, strong { font-weight: 600; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.skip-link {
  position: fixed; z-index: 3000; left: var(--elastic-copy-safe-left, 112px); top: 18px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--method-ink); color: var(--mhc-on-ink-fill);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }
/* Functional foundations only; the shared elastic shell owns common geometry. */
.rail-button, .rail-top {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.rail-button svg, .rail-top svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#menu-toggle .menu-icon { position: absolute; z-index: 1; inset: 0; margin: auto; transition: opacity .2s ease, transform .38s var(--method-ease); }
#menu-toggle .menu-icon--menu { opacity: 1; transform: none; }
#menu-toggle .menu-icon--close { opacity: 0; }
#menu-toggle .menu-icon--home { opacity: 0; transform: scale(.82); }
.rail-index { position: relative; display: grid; place-items: center; overflow: hidden; font-family: var(--method-mono); text-transform: uppercase; }
.rail-progress { position: absolute; z-index: 0; inset: 0; background: color-mix(in srgb, var(--method-field) 44%, transparent); }
.rail-index-label { position: relative; z-index: 1; grid-area: 1 / 1; writing-mode: vertical-rl; transform: rotate(180deg); }
.rail-index-label--chapter { opacity: 0; transform: rotate(180deg) translateY(-6px); }
.rail-index.is-chapter .rail-index-label--archive { opacity: 0; transform: rotate(180deg) translateY(6px); }
.rail-index.is-chapter .rail-index-label--chapter { opacity: 1; transform: rotate(180deg); }
.rail-index b, .chapter-list .active a { color: var(--method-accent); font-weight: 620; }
.drawer-inner { display: flex; flex-direction: column; }
.chapter-list { margin: 0; padding: 0; list-style: none; }
.chapter-list a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: stretch; text-decoration: none; }
.chapter-index { display: flex; align-items: center; font: 520 11px/1 var(--method-mono); letter-spacing: .08em; }
.chapter-title { font-size: clamp(25px, 2.45vw, 40px); font-weight: 300; line-height: .94; letter-spacing: -.035em; }
.chapter-subtitle { color: var(--method-soft); font: 540 11px/1.4 var(--method-mono); letter-spacing: .055em; text-transform: uppercase; }
.drawer-scrim { position: fixed; z-index: 1040; inset: 0; opacity: 0; visibility: hidden; cursor: pointer; transition: opacity .3s ease, visibility 0s .3s; }
body.drawer-open .drawer-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
body.drawer-open .menu-icon--menu { opacity: 0; }
body.drawer-open .menu-icon--close { opacity: 1; }
.menu-hold-fill { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--method-field) 48%, transparent); transform: scaleY(0); transform-origin: bottom; }
#menu-toggle.is-home-ready .menu-icon--menu, #menu-toggle.is-complete .menu-icon--menu { opacity: 0; transform: scale(1.1); }
#menu-toggle.is-home-ready .menu-icon--home, #menu-toggle.is-complete .menu-icon--home { opacity: 1; transform: none; }

.page-shell { min-width: 0; padding-inline: var(--method-gutter); }
.method-hero, .reading-layout, .method-close { max-width: 1140px; margin-inline: auto; }
.method-hero { padding-top: 32px; padding-bottom: clamp(40px, 6vw, 84px); }
.hero-utility { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(68px, 10vw, 140px); }
.hero-utility > a { max-width: 28ch; font: 500 11px/1.5 var(--method-mono); text-decoration: none; }
.hero-utility > a:hover { color: var(--method-accent); }
.method-return { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--method-soft); font: 500 11px/1.5 var(--method-mono); }
.method-return svg { width: 28px; height: 28px; padding: 6px; border: 1px solid var(--method-line); border-radius: 50%; transition: border-color .2s ease, color .2s ease; }
.method-return:hover, .method-return:focus-visible { color: var(--method-accent); }
.method-return:hover svg, .method-return:focus-visible svg { border-color: currentColor; }
h1 { color: var(--method-accent); font-size: var(--method-type-title); line-height: .96; letter-spacing: -.04em; }
.hero-reading { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 88px); margin-top: var(--method-step-5); }
/* The hero's sentence and a section's name are both the second rank, so they
   are set from one token. They were not: the hero ran to 46px while every
   section beneath it ran to 60px, which left the statement the whole page is
   making quieter than the statement of any one of its parts. */
.hero-reading h2 { font-size: var(--method-type-statement); line-height: 1.04; letter-spacing: -.04em; }
.hero-reading p { max-width: var(--method-measure-lede); font-size: var(--method-type-lede); line-height: 1.48; }
.hero-reading p + p { margin-top: var(--method-step-2); color: var(--method-soft); font-size: var(--method-type-body); }
.hero-distinction { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: var(--method-step-5); padding-top: var(--method-step-2); border-top: 1px solid var(--method-line); }
.hero-distinction p { max-width: var(--method-measure-note); font-size: var(--method-type-note); color: var(--method-soft); }
.hero-distinction strong { display: block; color: var(--method-ink); margin-bottom: 4px; }
/* A chapter continuation reveals the companion's title like an opening line
   of ink. Direct entries and script-off reading remain fully visible. */
html.methodology-arriving .method-hero h1 { animation: method-title-ink 680ms var(--method-ease) 70ms both; }
html.methodology-arriving .hero-reading h2 { animation: method-copy-arrive 480ms var(--method-ease) 200ms both; }
html.methodology-arriving .hero-reading > div { animation: method-copy-arrive 480ms var(--method-ease) 300ms both; }
html.methodology-arriving .hero-distinction { animation: method-copy-arrive 420ms var(--method-ease) 410ms both; }
@keyframes method-title-ink { from { opacity: .25; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes method-copy-arrive { from { opacity: 0; clip-path: inset(0 0 14% 0); } to { opacity: 1; clip-path: inset(0); } }
.method-nav { position: sticky; z-index: 10; max-width: 100%; }
.reading-layout { padding-bottom: var(--method-step-4); }
.method-section { padding-top: var(--method-step-section); padding-bottom: var(--method-step-4); scroll-margin-top: 16px; }
.method-section + .method-section { margin-top: var(--method-step-5); border-top: 1px solid var(--method-line); }
.section-heading { margin-bottom: var(--method-step-5); }
.section-heading h2 { max-width: 21ch; margin-bottom: var(--method-step-3); font-size: var(--method-type-statement); letter-spacing: -.04em; line-height: 1.02; }
.section-heading > p { max-width: var(--method-measure-lede); font-size: var(--method-type-lede); line-height: 1.5; color: var(--method-soft); }
.framework { display: grid; grid-template-columns: minmax(155px, 1fr) minmax(0, 2.4fr); gap: clamp(24px, 4vw, 60px); padding-block: var(--method-step-4); border-top: 1px solid var(--method-line); }
.framework > header h3 { font-size: var(--method-type-movement); line-height: 1.14; letter-spacing: -.025em; margin-bottom: var(--method-step-1); }
.framework > header > p { color: var(--method-soft); font-size: var(--method-type-aside); line-height: 1.55; }
.framework-body { min-width: 0; }
/* The four places running prose appears, held to one measure. The generated
   Money notes reach the reader through `.money-placement-note`, which is a
   `div` between the body and its paragraphs, so a child combinator alone left
   thirty-five record notes running the full width of their disclosure. */
.framework-body > p, .prose > p, .detail-body > p, .money-placement-note p { max-width: var(--method-measure); }
.framework-body > p + p, .prose > p + p, .detail-body > p + p { margin-top: 16px; }
/* The Money and Country frameworks arrive from the generator carrying plain
   lists, which until now took the user agent's indent and ran to the width of
   the body they sit in. They are set here rather than in the generator, because
   the generator writes content and this file decides how content is read. */
.framework-body > :is(ul, ol) { margin-block: var(--method-step-3); padding-left: 1.4em; }
.framework-body > :is(ul, ol) li { max-width: var(--method-measure); margin-bottom: var(--method-step-1); }
.framework-body > :is(ul, ol) li::marker { color: var(--method-accent); }
.source-link { display: block; max-width: 32ch; margin-top: var(--method-step-1); color: var(--method-soft); font-size: 13px; line-height: 1.45; text-decoration-color: var(--method-line); }
.source-link:hover { color: var(--method-accent); text-decoration-color: currentColor; }
.applies { display: flex; flex-direction: column; margin-top: var(--method-step-3); border-top: 1px solid var(--method-line); }
.applies a { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 14px; align-items: baseline; min-height: 52px; padding: 14px 24px 14px 8px; border-bottom: 1px solid var(--method-line); text-decoration: none; transition: background .24s var(--method-ease); }
.applies a:hover { background: var(--method-wash); }
.applies span { color: var(--method-accent); font: 500 11px/1.4 var(--method-mono); letter-spacing: .02em; }
.applies strong { font-size: var(--method-type-note); line-height: 1.45; font-weight: 400; }
.text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; max-width: 100%; margin-top: var(--method-step-2); font-size: var(--method-type-note); }
.text-link:hover { color: var(--method-accent); }
/* THE ONE ENCLOSURE THIS PAGE KEEPS. Across the archive a rounded plate with a
   ring around it promises that the thing inside opens or answers to a press,
   and fifty-five disclosures are the only elements on this page that do. The
   fields that used to wear the same surface without offering the same promise,
   which were the causal chain, the Stone types, the reading rule and the worked
   break, are now drawn with the rule and the whitespace further down this file
   instead, so that a reader who sees a plate can still read it as an invitation
   rather than as decoration. */
.method-detail { margin-top: var(--method-step-1); border-radius: 22px; background: var(--mhc-surface-panel); border: 1px solid var(--method-line); }
.method-detail + .framework, .method-detail + .causal-method { margin-top: var(--method-step-4); }
.method-detail summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; cursor: pointer; font-size: var(--method-type-label); line-height: 1.4; list-style: none; border-radius: 22px; transition: background .2s; }
.method-detail summary::-webkit-details-marker { display: none; }
.method-detail summary::after { content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-right: 3px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--method-ease); }
.method-detail[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.method-detail summary:hover { background: var(--method-wash); }

/* OPENING IS A MOVE RATHER THAN A JUMP. Every one of these disclosures used to
   arrive and leave within a single frame while the mark beside it turned over a
   quarter of a second, so the control was animated and the thing the control
   governed was not. Where the browser exposes the content box, the archive
   gives it the page's own ease and very nearly the duration the mark already
   had; where it does not, the behavior is exactly what it has always been,
   because the whole of it sits inside a feature query. The technique is the one
   already used by the Measurement chapter's `.reader-disclosure` and by the
   Timeline's list view, so a reader who opens a record in one room and a method
   in another meets a single gesture rather than two. */
@supports selector(::details-content) {
  .method-detail { interpolate-size: allow-keywords; }
  .method-detail::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size .42s var(--method-ease), opacity .3s ease, content-visibility .42s allow-discrete;
  }
  .method-detail[open]::details-content { block-size: auto; opacity: 1; }
}

.detail-body { padding: 6px 26px var(--method-step-4); max-width: 82ch; }
.detail-body h4 { font-size: var(--method-type-passage); line-height: 1.2; margin: var(--method-step-3) 0 var(--method-step-1); }
/* A passage head that opens a disclosure has the summary directly above it, so
   it takes no lead of its own; this reaches both the heads written into the
   page and the thirty-five generated record notes, whose head is one level
   further in. */
.detail-body > h4:first-child, .detail-body > :first-child > h4:first-child { margin-top: 0; }
.decision-list { padding-left: 1.4em; margin: var(--method-step-3) 0; }
.decision-list li { padding-left: .4em; margin-bottom: var(--method-step-2); max-width: var(--method-measure); }
.decision-list li::marker { color: var(--method-accent); font: 500 12px var(--method-mono); }
.decision-list b { display: block; margin-bottom: 3px; }
.definition-list { margin-block: var(--method-step-3); }
.definition-list > div { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 3fr); gap: 24px; padding-block: var(--method-step-2); border-top: 1px solid var(--method-line); }
/* The term was set one step below its own definition, which reversed the two.
   Weight carries the label instead, and both sit at the same size. */
.definition-list dt { font-weight: 600; font-size: var(--method-type-cell); }
.definition-list dd { max-width: var(--method-measure); font-size: var(--method-type-cell); }
.causal-chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 var(--method-step-5); padding-top: var(--method-step-3); border-top: 1px solid var(--method-line-strong); }
.causal-chain article { padding-inline: clamp(14px, 1.5vw, 24px); border-left: 1px solid var(--method-line); }
.causal-chain article:first-child { border: 0; padding-left: 0; }
.causal-chain article:last-child { padding-right: 0; }
.causal-chain b { display: block; font: 500 11px/1.4 var(--method-mono); color: var(--method-accent); margin-bottom: var(--method-step-3); }
.causal-chain h4 { font-size: var(--method-type-passage); letter-spacing: -.02em; line-height: 1.13; margin-bottom: var(--method-step-1); }
.causal-chain p { font-size: var(--method-type-aside); line-height: 1.5; color: var(--method-soft); }
/* THE FOUR STONE TYPES. This field carried the surface and the radius of a
   disclosure around four definitions that open nothing, which is the mark the
   archive reserves for a thing a reader can act on, and it set their names at
   28px, one rank above every framework heading in the section that contains
   them. Both are now answered by the same material the rest of the page uses:
   a firm rule opens the field, a soft rule divides its rows, the column gap
   replaces the vertical seam, and the names take the fourth rank they occupy. */
.stone-field { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); margin-bottom: var(--method-step-4); border-top: 1px solid var(--method-line-strong); }
.stone-field article { padding-block: var(--method-step-3); }
.stone-field article:nth-child(n+3) { border-top: 1px solid var(--method-line); }
.stone-field b { display: block; font: 500 11px/1.5 var(--method-mono); color: var(--method-soft); margin-bottom: var(--method-step-2); }
.stone-field h4 { font-size: var(--method-type-passage); letter-spacing: -.025em; line-height: 1.15; margin-bottom: var(--method-step-1); }
.stone-field p { font-size: var(--method-type-cell); max-width: var(--method-measure-note); }
.causal-era-rules { margin-block: var(--method-step-3); }
.causal-era-rule { display: grid; grid-template-columns: 26px 100px 1fr; gap: 10px 20px; padding-block: var(--method-step-2); border-top: 1px solid var(--method-line); }
.causal-era-rule code, .causal-era-rule time { font: 500 11px/1.5 var(--method-mono); }
.causal-era-rule code { color: var(--method-accent); }
.causal-era-rule strong { font-size: var(--method-type-body); font-weight: 500; line-height: 1.3; }
.causal-era-rule p { grid-column: 3; max-width: var(--method-measure-note); font-size: var(--method-type-note); color: var(--method-soft); }
/* One sentence in the chapter's own ink, which needs a rule and a quantity of
   air rather than a tinted plate to be read as a statement about the rest. */
.reading-rule { margin-block: var(--method-step-5); padding-top: var(--method-step-3); border-top: 1px solid var(--method-line-strong); }
.reading-rule p { max-width: var(--method-measure-lede); color: var(--method-accent); font-size: var(--method-type-movement); line-height: 1.32; letter-spacing: -.02em; }
.money-stages { margin-top: 0; }
.limit-list { list-style: none; padding: 0; counter-reset: limit; }
.limit-list li { position: relative; padding: var(--method-step-3) 0 var(--method-step-3) 48px; border-top: 1px solid var(--method-line); counter-increment: limit; }
.limit-list li::before { content: counter(limit, decimal-leading-zero); position: absolute; left: 0; top: 30px; color: var(--method-accent); font: 500 11px/1.5 var(--method-mono); }
.limit-list h3 { font-size: var(--method-type-movement); line-height: 1.16; letter-spacing: -.025em; margin-bottom: var(--method-step-1); }
.limit-list p { max-width: var(--method-measure); color: var(--method-soft); }
/* The generated Money block opens its thirty-five record notes with a heading
   that no rule in this file reached, so it fell to the user agent's own size and
   arrived quieter than the framework headings standing beside it although it
   governs far more of the page. It takes the third rank here, and the firm rule
   above it says where the accounting stops and the record notes begin. */
#money-record-notes { margin-top: var(--method-step-5); padding-top: var(--method-step-3); border-top: 1px solid var(--method-line-strong); }
#money-record-notes > h3 { margin-bottom: var(--method-step-3); font-size: var(--method-type-movement); line-height: 1.16; letter-spacing: -.025em; }
.closing-applications { margin-left: 48px; }
/* The page ends where every chapter ends: the space under the last line is
   the chapter colophon's, clamp(24px, 3vw, 38px), rather than a step of this
   page's own scale, so the archive closes on one amount of ground. */
.method-close { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: var(--method-step-4) 0 clamp(24px, 3vw, 38px); border-top: 1px solid var(--method-line); }
.method-close p { font-size: var(--method-type-movement); letter-spacing: -.025em; margin-bottom: var(--method-step-2); }
.method-close span { font: 500 11px/1.5 var(--method-mono); color: var(--method-soft); }
.close-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.close-actions button { display: inline-flex; align-items: center; min-height: 46px; padding: 12px 20px; border: 1px solid var(--method-line); border-radius: 999px; background: transparent; color: var(--method-ink); text-decoration: none; font-size: var(--method-type-aside); }
.close-actions button { background: var(--method-ink); color: var(--mhc-on-ink-fill); }
.close-actions button:hover { background: var(--method-field); color: var(--mhc-on-chroma); }

@media (max-width: 1050px) {
  :root { --method-gutter: 32px; }
  .hero-utility { margin-bottom: 78px; }
  .hero-reading { gap: 32px; }
  .causal-chain article { padding-inline: 12px; }
  .framework { grid-template-columns: 180px minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 760px) {
  /* The ladder is restated here, so that a heading keeps the rank it holds at
     every other width. Overriding one heading at a time is what had let the
     section statements outgrow the hero's own statement on a narrow screen
     while leaving them in the right order on a wide one. */
  :root {
    --method-gutter: 22px;
    --method-type-title: clamp(37px, 7.8vw, 58px);
    --method-type-statement: clamp(32px, 5.6vw, 40px);
    --method-type-movement: clamp(21px, 3vw, 24px);
    --method-type-passage: clamp(18px, 2.4vw, 20px);
    --method-type-lede: 19px;
    --method-type-label: 17px;
    --method-step-section: clamp(56px, 9vw, 68px);
  }
  html { scroll-padding-top: 135px; }
  .method-hero { padding-top: 22px; padding-bottom: 36px; }
  .hero-utility { margin-bottom: 56px; }
  .hero-reading { grid-template-columns: 1fr; margin-top: 30px; gap: 24px; }
  .hero-reading h2 br { display: none; }
  .hero-distinction { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
  .section-heading { margin-bottom: var(--method-step-4); }
  .framework { grid-template-columns: 1fr; gap: 20px; padding-block: var(--method-step-3); }
  .framework > header { max-width: var(--method-measure-note); }
  .framework > header h3 { margin-bottom: 8px; }
  .source-link { max-width: 54ch; margin-top: 10px; }
  .applies a { grid-template-columns: 1fr; gap: 6px 12px; }
  .applies span { grid-column: 1; }
  .applies strong { grid-column: 1; }
  .causal-chain { grid-template-columns: 1fr; }
  .causal-chain article, .causal-chain article:first-child, .causal-chain article:last-child { padding: var(--method-step-3) 0; border-left: 0; }
  .causal-chain article + article { border-top: 1px solid var(--method-line); }
  .causal-chain b { margin-bottom: 8px; }
  .causal-chain h4 { margin-bottom: 8px; }
  .stone-field { grid-template-columns: 1fr; }
  .stone-field article + article { border-top: 1px solid var(--method-line); }
  .method-detail summary { padding: 20px; gap: 16px; }
  .detail-body { padding: 4px 20px var(--method-step-3); }
  .definition-list > div { grid-template-columns: 1fr; gap: 6px; }
  .causal-era-rule { grid-template-columns: 24px 1fr; gap: 8px 12px; }
  .causal-era-rule strong, .causal-era-rule p { grid-column: 2; }
  .limit-list li { padding-left: 34px; }
  .closing-applications { margin-left: 0; }
  .method-close { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 400px) {
  :root {
    --method-gutter: 16px;
    --method-type-title: clamp(32px, 8.9vw, 40px);
    /* The statement steps down with the title here, because at the narrowest
       width both were resting on their floors and the page's name had stopped
       being larger than the name of a section inside it. */
    --method-type-statement: clamp(28px, 5.6vw, 34px);
    --method-type-body: 16px;
    --method-type-cell: 15px;
  }
  .hero-utility { gap: 12px; }
  .hero-utility > a { font-size: 11px; max-width: 22ch; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* The universal reset above reaches only the two pseudo-elements it names,
     so the disclosure's own content box has to be turned off by name. */
  @supports selector(::details-content) {
    .method-detail::details-content { transition: none; }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .method-nav { background: var(--method-ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  .applies a::after { background: LinkText; }
}
@media print {
  :root { --method-ink: #10110f; --method-soft: #444; --method-accent: #c03400; --method-line: #ccc; --method-line-strong: #999; --method-ground: #fff; }
  html { scroll-behavior: auto; }
  .archive-rail, .chapter-drawer, .drawer-scrim, .method-nav[data-chapter-sequence-dock], .theme-toggle, .skip-link, .method-return, .close-actions { display: none !important; }
  .page-shell { margin: 0; padding: 0; }
  body.mhc-archive-enabled { padding-left: 0; background: white; color: black; font-size: 11pt; }
  h1 { font-size: 44pt; color: black; }
  .method-hero, .method-section { padding-block: 24pt; }
  .hero-utility { margin-bottom: 30pt; }
  .framework { grid-template-columns: 160px minmax(0, 1fr); }
  /* The class in the feature query above outweighs a bare type selector, so the
     printed disclosure has to be reopened at the same weight or it would go to
     paper collapsed and invisible while still being open in the document. */
  details::details-content, .method-detail::details-content { display: block; content-visibility: visible; block-size: auto; opacity: 1; overflow: visible; transition: none; }
  .method-detail > .detail-body { display: block !important; }
  .method-detail summary::after { display: none; }
  .framework, .causal-era-rule, .definition-list > div { break-inside: avoid; }
  .method-detail { background: none; }
  .applies a::after { display: none; }
  .applies a { grid-template-columns: 100px 1fr; padding-right: 8px; }
}

/* Detailed companions share the reading ground and controls above. */
.measurement-method {
  --method-accent: var(--mhc-sage-ink);
  --method-field: var(--mhc-sage);
  --method-wash: color-mix(in srgb, var(--method-field) 7%, var(--method-ground));
}
/* The prose container and the prose inside it hold one measure, since a list
   that indents within the container should read narrower than the paragraph
   above it rather than reaching further right. */
.measurement-method .method-section > .prose { max-width: 82ch; margin-block: var(--method-step-3); }
.measurement-method .method-section > :is(.opening-rule, .vector-caption) { max-width: var(--method-measure); margin-block: var(--method-step-3); }
.measurement-method :is(.prose h3, .method-section > h3) { margin: var(--method-step-5) 0 var(--method-step-2); font-size: var(--method-type-movement); line-height: 1.16; letter-spacing: -.025em; }
.measurement-method :is(.prose p, .opening-rule, .vector-caption) { font-size: var(--method-type-body); }
.measurement-method :is(.prose li, .transcription-rules li) { max-width: var(--method-measure); margin-block: var(--method-step-1); }
.measurement-method :is(.claim-boundary, .record-schema, .display-rules, .limitations) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--method-line); margin-block: var(--method-step-4); }
/* The seam moves from the right edge of an odd cell to the left edge of an even
   one, which reads the same in a full row and avoids a rule hanging off a cell
   that has nothing beside it when a register ends on an odd count. Zeroing the
   outer padding also returns the first column to the same left edge as the
   prose above it, so the register is aligned rather than inset. */
.measurement-method :is(.claim-boundary > div, .record-field, .display-rule, .limitation) { padding: var(--method-step-3) var(--method-step-3) var(--method-step-3) 0; border-bottom: 1px solid var(--method-line); }
.measurement-method :is(.claim-boundary > div, .record-field, .display-rule, .limitation):nth-child(even) { padding-right: 0; padding-left: var(--method-step-3); border-left: 1px solid var(--method-line); }
.measurement-method :is(.record-field b, .display-rule b, .limitation b, .claim-boundary b, .maintenance b, .break-row > b) { display: block; font-size: var(--method-type-label); font-weight: 500; line-height: 1.25; margin-bottom: var(--method-step-1); }
.measurement-method :is(.record-field span, .display-rule p, .limitation p, .claim-boundary p) { max-width: var(--method-measure-note); font-size: var(--method-type-cell); color: var(--method-soft); }
.measurement-method :is(.record-field small, .family small) { display: block; margin-top: var(--method-step-1); font: 500 11px/1.5 var(--method-mono); color: var(--method-soft); }
.measurement-method .pipeline-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px 24px; padding-block: var(--method-step-3); border-top: 1px solid var(--method-line); }
.measurement-method .pipeline-row > span { grid-row: 1 / 3; color: var(--method-accent); font: 500 12px/1.5 var(--method-mono); }
.measurement-method .pipeline-row h3 { font-size: var(--method-type-movement); line-height: 1.16; letter-spacing: -.025em; }
.measurement-method .pipeline-row p { grid-column: 2; max-width: var(--method-measure); }
.measurement-method .admission-list { padding-left: 24px; margin-block: var(--method-step-4); }
.measurement-method .admission-list li { padding: var(--method-step-2) 0 var(--method-step-2) 8px; border-top: 1px solid var(--method-line); }
.measurement-method :is(.admission-list, .qa-list, .maintenance) li > :first-child { display: block; max-width: var(--method-measure); }
.measurement-method .gate-answer { display: block; margin-top: var(--method-step-1); color: var(--method-accent); font: 500 11px/1.5 var(--method-mono); }
.measurement-method .decision-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.4fr); gap: 24px; padding-block: var(--method-step-2); border-top: 1px solid var(--method-line); }
.measurement-method .decision-row b { font-weight: 500; }
.measurement-method .decision-row > span { max-width: var(--method-measure); }
/* SIX DIMENSIONS, NOT SIX BUTTONS. These are inert spans naming the parts of a
   series identity, and they were drawn as ringed pills, which is the shape this
   archive gives to a control. They keep their place as a keyed row and take the
   register's own mono, separated by the soft rule the causal chain already
   uses between one cell and the next. */
.measurement-method .identity-vector { display: flex; flex-wrap: wrap; gap: 6px 0; margin-block: var(--method-step-3); padding-top: 14px; border-top: 1px solid var(--method-line-strong); }
.measurement-method .identity-vector > * { padding-inline: clamp(14px, 1.6vw, 22px); border-left: 1px solid var(--method-line); color: var(--method-accent); font: 500 12px/1.7 var(--method-mono); }
.measurement-method .identity-vector > :first-child { padding-left: 0; border-left: 0; }
.measurement-method .break-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 24px; padding-block: var(--method-step-3); border-top: 1px solid var(--method-line); }
.measurement-method .break-row > strong { color: var(--method-accent); font: 500 12px/1.5 var(--method-mono); }
.measurement-method .break-row p { grid-column: 2; max-width: var(--method-measure); color: var(--method-soft); }
/* A worked example is prose and a diagram, so it takes the rule and the air the
   rest of the page uses rather than the wash of a plate that opens nothing. */
.measurement-method .worked-break { margin: var(--method-step-5) 0; padding: var(--method-step-3) 0 0; border-top: 1px solid var(--method-line-strong); }
.measurement-method .worked-break h3 { margin-bottom: var(--method-step-3); font-size: var(--method-type-movement); line-height: 1.16; letter-spacing: -.025em; }
.measurement-method .worked-break p { max-width: var(--method-measure); }
.measurement-method .break-axis { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 16px; margin-bottom: var(--method-step-3); }
.measurement-method .break-segment { padding-bottom: var(--method-step-2); border-bottom: 2px solid var(--method-accent); }
.measurement-method .break-segment > * { display: block; }
.measurement-method .break-segment span { color: var(--method-soft); font-size: var(--method-type-aside); margin-top: 8px; }
.measurement-method .break-gap { align-self: center; text-align: center; color: var(--method-soft); font: 500 11px/1.4 var(--method-mono); }
.measurement-method .family-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-block: var(--method-step-4); }
.measurement-method .family { padding-block: var(--method-step-3); border-top: 1px solid var(--method-line); }
.measurement-method .family > b { display: block; font-size: var(--method-type-passage); font-weight: 500; line-height: 1.2; margin-bottom: var(--method-step-2); }
.measurement-method .family > b span { display: block; font: 500 12px/1.4 var(--method-mono); color: var(--method-accent); margin-top: var(--method-step-1); }
.measurement-method .family p { font-size: var(--method-type-cell); }
.measurement-method .qa-list { padding-left: 24px; }
.measurement-method .qa-list li { padding: var(--method-step-2) 0 var(--method-step-2) 8px; border-top: 1px solid var(--method-line); }
/* The one ring this companion keeps. A wide inventory scrolls sideways inside
   this box and the box itself takes keyboard focus, which makes it a thing the
   reader operates rather than prose inside a frame. */
.measurement-method .table-wrap { max-width: 100%; overflow: auto; margin-block: var(--method-step-4); border: 1px solid var(--method-line); border-radius: 22px; }
.measurement-method table { width: 100%; min-width: 850px; border-collapse: collapse; text-align: left; font-size: var(--method-type-aside); line-height: 1.5; }
.measurement-method :is(th, td) { vertical-align: top; padding: 16px; border-bottom: 1px solid var(--method-line); }
.measurement-method th { background: var(--method-wash); color: var(--method-accent); font: 500 11px/1.5 var(--method-mono); }
.measurement-method table a { overflow-wrap: anywhere; }
.measurement-method tfoot { font-weight: 500; background: var(--method-wash); }
.measurement-method .source-notes { display: grid; gap: var(--method-step-2); font-size: var(--method-type-note); max-width: var(--method-measure); }
.measurement-method .maintenance { padding-left: 24px; }
.measurement-method .maintenance li { padding: var(--method-step-3) 0 var(--method-step-3) 8px; border-top: 1px solid var(--method-line); }
@media (max-width: 760px) {
  .measurement-method :is(.claim-boundary, .record-schema, .display-rules, .limitations, .family-ledger, .decision-row, .break-axis, .break-row) { grid-template-columns: 1fr; }
  .measurement-method :is(.claim-boundary > div, .record-field, .display-rule, .limitation):nth-child(even) { padding-left: 0; border-left: 0; }
  .measurement-method .break-row p { grid-column: 1; }
  .measurement-method .break-gap { text-align: left; }
  .measurement-method .family-ledger { gap: 0; }
  .measurement-method .pipeline-row { grid-template-columns: 24px minmax(0, 1fr); gap: 10px 16px; }
}
@media print {
  .measurement-method { --method-accent: #35543c; --method-wash: #f1f4f1; }
  .measurement-method .table-wrap { overflow: visible; border: 0; }
  .measurement-method table { min-width: 0; font-size: 8pt; }
  .measurement-method :is(th, td) { padding: 6pt; }
}

/* Input trends retained in the country-comparison method. */
.health-share-method-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-block:24px 40px; }
.health-share-method-inputs figure { min-width:0; margin:0; }
.health-share-method-inputs .share-mini-chart { display:block; width:100%; }
.health-share-method-inputs text { fill:var(--method-soft); font:12px var(--method-mono); }
.health-share-method-inputs .axis-rule { stroke:var(--method-line); }
.health-share-method-inputs .share-line { stroke:var(--method-accent); stroke-width:2; fill:none; }
#money-country-sensitivity .r-scroll, #money-country-data .r-scroll, #money-us-reconciliation .r-scroll { overflow-x:auto; max-width:100%; }
#money-country-data td { white-space:nowrap; font-variant-numeric:tabular-nums; }
#money-country-data td span { display:block; }
#money-country-sensitivity table, #money-country-data table, #money-us-reconciliation table { width:100%; border-collapse:collapse; text-align:left; font-variant-numeric:tabular-nums; }
#money-country-sensitivity th, #money-country-sensitivity td, #money-country-data th, #money-country-data td, #money-us-reconciliation th, #money-us-reconciliation td { padding:10px; border-bottom:1px solid var(--method-line); }