/* manifesto: THE ROUTE. Preston's manifesto, set large and word for word, read beside the line a payment travels.
   Owner: manifesto. Scoped under .mf* classes and #mf* ids. Reuses core, chrome and page (read-only).
   Stacking: on desktop the route instrument is a fixed copy (z 2) inside each route region, which clips it, so the route
   changes tone exactly where the page does; on phones the aside is a 40px strip at z 59 under the nav. Colours that follow
   the scroll read the shell's tokens (--pg-fg, --pg-bg, --pg-rule); region colours come from page.css's
   .pg-s[data-tone=...] rules, so nothing here keys on a bare [data-tone]. */

main.mf{--mf-fs:clamp(24px,2.5vw,38px);--mf-xl:clamp(40px,5vw,76px);--mf-xxl:clamp(56px,8.4vw,132px);--mf-cg:clamp(16px,2vw,32px)}
main.mf i,.mf-rt i{font-style:normal}

/* ================================================================ header (#mfHead, night, READY) */
#mfHead{display:flex;flex-direction:column;padding-bottom:0;
  padding-top:calc(var(--bar-h) + var(--nav-h) + clamp(40px,5.2vw,74px))}
#mfHead>.pg-grid{flex:1;grid-template-rows:auto 1fr;margin-bottom:clamp(40px,6vh,72px)}
.mf-kick{grid-column:1/-1;display:flex}
.mf-h1{grid-column:1/11;align-self:end;margin-top:clamp(40px,8vh,96px);font-size:clamp(44px,6.6vw,100px);line-height:.98;letter-spacing:-.04em;color:#f2f2f2}
/* the byline and the chapter index, pinned to the header's foot */
.mf-meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--mf-cg);align-items:start;margin-top:auto;
  border-top:1px solid rgba(242,242,242,.16);font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase}
.mf-by{grid-column:1/5;display:flex;align-items:center;min-height:44px;color:#f2f2f2;white-space:nowrap}
.mf-idx{grid-column:5/13}
.mf-idx ol{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:24px;margin:0;padding:0;list-style:none}
.mf-idx a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;margin:0 -8px;color:rgba(242,242,242,.62);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:color .24s linear}
.mf-idx b{font-weight:400}
/* until the five fit beside the byline (1280), the index takes a row of its own under it, ruled like the phone's list,
   so no chapter is left alone on a second line */
@media (min-width:980px) and (max-width:1279.98px){
  .mf-by,.mf-idx{grid-column:1/-1}
  .mf-idx{border-top:1px solid rgba(242,242,242,.16)}
}
.mf-idx a:focus-visible{outline-offset:-2px;color:#fff}
@media (hover:hover){ .mf-idx a:hover{color:#fff} }

/* ================================================================ the lines */
.mf-body{grid-column:5/12}
.mf-t+.mf-t{margin-top:calc(1.5 * var(--mf-fs))}
/* the measure holds at about 22em (the column's width at 1440), so wide screens do not stretch a line past ~45 characters */
.mf-l{max-width:22em;font-family:var(--sans);font-weight:400;font-size:var(--mf-fs);line-height:1.18;letter-spacing:-.018em;text-wrap:pretty}
.mf-l+.mf-l{margin-top:.35em}
.mf-xl{font-size:var(--mf-xl);line-height:1;letter-spacing:-.035em}
/* one line may reach into column 12: the body is 7 columns, so one column plus its gap is (100% + gap) / 7 */
.mf-xxl{font-size:var(--mf-xxl);line-height:.95;letter-spacing:-.04em;margin-right:calc((100% + var(--mf-cg)) / -7)}
.mf-l.mf-xxl{margin-top:.18em}
.mf-blue{color:var(--blue)}
.mf-gold{color:#d9ad12}
/* the sign-off keeps its "- " in the DOM; the glyph is see-through and a 28px rule is drawn in its place (as a background:
   a positioned span would become its own offsetParent and CT.split would measure it onto a line of its own) */
.mf-dash{white-space:pre;padding-right:calc(40px - .61em);-webkit-text-fill-color:transparent;
  background:linear-gradient(currentColor,currentColor) 0 calc(50% + .02em)/28px 1px no-repeat}
/* CT.split measures lines from its word spans; a word like "real-world" must not break at its hyphen while measured, or it
   would be counted on one line and its tail on the next */
main.mf :is(p.mf-l,h3)>span:not(.ln),main.mf :is(p.mf-l,h3)>.ln>span>span{white-space:nowrap}
/* every line below the h1 rises once (p-manifesto.js); the safety shows any line no script split */
html.js:not(.reduce) main.mf :is(p.mf-l,h3):not(.core-split){visibility:hidden;animation:core-reveal 0s 3s forwards}

/* ================================================================ chapters (#mf1-#mf5): 18vh, a rule, the number tab, the title */
.mf-ch{padding-top:18vh}
/* the prologue opens on the straight route: "Peer-to-peer. Open." are read on WALLET TO WALLET before FIAT drops in */
.mf-pro{padding-top:clamp(24px,4vw,56px)}
.mf-rule{grid-column:1/-1}
/* the number tab, then the founder's chapter title set as a real heading: the shell's h2 size (58px at 1440, 32px on a
   phone), well above the 36px lines it opens, so the five chapters read as landmarks on the long scroll */
.mf-hd{grid-column:5/12;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.6vw,22px);margin-top:28px}
main.mf h2.mf-h2{font-family:var(--sans);font-weight:400;font-size:clamp(32px,4vw,58px);line-height:1.02;letter-spacing:-.03em;
  text-wrap:balance;max-width:100%}
.mf-hd+.mf-body{margin-top:clamp(40px,4.4vw,64px)}

/* What We Believe (#mf3, blue): four principles, two by two, inside columns 5-12 */
.mf-body.mf-pr{grid-column:5/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,5.6vw,88px) var(--mf-cg);align-items:start}
.mf-p{padding-top:22px;border-top:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.mf-p h3{margin:0 0 20px;font-family:var(--sans);font-weight:500;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.mf-p .mf-l{font-size:22px;line-height:1.35;letter-spacing:-.008em}
.mf-p .mf-l+.mf-l{margin-top:.45em}
.mf-p .mf-l.mf-xl{margin-top:.62em;font-size:var(--mf-xl);line-height:1;letter-spacing:-.035em}

/* ================================================================ the end (#mfEnd): the route laid flat, and three doors */
.mf-end{padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(56px,6vw,88px)}
.mf-way{grid-column:1/-1;position:relative;height:42px}
.mf-way-l{position:absolute;left:4px;right:4px;top:4px;height:1px;background:currentColor}
.mf-way b{position:absolute;top:0;width:9px;height:9px;background:var(--paper);box-shadow:inset 0 0 0 1px currentColor}
.mf-way b::after{content:"";position:absolute;left:3px;top:3px;width:3px;height:3px;background:currentColor}
.mf-way-a{left:0}
.mf-way-b{right:0}
.mf-way span{position:absolute;top:22px;font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap}
.mf-way-ta{left:0}
.mf-way-tb{right:0}
.mf-doors{grid-column:5/13;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(56px,6vw,96px)}

/* ================================================================ the route instrument (built by p-manifesto.js)
   Desktop: a fixed column at the left. YOUR WALLET at the top, THE MERCHANT at the foot, five stops between.
   Each route region (#mf0-#mf5) carries its own copy (div.mf-rt.mf-rt-r) in its own tone and clips it to itself, so
   where night turns to paper, or paper to blue, the route changes colour exactly at the boundary, on the compositor, at
   any scroll speed: it never fades out for a boundary and never draws ink on blue or white on paper. The prologue's
   clip reaches up over the header and the last chapter's down over #mfEnd (night on night, paper on paper), so the
   instrument's fades at either end are never cut by an invisible edge. Phones: aside#mfRoute is the 40px strip, with its
   own solid background in the display's tone (--pg-*), like the nav it hangs from. */
html:not(.js) .mf-rt{display:none}
.mf-rt{--mf-fg:var(--pg-fg);--mf-bg:var(--pg-bg);position:fixed;z-index:2;left:var(--g);top:calc(var(--nav-h) + 40px);width:min(300px,22vw);
  height:calc(var(--pin-h) - var(--nav-h) - 80px);color:var(--mf-fg);pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .35s linear,visibility 0s linear .35s}
.mf-rt.is-on{opacity:1;visibility:visible;transition:opacity .35s linear,visibility 0s}
@media (min-width:980px){
  #mfRoute{display:none}
  main.mf>#mf0{clip-path:inset(-100vh 0 0 0)}
  main.mf>:is(#mf1,#mf2,#mf3,#mf4){clip-path:inset(0)}
  main.mf>#mf5{z-index:1;clip-path:inset(0 0 -100vh 0)}
  main.mf>.pg-s[data-tone=night]>.mf-rt{--mf-fg:#f2f2f2;--mf-bg:#0b1220}
  main.mf>.pg-s[data-tone=paper]>.mf-rt{--mf-fg:#0e1726;--mf-bg:#f7f8fa}
  main.mf>.pg-s[data-tone=blue]>.mf-rt{--mf-fg:#fff;--mf-bg:#0d2f78}
}
@media (max-width:979.98px){ main.mf>.pg-s>.mf-rt{display:none} }
.mf-rt-svg{position:absolute;left:0;top:0;max-width:none;overflow:visible}
.mf-rt-p{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-linecap:butt}
/* a line jump: the route is drawn over a 9px band of its own background, so a chapter rule scrolling past passes under it
   with a gap either side, as one wire crosses another on a schematic, instead of cutting a + through it */
.mf-rt-h{fill:none;stroke:var(--mf-bg);stroke-width:9;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:butt}
.mf-rt-pd{stroke-dasharray:3 3}
.mf-rt-n{opacity:0}
.mf-rt-n rect{fill:var(--mf-bg);stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.mf-rt-n.mf-rt-gh rect{stroke-dasharray:2 2}
.mf-rt-e{fill:var(--mf-bg);stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.mf-rt-c{fill:currentColor}
.mf-rt-run{fill:#d9ad12;visibility:hidden}
/* stop labels: positioned per frame with `translate`; the mask, the strike and the rise are separate layers */
.mf-rt-l{position:absolute;left:0;top:0;height:16px;font-family:var(--cond);font-weight:600;font-size:11px;line-height:16px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap}
.mf-rt-lm{position:relative;display:block;height:16px;overflow:hidden;padding:0 3px;margin:0 -3px}
.mf-rt-lt{display:block;padding:0 3px;margin:0 -3px;background:var(--mf-bg);transform:translateY(105%)}
.mf-rt-ls{position:absolute;left:0;right:calc(3px + .12em);top:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center}
.mf-rt-el{position:absolute;left:-4px;top:0;padding:0 4px;background:var(--mf-bg);font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mf-rt-el .core-roll{vertical-align:top}
/* 55% of the ink, as a solid mix on a band of the region's own colour, so a rule passing behind it never strikes it */
.mf-rt-cap{position:absolute;left:-4px;top:calc(100% + 10px);margin:0;padding:0 4px;font-family:var(--mono);font-size:10px;line-height:14px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--mf-fg) 55%,var(--mf-bg));background:var(--mf-bg)}
.mf-rt-pl{display:none}

/* ================================================================ phones and small tablets */
@media (max-width:979.98px){
  main.mf{--mf-fs:24px;--mf-xl:40px;--mf-xxl:56px}
  #mfHead{padding-top:calc(76px + 40px)}
  #mfHead>.pg-grid{margin-bottom:48px}
  .mf-h1{font-size:44px}
  .mf-meta{display:block}
  .mf-by{display:flex;align-items:center;min-height:44px}
  .mf-idx ol{display:block}
  .mf-idx li{border-top:1px solid rgba(242,242,242,.16)}
  .mf-l.mf-xxl{margin-right:0}
  .mf-ch{padding-top:14vh}
  .mf-pro{padding-top:24px}
  .mf-hd{margin-top:28px}
  .mf-hd+.mf-body{margin-top:48px}
  .mf-body.mf-pr{grid-template-columns:minmax(0,1fr);gap:48px}
  .mf-p .mf-l{font-size:20px}
  .mf-doors{flex-direction:column;align-items:stretch;gap:12px}
  .mf-doors .btn{display:flex;width:100%;height:52px}
  .mf-doors .pg-link{align-self:flex-start}

  /* the instrument becomes a 40px strip under the nav: the display's second line */
  .mf-rt{left:0;right:0;top:var(--nav-h);width:auto;height:40px;z-index:59;padding:0 var(--g);background:var(--pg-bg);
    border-bottom:1px solid var(--pg-rule);opacity:1;clip-path:inset(0 0 100% 0);
    transition:clip-path .35s var(--in),visibility 0s linear .35s}
  .mf-rt.is-on{opacity:1;clip-path:inset(0);transition:clip-path .45s var(--out),visibility 0s}
  .mf-rt.is-menu{visibility:hidden;transition:none}
  .mf-rt-l,.mf-rt-el,.mf-rt-cap{display:none}
  .mf-rt-pl{display:block;position:absolute;top:12px;font-family:var(--mono);font-size:9.5px;line-height:16px;letter-spacing:.08em;
    text-transform:uppercase;white-space:nowrap}
}

/* ================================================================ forced colours and print */
@media (forced-colors:active){
  .mf-way-l{forced-color-adjust:none;background:CanvasText}
  .mf-dash{forced-color-adjust:none;background-image:linear-gradient(CanvasText,CanvasText)}
  .mf-way b{border:1px solid CanvasText}
  .mf-rt-h{display:none}
}
@media print{
  .mf-rt{display:none!important}
  #mfHead{min-height:0}
  main.mf .ln>span{transform:none!important}
  main.mf :is(p.mf-l,h3){visibility:visible!important}
}

/* ================================================================ reduced motion: everything static, the instrument changes state instantly */
html.reduce .mf-rt,html.reduce .mf-rt.is-on{transition:none}
html.reduce .mf-idx a{transition:none}