/* B Methodology and C Sources open on the archive's plain ground. Their
   titles share one scale and reading edge; the method's longer introduction
   keeps its two-column composition below that opening line. */
.companion-hero{
  --companion-gutter:clamp(24px,5vw,80px);
  --chapter-title-size:clamp(56px,7.4vw,96px);
  --chapter-number-size:12px;
  --chapter-number-gap:16px;
  --chapter-number-top:8px;
  --chapter-hero-ink:var(--mhc-chapter-sources-ink);
  position:relative;
  color:var(--mhc-on-paper);
  background:var(--mhc-ground);
}
.companion-hero[data-chapter-hero="methodology"]{--chapter-hero-ink:var(--mhc-chapter-method-ink)}
.companion-hero.method-hero,
body>.site-shell>.companion-hero.sources-cover{
  padding-block:clamp(128px,18svh,164px) clamp(48px,6vw,84px);
}
html body>.site-shell>.companion-hero.sources-cover{min-height:0;padding-inline:0!important}
.companion-hero .sources-cover-copy{
  width:min(1140px,calc(100% - 2 * var(--companion-gutter)));
  margin-inline:auto;
}
.companion-hero [data-hero-type-heading]{position:relative;width:fit-content;max-width:100%}
.companion-hero [data-hero-type-title]{
  font:400 var(--chapter-title-size)/.94 Helvetica,'Helvetica Neue',Arial,sans-serif!important;
  letter-spacing:-.04em!important;
  color:var(--mhc-on-paper)!important;
}
.companion-hero [data-hero-type-number]{
  position:absolute;top:var(--chapter-number-top)!important;
  right:calc(100% + var(--chapter-number-gap))!important;
  font:500 var(--chapter-number-size)/1.2 'Geist Mono',ui-monospace,monospace!important;
  letter-spacing:.02em!important;color:var(--chapter-hero-ink)!important;
}
.companion-hero .sources-cover-description{
  max-width:42ch;margin-top:24px;
  font:400 clamp(19px,1.7vw,22px)/1.48 Helvetica,'Helvetica Neue',Arial,sans-serif!important;
  letter-spacing:-.015em!important;color:var(--mhc-on-paper-3)!important;
}
.companion-hero .hero-utility{position:absolute;inset:76px 0 auto;margin:0}
/* The persistent home pill already supplies this destination. */
html.mhc-wayfinding-ready .companion-hero .hero-utility>a{visibility:hidden}

/* Name the destination first, then let its introduction follow in one short
   reading sequence. The title starts immediately behind a shell handover. */
html:is(.sources-arriving,.methodology-arriving)::before{content:none}
html:is(.sources-arriving,.methodology-arriving) .companion-hero :is([data-chapter-hero-title],[data-chapter-hero-copy]){animation:none}
@media screen and (prefers-reduced-motion:no-preference){
  html:is(.sources-arriving,.methodology-arriving) .companion-hero :is([data-hero-type-number],[data-hero-type-title]){
    animation:companion-hero-arrive 520ms cubic-bezier(.16,1,.3,1) 0ms both;
  }
  html:is(.sources-arriving,.methodology-arriving) .companion-hero :is([data-hero-type-description],.hero-reading h2,.hero-reading>div){
    animation:companion-copy-arrive 440ms cubic-bezier(.16,1,.3,1) 160ms both;
  }
  html:is(.sources-arriving,.methodology-arriving) .companion-hero .hero-distinction{
    animation:companion-copy-arrive 360ms cubic-bezier(.16,1,.3,1) 240ms both;
  }
}
@keyframes companion-hero-arrive{from{opacity:.55;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes companion-copy-arrive{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}

@media(max-width:759px){
  .companion-hero{
    --companion-gutter:32px;
    --chapter-title-size:clamp(34px,8.7vw,54px);
    --chapter-number-size:10px;--chapter-number-gap:10px;--chapter-number-top:4px;
  }
  body[data-chapter="methodology"] .companion-hero.method-hero,
  body>.site-shell>.companion-hero.sources-cover{padding-top:128px;padding-bottom:76px}
  .companion-hero.method-hero{padding-inline:max(0px,calc(var(--companion-gutter) - var(--method-gutter)))}
  .companion-hero .hero-utility{inset-inline:max(0px,calc(var(--companion-gutter) - var(--method-gutter)))}
  .companion-hero .sources-cover-description{font-size:19px!important}
}
@media print{
  .companion-hero{--mhc-ground:#fff;--mhc-on-paper:#000;--mhc-on-paper-3:#444;color:#000;background:#fff}
  .companion-hero.method-hero,
  body>.site-shell>.companion-hero.sources-cover{min-height:0;padding-block:24pt;break-after:auto}
  .companion-hero .hero-utility{display:none}
  .companion-hero [data-hero-type-title]{font-size:44pt!important;color:#000!important}
  .companion-hero :is([data-hero-type-number],[data-hero-type-description]){color:#444!important}
}