/* Final 2.1 chapter covers: one material, compositions specific to each motif. */
.chapter-hero.woven-chapter-hero{
  position:relative;display:block;height:100svh;min-height:720px;padding:0;
  overflow:hidden;isolation:isolate;background:var(--mhc-ground);color:var(--mhc-on-paper);
  --woven-ink:var(--mhc-chapter-measurement-ink);
}
.chapter-hero.woven-chapter-hero::before,.chapter-hero.woven-chapter-hero::after{content:none}
.woven-chapter-hero[data-woven-chapter="claims-makers"]{--woven-ink:var(--mhc-chapter-claims-ink)}
.woven-chapter-hero[data-woven-chapter="money"]{--woven-ink:var(--mhc-chapter-money-ink)}
.woven-chapter-hero>[data-woven-canvas]{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.woven-chapter-hero>.woven-cover-copy{position:absolute;z-index:1;left:13%;top:23%;width:78%;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.woven-cover-heading{position:relative;flex:none;width:fit-content;max-width:100%}
.woven-cover-number{position:absolute;right:calc(100% + 16px);top:8px;color:var(--woven-ink);font:500 12px/1.2 'Geist Mono',monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.woven-cover-heading>.woven-cover-title{margin:0;max-width:none;font:400 clamp(68px,9.5vw,128px)/.94 Helvetica,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.04em;color:var(--mhc-on-paper)}
.woven-cover-copy>.woven-cover-description{max-width:32ch;margin:26px 0 0;color:var(--mhc-on-paper-3);font:400 clamp(18px,1.46vw,21px)/1.5 Helvetica,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.015em;text-wrap:pretty}
.woven-chapter-hero>.woven-continue{position:absolute;z-index:2;left:50%;bottom:max(22px,env(safe-area-inset-bottom));display:grid;place-items:center;width:48px;height:48px;transform:translateX(-50%);color:var(--woven-ink);text-decoration:none}
.woven-continue svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.16,1,.3,1)}
/* The motif runs under both controls. A halo of the page ground separates the
   glyph from the filaments without putting a button plate on the cover. */
.woven-continue svg,.woven-motion-toggle svg{filter:drop-shadow(0 0 3px var(--mhc-ground)) drop-shadow(0 0 7px var(--mhc-ground))}
.woven-continue:hover svg{transform:translateY(3px)}
.woven-chapter-hero>.woven-motion-toggle{position:absolute;z-index:2;right:22px;bottom:24px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--mhc-on-paper-2);cursor:pointer}
.woven-motion-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.woven-motion-toggle .woven-play,.woven-motion-toggle[aria-pressed="true"] .woven-pause{display:none}
.woven-motion-toggle[aria-pressed="true"] .woven-play{display:block}
.woven-motion-toggle:hover{color:var(--woven-ink)}
.woven-chapter-hero :focus-visible{outline:2px solid var(--woven-ink);outline-offset:4px}
.woven-chapter-hero[data-woven-chapter="measurement"]>.woven-cover-copy{left:max(128px,11.5%);top:22.5%;width:calc(88.5% - 56px);align-items:flex-start;text-align:left}
.woven-chapter-hero[data-woven-chapter="measurement"] .woven-cover-description{max-width:29ch;margin-left:clamp(32px,10vw,144px)}
.woven-chapter-hero[data-woven-chapter="claims-makers"]>.woven-cover-copy{top:29%;width:37%}
.woven-chapter-hero[data-woven-chapter="claims-makers"] .woven-cover-title{font-size:clamp(68px,7.7vw,108px)}
.woven-chapter-hero[data-woven-chapter="claims-makers"] .woven-cover-description{max-width:28ch}
.woven-chapter-hero[data-woven-chapter="claims-makers"]>.woven-continue{left:calc(13% - 13px);top:80%;bottom:auto}
.woven-chapter-hero[data-woven-chapter="money"]>.woven-cover-copy{left:max(128px,11.5%);top:20%;flex-direction:column;align-items:flex-start;gap:0}
.woven-chapter-hero[data-woven-chapter="money"] .woven-cover-title{font-size:clamp(88px,15vw,176px)}
.woven-chapter-hero[data-woven-chapter="money"] .woven-cover-description{flex:none;margin:26px 0 0;max-width:27ch}
@media(max-width:759px){
  .chapter-hero.woven-chapter-hero{height:max(100svh,760px);min-height:760px}
  .woven-cover-number{right:calc(100% + 10px);top:4px;font-size:10px}
  .woven-cover-copy>.woven-cover-description{font-size:18px;margin-top:24px;max-width:27ch}
  .woven-chapter-hero[data-woven-chapter="measurement"]>.woven-cover-copy{left:88px;top:22%;width:calc(100% - 110px)}
  .woven-chapter-hero[data-woven-chapter="measurement"] .woven-cover-description{margin-left:0}
  .woven-chapter-hero[data-woven-chapter="measurement"] .woven-cover-title{font-size:min(54px,calc((100vw - 110px)/6.25))}
  .woven-chapter-hero[data-woven-chapter="claims-makers"]>.woven-cover-copy{left:max(88px,13%);top:16.5%;width:calc(100% - 110px)}
  .woven-chapter-hero[data-woven-chapter="claims-makers"] .woven-cover-title{font-size:min(68px,18vw)}
  .woven-chapter-hero[data-woven-chapter="claims-makers"]>.woven-continue{left:calc(max(88px,13%) - 13px);top:50%}
  .woven-chapter-hero[data-woven-chapter="money"]>.woven-cover-copy{left:88px;top:19%;width:calc(100% - 120px);flex-direction:column;align-items:flex-start;gap:0}
  .woven-chapter-hero[data-woven-chapter="money"] .woven-cover-title{font-size:min(88px,24vw)}
  .woven-chapter-hero[data-woven-chapter="money"] .woven-cover-description{flex:auto;margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.woven-motion-toggle{display:none!important}.woven-continue svg{transition:none}}
@media print{
  .chapter-hero.woven-chapter-hero{height:auto;min-height:0;padding:64px 60px!important;break-after:avoid}
  .woven-chapter-hero>.woven-cover-copy{position:relative!important;left:0!important;top:0!important;width:100%!important;flex-direction:column!important;text-align:left!important;align-items:flex-start!important;gap:0!important}
  .woven-cover-copy>.woven-cover-description{margin-top:24px!important}
  .woven-chapter-hero>[data-woven-canvas],.woven-chapter-hero>.woven-continue,.woven-chapter-hero>.woven-motion-toggle{display:none!important}
}

/* Match the viewport's content box, including its scrollbar, behind the rail. */
body>.site-shell>.chapter-hero.woven-chapter-hero{
  box-sizing:border-box;width:calc(100% + var(--elastic-content-left));
  margin-left:calc(-1 * var(--elastic-content-left));padding:0;
}
body>.site-shell>.chapter-hero.woven-chapter-hero>[data-woven-canvas]{position:absolute;z-index:0;inset:0;width:100%;height:100%}
body>.site-shell>.chapter-hero.woven-chapter-hero>.woven-cover-copy,
body>.site-shell>.chapter-hero.woven-chapter-hero>.woven-continue,
body>.site-shell>.chapter-hero.woven-chapter-hero>.woven-motion-toggle{position:absolute}
.woven-motion-toggle[hidden]{display:none}
@media print{body>.site-shell>.chapter-hero.woven-chapter-hero{width:auto;margin-left:0}}