:root{color-scheme:light;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background:#fff;-webkit-font-smoothing:antialiased;font-synthesis:none;
  --ink:#000;--ink-soft:rgba(0,0,0,.5);--blush:#f8cbda;--brand:#ec7aa4;
  --gutter:clamp(16px,3.4vw,48px);--frame:min(1180px,100%);--inset:clamp(20px,3.2vw,48px);--gap:clamp(6px,.55vw,8px);--edge:clamp(12px,1.25vw,20px);--bridge:clamp(28px,4.5svh,44px);
  --display:clamp(34px,4.6vw,68px);--text:clamp(18px,1.45vw,22px)}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;overscroll-behavior-y:none}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{overflow-x:hidden}
::selection{background:var(--blush);color:var(--ink)}

/* Masthead: Lithe shows at the top, cuts out while the manifesto is read, and cuts back in with the machine. */
.masthead{position:fixed;top:max(var(--edge),env(safe-area-inset-top));left:max(var(--edge),env(safe-area-inset-left));z-index:30;pointer-events:none}
.masthead.away{opacity:0}
.brand{display:block;padding:.3em .5em;background:#fff;font-size:21px;font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--brand)}

/* The sheet between the machine and the words: solid paper, so nothing shows through while reading. */
.veil{position:fixed;inset:0;z-index:5;pointer-events:none;background:#fff}

/* One grotesk for all text: display, body, and small labels (Manifesto, Solution). */
.manifesto{position:relative;z-index:10;color:var(--ink);font-weight:500;font-kerning:normal;text-rendering:optimizeLegibility}
:where(.manifesto) :where(p,h2,h3){margin:0;font-weight:inherit}

.frame{width:var(--frame);margin-inline:auto;padding:var(--inset)}
.kicker{display:block;margin-bottom:clamp(14px,2vw,22px);font-size:13px;line-height:1;font-weight:500;letter-spacing:-.005em;color:var(--ink-soft)}

.hero{padding:clamp(56px,8svh,80px) var(--gutter) 0}
.hero .frame{padding-block:0}
.lede,.head{font-size:var(--display);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.lede{max-width:17em}

/* The plate: Muybridge's walking study, as supplied, top right. */
.plate-figure{width:min(88%,calc((100svh - 200px) * 1.683));margin:0 0 clamp(36px,6svh,64px) auto;container-type:inline-size}
.plate{position:relative}
.plate img{display:block;width:100%;height:auto}
/* On scroll, each box steps to the next frame, so all twelve walk at once, and a faint
   motion-capture trace cuts in (no fade) and follows the frames (plate.js). */
.plate canvas{position:absolute;inset:0;width:100%;height:100%}
.plate .reel{visibility:hidden}
.plate.moving .reel{visibility:visible}
.plate .trace{visibility:hidden;opacity:.62}
.plate.tracking .trace{visibility:visible}
/* The credit, very small, flush right under the plate; it scales with the plate (10px at full size, 7px at the least). */
.credit{margin-top:clamp(4px,.63cqw,6px);text-align:right;font-size:clamp(7px,1.05cqw,10px);line-height:1.2;letter-spacing:0;color:var(--ink-soft)}

/* The letter: one tight column; the first rule starts at the Manifesto label. */
.sheet{padding:0 var(--gutter) 30svh}
.copy{width:var(--frame);margin-inline:auto}
/* Each block keeps its text on the page grid; its rule sits just left of the text. */
.part{position:relative;margin-inline:calc(var(--inset) - var(--gap));padding-inline:var(--gap);border-left:1px solid var(--ink)}
/* The two blocks stand apart, each on its own rule, with a clear space between them. */
.part:not(.turn){margin-bottom:var(--bridge)}
.copy .turn .head{margin-top:0}
/* Both labels hang from their rules: each cap line meets the top of its rule. */
.part>.kicker,.turn .head .kicker{text-box:trim-start cap alphabetic}
@supports not (text-box:trim-start cap alphabetic){.part>.kicker,.turn .head .kicker{margin-top:-.16em}}
/* The answer, from the solution heading to the last line, is shifted right as a block. */
.turn{margin-left:auto;width:min(calc(var(--text) * 34 + var(--gap) * 2),calc(100% - (var(--inset) - var(--gap)) * 2))}
.copy p:not(.lede){max-width:34em;font-size:var(--text);line-height:1.32;letter-spacing:-.011em;text-wrap:pretty}
.copy .lede{margin-bottom:clamp(40px,7svh,80px)}
.copy p+p{margin-top:.85em}
.copy .head{margin:1.1em 0 .45em}

/* Highlights: a pale marker stroke through the x-height; static. */
mark{color:inherit;background:none}
.hl{--band:.56em;--lift:.15em;background-image:linear-gradient(var(--blush),var(--blush));background-repeat:no-repeat;background-position:left 0 bottom var(--lift);background-size:100% var(--band);padding:0 .06em;margin:0 -.06em}

#journey{height:300svh;position:relative}
.stage{position:fixed;top:0;left:0;right:0;height:100svh;overflow:hidden;isolation:isolate;background:#fff;z-index:0}
#model{position:absolute;inset:0;z-index:1}
#model canvas{display:block;width:100%;height:100%}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .28s ease;z-index:2}
.ready .poster{opacity:0}
#identity{position:absolute;z-index:3;left:50%;bottom:5.5svh;width:max-content;max-width:calc(100% - 32px);text-align:center;visibility:hidden;transform:translateX(-50%);pointer-events:none}
#wordmark{margin:0;font-size:clamp(96px,18vw,280px);font-weight:500;line-height:.8;letter-spacing:-.055em;white-space:nowrap}
/* Sized by app.js to span the wordmark exactly; 13px until then. */
#identity p{margin:26px 0 0;font-size:13px;line-height:1.35;font-weight:500;letter-spacing:-.005em;color:var(--ink-soft);white-space:nowrap}
.loading-line{position:absolute;bottom:0;left:0;height:1px;width:100%;transform:scaleX(.02);transform-origin:left;background:#000;z-index:5;transition:opacity .3s ease}
.ready .loading-line{opacity:0}
.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}

/* Film grain on the paper and the machine (tile drawn by manifesto.js), beneath the words and the plate. */
.grain{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.075;background-size:200px 200px}

@media(max-width:600px){#journey{height:260svh}#identity{bottom:12svh}#wordmark{font-size:clamp(80px,30vw,150px)}#identity p{margin-top:20px}
  .hero{padding-top:56px}}
@media(prefers-reduced-motion:reduce){#journey{height:200svh}.poster{transition:none}}