/* Deepak Lalan. Stone and chalk. One line carries the page. */

@font-face{font-family:"Spectral";src:url(../assets/fonts/spectral-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url(../assets/fonts/spectral-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url(../assets/fonts/spectral-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url(../assets/fonts/spectral-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url(../assets/fonts/spectral-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url(../assets/fonts/archivo.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --slate:#183429;   /* the dark "board" ground: dark bottle green */
  --slate-2:#1f3f33;
  --chalk:#ebe7df;
  --chalk-70:rgba(235,231,223,.72);
  --chalk-40:rgba(235,231,223,.42);
  --chalk-18:rgba(235,231,223,.18);
  --lime:#e7e1d5;
  --lime-2:#efeae0;
  --graphite:#183429;
  --graphite-70:color-mix(in oklab, #183429 72%, #e7e1d5);
  --graphite-40:color-mix(in oklab, #183429 40%, #e7e1d5);
  --graphite-18:color-mix(in oklab, #183429 18%, #e7e1d5);
  --amber:#e2b062;
  --amber-bright:#f0c77c;
  --amber-ink:#8f5a12;
  --ember:#8a3b2a;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:64px;
  --gap:clamp(24px,4vw,72px);
  --pad:clamp(16px,4vw,48px);
  --sec:clamp(104px,14vh,184px);
  --ease:cubic-bezier(.16,1,.3,1);
  --stroke:1.5;
  --ground:var(--slate);
  --ink:var(--chalk);
  --ink-2:var(--chalk-70);
  --rule:var(--chalk-18);
  color-scheme:dark;
}
.pt--jog1{top:22%!important;left:calc(50% + var(--jog))!important}
.pt--jog2{top:62%!important;left:calc(50% + var(--jog))!important}
:root{--jog:44px}
@media (max-width:900px){:root{--gutter:28px;--jog:22px}}

*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--slate);
  color:var(--chalk);
  font:400 1.125rem/1.6 var(--serif);
  font-feature-settings:"kern","liga","onum";
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--amber);color:var(--slate)}
html{scrollbar-width:thin;scrollbar-color:var(--chalk-40) var(--slate)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--slate)}
::-webkit-scrollbar-thumb{background:var(--chalk-40);border-radius:8px;border:2px solid var(--slate)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
p{margin:0 0 1.1em}
h1,h2,h3,h4{margin:0;font-weight:300;line-height:1.05;letter-spacing:-.018em;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
em{font-style:italic;font-weight:300}
q{quotes:"\201C" "\201D"}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:8px;left:8px;z-index:100;padding:.6rem 1rem;background:var(--amber);color:var(--slate);font:500 .9rem/1.35 var(--sans);transform:translateY(-200%);transition:transform .2s}
.skip:focus{transform:none}

/* Grounds */
[data-ground]{position:relative;background-color:var(--ground);background-image:url(../assets/img/grain.svg);background-size:240px 240px;color:var(--ink)}
[data-ground="lime"]{--ground:var(--lime);--ink:var(--graphite);--ink-2:var(--graphite-70);--rule:var(--graphite-18);color-scheme:light}
[data-ground="slate"]{--ground:var(--slate);--ink:var(--chalk);--ink-2:var(--chalk-70);--rule:var(--chalk-18)}
[data-ground="lime"] ::selection{background:var(--graphite);color:var(--amber)}

/* Type */
.display{font-size:clamp(2.35rem,4.6vw,4rem);margin-bottom:.55em}
.hero__h{font-size:clamp(2.75rem,6.2vw,5.5rem);line-height:.98;letter-spacing:-.025em;margin-bottom:.35em}
.lead{font-size:clamp(1.22rem,1.45vw,1.42rem);line-height:1.5;font-weight:300;max-width:58ch}
.copy p{max-width:62ch}
.copy .lead{max-width:50ch}
.copy--wide p{max-width:66ch}
.label{font:500 .8rem/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0 0 1.3rem}
.copy .display + p{margin-top:1.4rem}
.copy .lead + p{margin-top:1.1rem}
.copy p:not(.lead){color:var(--ink-2)}
.copy .lead{color:var(--ink)}
.copy em,.copy strong{color:var(--ink)}

/* Layout */
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.rail{display:grid;grid-template-columns:var(--gutter) minmax(0,1fr);column-gap:var(--gap)}
.gutter{position:relative;min-height:100%}
.pt{position:absolute;left:50%;top:0;width:0;height:0;pointer-events:none}
.pt--end{top:100%}
section{padding-block:var(--sec)}
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:1.8rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font:500 .95rem/1 var(--sans);letter-spacing:.005em;
  padding:.95rem 1.35rem;border:1px solid currentColor;border-radius:3px;
  text-decoration:none;cursor:pointer;background:transparent;color:inherit;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .25s var(--ease);
}
.btn--small{padding:.65rem 1rem;font-size:.85rem}
.btn--primary{background:var(--amber);color:var(--slate);border-color:var(--amber)}
.btn--primary:hover{background:var(--amber-bright);border-color:var(--amber-bright);transform:translateY(-1px)}
[data-ground="lime"] .btn--primary{background:var(--graphite);color:var(--chalk);border-color:var(--graphite)}
[data-ground="lime"] .btn--primary:hover{background:#10241c;border-color:#10241c}
.btn--line{position:relative;border-color:transparent;padding-inline:0;padding-block:.6rem;border-radius:0}
.btn--line::after{content:"";position:absolute;left:0;right:0;bottom:.25rem;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform .45s var(--ease)}
.btn--line:hover::after,.btn--line:focus-visible::after{transform:scaleX(1)}
.btn--line::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.btn--line:hover::before{background:var(--amber)}
[data-ground="lime"] .btn--line:hover::before{background:var(--amber-ink)}

/* Nav */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:50;height:68px;isolation:isolate;
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.5rem;
  padding-inline:var(--pad);
  color:var(--chalk);
}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background-color:var(--slate);background-image:url(../assets/img/grain.svg);background-size:240px 240px;opacity:.96}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.12}
/* Brand lockup: the supplied emblem beside the supplied wordmark. The bar and footer stay slate so the yellow reads. */
.brand{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;line-height:0;border-radius:2px}
.brand__emblem{height:36px;width:auto;transition:transform .8s var(--ease)}
.brand__word{height:34px;width:auto}
.brand:hover .brand__emblem,.brand:focus-visible .brand__emblem{transform:rotate(90deg)}
.brand--foot{gap:1rem}
.brand--foot .brand__emblem{height:52px}
.brand--foot .brand__word{height:48px}
.nav__links{display:flex;gap:1.5rem;justify-content:center;font:400 .88rem/1.35 var(--sans)}
.nav__links a{text-decoration:none;opacity:.8;position:relative;padding-block:.25rem}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a:hover,.nav__links a.is-current{opacity:1}
.nav__links a:hover::after,.nav__links a.is-current::after{transform:scaleX(1)}
.nav__menu{display:none;position:relative;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;margin-right:-10px}
.nav__menu-bar{position:absolute;left:11px;width:22px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.nav__menu-bar:nth-child(1){top:18px}.nav__menu-bar:nth-child(2){top:25px}
.nav__menu[aria-expanded="true"] .nav__menu-bar:nth-child(1){top:21px;transform:rotate(45deg)}
.nav__menu[aria-expanded="true"] .nav__menu-bar:nth-child(2){top:21px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:40;background:var(--slate);background-image:url(../assets/img/grain.svg);color:var(--chalk);padding:110px var(--pad) 40px;overflow:auto}
.menu[hidden]{display:none}
.menu nav{display:grid;gap:.3rem}
.menu a{font:300 clamp(1.8rem,7vw,2.6rem)/1.3 var(--serif);text-decoration:none;letter-spacing:-.015em}
.menu a:hover{color:var(--amber)}
@media (max-width:900px){
  .nav{grid-template-columns:auto 1fr auto;gap:.75rem;height:64px}
  .brand{grid-column:1}
  .nav__cta{grid-column:2;justify-self:end}
  .nav__menu{grid-column:3;justify-self:end}
  .brand__emblem{height:32px}
  .brand__word{height:30px}
  .nav__links{display:none}
  .nav__menu{display:block}
  .nav__cta{padding:.55rem .8rem;font-size:.8rem}
  html{scroll-padding-top:76px}
}
@media (max-width:420px){.nav__cta{display:none}}

/* The spine */
main{position:relative}
.spine{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:3;overflow:visible}
.no-js .spine,.no-js .chalk{display:none}
/* the chalk line: a canvas the height of 1.6 screens, moved with the reader (see chalkFrame in main.js) */
.chalk{position:absolute;top:0;left:0;pointer-events:none;z-index:3;will-change:transform}
.spine__path{opacity:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.spine__path{stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spine__sat path,.spine__sat line{fill:none;stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spine__sat .node{stroke-width:2.6;transition:fill .4s var(--ease),stroke .4s var(--ease)}
.spine__sat .node.is-lit{fill:var(--amber)!important;stroke:var(--amber)!important}
.spine__sat .pad{transition:fill .35s var(--ease)}
.spine__sat .pad.is-lit{fill:var(--amber)!important}
.spine__sat .stub,.spine__sat .spur{opacity:.0;transition:opacity .5s var(--ease)}
.spine__sat .stub.is-lit,.spine__sat .spur.is-lit{opacity:1}
.spine__sat .spur-node{opacity:0;transition:opacity .5s var(--ease),fill .4s var(--ease)}
.spine__sat .spur-node.is-lit{opacity:1}
.spine__sat .dead{stroke-dasharray:4 7;opacity:.55}
.spine__sat .ring{opacity:.35}
.spine__sat .end-node{r:7.5}
.spine__tip{transition:opacity .3s}
.spine__core{fill:var(--amber-bright)}
.spine.is-done .spine__tip{opacity:0}

/* Intro: a point cloud forms the question mark and the title, then hands off to the hero.
   If the script never starts, the overlay hides itself after 9s, so the page can never be trapped. */
.intro{display:none;position:fixed;inset:0;z-index:200;background-color:var(--slate);background-image:url(../assets/img/grain.svg);background-size:240px 240px}
.js.has-intro .intro{display:block}
.js.has-intro:not(.intro-running) .intro{animation:introFailsafe .6s ease 9s forwards} /* only if the script never started */
.intro__canvas{position:absolute;inset:0;width:100%;height:100%}
.intro__skip{position:absolute;right:max(16px,var(--pad));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:none;border:0;padding:14px 4px;color:var(--chalk-70);font:500 .8rem/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;opacity:0;transition:opacity .6s ease .8s,color .2s ease}
.intro__skip.is-on{opacity:1}
.intro__skip:hover,.intro__skip:focus-visible{color:var(--chalk)}
.intro.is-out{opacity:0;transition:opacity .8s ease;pointer-events:none}
@keyframes introFailsafe{to{opacity:0;visibility:hidden}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
html.intro-lock{overflow:hidden}
.js.intro-active .hero .hero__mark,.js.intro-active .hero .hero__h,.js.intro-active .hero .hero__lead,.js.intro-active .hero .hero__title,.js.intro-active .hero .hero__actions{opacity:0}
.js.intro-in .hero .hero__mark,.js.intro-in .hero .hero__h{animation:fadein .7s ease both}
.js.intro-in .hero .hero__lead{animation:rise .9s var(--ease) .35s both}
.js.intro-in .hero .hero__title{animation:rise .9s var(--ease) .5s both}
.js.intro-in .hero .hero__actions{animation:rise .9s var(--ease) .65s both}

/* Reading highlight: words arrive dim and light up as the reading line passes. Words exist only when the engine runs. */
.w{opacity:1;transition:opacity .12s linear}
.js.has-engine .w{opacity:.4}

/* Reveals: visible by default; hidden only when the engine is live */
.js.has-engine .rv:not(.is-on){opacity:0;transform:translateY(14px)}
.measuring .rv{transform:none!important;transition:none!important}
.rv{transition:opacity .7s var(--ease),transform .9s var(--ease)}
.js.has-engine [data-lit]:not(.is-lit):not([data-lit="words"]){opacity:.4}
[data-lit]{transition:opacity .6s var(--ease),color .6s var(--ease)}

/* Hero */
.hero{min-height:100svh;display:grid;align-items:center;padding-block:120px 96px}
.hero__grid{display:grid;grid-template-columns:minmax(200px,34%) minmax(0,1fr);gap:var(--gap);align-items:center;width:100%}
.hero__mark{margin:0;position:relative;aspect-ratio:1/2;height:min(66vh,620px);max-width:100%;justify-self:end}
.qmark{width:100%;height:100%;overflow:visible}
.qmark__hook{fill:none;stroke:var(--chalk);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;filter:url(#chalkify)}
.js .qmark__hook{stroke:transparent;filter:none}
.qmark__chalk{position:absolute;left:-28px;top:-130px;width:calc(100% + 56px);height:calc(100% + 158px);max-width:none;pointer-events:none}
.qmark__dot{fill:var(--amber)}
.js .hero.is-arriving .qmark__dot{animation:pop .5s var(--ease) 1.15s both}
.js .hero.is-arriving .hero__h{animation:rise .9s var(--ease) .35s both}
.js .hero.is-arriving .hero__lead{animation:rise .9s var(--ease) .5s both}
.js .hero.is-arriving .hero__title{animation:rise .9s var(--ease) .62s both}
.js .hero.is-arriving .hero__actions{animation:rise .9s var(--ease) .74s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0);transform-origin:150px 470px;transform-box:view-box}to{transform:scale(1);transform-origin:150px 470px;transform-box:view-box}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__copy{max-width:640px}
.hero__title{font:400 .95rem/1.5 var(--sans);color:var(--ink-2);max-width:46ch;margin-top:1.2rem}
.hero__lead{max-width:54ch}
@media (max-width:900px){
  .hero{padding-top:96px;align-items:start}
  .hero__grid{grid-template-columns:1fr;gap:1.25rem}
  .hero__mark{height:200px;justify-self:start;margin-left:-4px}
  .hero__copy{padding-left:calc(var(--gutter) + var(--gap))}
}

/* Manifesto */
.manifesto{padding-top:calc(var(--sec) * .7)}
.stanza{margin-top:2rem;font-size:clamp(1.15rem,1.4vw,1.35rem);line-height:1.5;display:grid;gap:.35rem;color:var(--ink-2)}
.stanza em{color:var(--ink);font-style:italic}
.phrases{margin-top:clamp(64px,10vh,120px);display:grid}
.phrase{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;min-height:38vh}
.phrase p{margin:0;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.08;font-weight:300;letter-spacing:-.02em;color:var(--chalk)}
.phrase--l p{grid-column:1;text-align:right;padding-right:clamp(16px,3vw,40px)}
.phrase--r p{grid-column:3;padding-left:clamp(16px,3vw,40px)}
.phrase .pt{grid-column:2;position:relative;left:auto;top:auto;justify-self:center}
.phrase.is-lit p{color:var(--chalk)}
.phrase:not(.is-lit) p{color:var(--chalk)}
@media (max-width:900px){
  .phrase{grid-template-columns:var(--gutter) 1fr;column-gap:var(--gap);min-height:30vh}
  .phrase--l p,.phrase--r p{grid-column:2;text-align:left;padding:0}
  .phrase .pt{grid-column:1}
}

/* About */
.about__body{display:grid;row-gap:clamp(56px,9vh,110px)}
.about__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gap);min-height:118vh;align-items:start}
.about__fig{margin:0;position:sticky;top:18vh}
.fig-measure .about__fig,.fig-measure .identity__fig,.fig-measure .innovation__fig{position:relative!important;top:auto!important}
.evolve{width:100%;aspect-ratio:1;overflow:visible;filter:url(#chalkify)}
.evolve .e-node{fill:var(--lime);stroke:var(--graphite);stroke-width:3.2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease),fill .4s}
.evolve .e-node.is-core{fill:var(--amber)}
.evolve .e-edge{fill:none;stroke:var(--graphite);stroke-width:4.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.evolve .e-edge.is-frame{stroke-width:calc(var(--stroke) * 1)}
.evolve__labels{display:flex;justify-content:space-between;margin-top:1.2rem;font:500 .8rem/1.35 var(--sans);color:var(--ink-2);gap:.5rem;flex-wrap:wrap}
.evolve__labels span{opacity:.45;transition:opacity .4s,color .4s;position:relative;padding-top:.6rem}
.evolve__labels span::before{content:"";position:absolute;top:0;left:0;width:14px;height:1px;background:currentColor}
.evolve__labels span.is-on{opacity:1}
.evolve__labels span.is-now{color:var(--amber-ink)}
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:2rem}
.creds li{padding:1.25rem 1.2rem 1.25rem 0;padding-left:1.2rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);font:400 .95rem/1.4 var(--sans);color:var(--ink);display:flex;align-items:flex-start;gap:.8rem;min-height:92px}
.creds li::before{content:"";flex:none;width:6px;height:6px;border:1px solid var(--graphite);border-radius:50%;margin-top:.45em}
.creds li:nth-child(3)::before,.creds li:nth-child(4)::before{background:var(--amber);border-color:var(--amber)}
@media (max-width:900px){
  .about__top{grid-template-columns:1fr;min-height:0;row-gap:48px}
  .about__fig{position:relative;top:auto;max-width:360px}
}

/* Philosophy */
.philosophy{padding-block:calc(var(--sec) * 1.1)}
.philosophy .display{max-width:16ch}

/* Four movements */
.movements{padding-block:calc(var(--sec) * .5) 0}
.chapter{min-height:100svh;display:grid;align-items:center;padding-block:clamp(72px,10vh,128px)}
.chapter__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--gap);align-items:center;width:100%}
.chapter__grid--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.chapter__copy--center{text-align:center;margin-inline:auto;max-width:60ch}
.chapter__copy--center p{margin-inline:auto}
.chapter__after{position:relative;text-align:left;margin:clamp(40px,6vh,72px) 0 0 calc(50% + 48px);max-width:30ch}
.chapter .display{font-size:clamp(2.6rem,5.4vw,4.6rem)}
.glyph{position:relative;width:100%}
.pt--rail{display:none}
.chapter__copy{position:relative}
.glyph__n{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border:1px solid var(--chalk-40);border-radius:50%;background:var(--slate);color:var(--chalk);font:500 .85rem/1.35 var(--sans);display:grid;place-items:center;z-index:4;transition:border-color .4s,color .4s}
.glyph.is-lit .glyph__n{border-color:var(--amber);color:var(--amber)}
.glyph--spiral{aspect-ratio:1;max-width:520px;justify-self:center}
.glyph--fork{aspect-ratio:1/1;max-width:620px;min-height:420px;justify-self:end;--fork-j:.26;--fork-main:.08;--fork-dead-x:-.28;--fork-dead-y:.58}
.fork__dead,.fork__taken{position:absolute;margin:0;font-size:1.15rem;line-height:1.4}
.fork__dead{left:0;top:63%;width:40%;color:var(--chalk-70);text-align:right}
.fork__dead q{display:block;font-size:1.2em;font-weight:300;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--amber);color:var(--chalk)}
.fork__taken{left:64%;top:40%;width:36%;color:var(--chalk-70)}
.fork__taken q{display:block;font-size:1.2em;font-weight:300;color:var(--chalk)}
.fork__tail{font:500 .85rem/1.35 var(--sans);display:block;margin-top:.5rem;color:var(--chalk-70)}
.fork__taken.is-lit .fork__tail{color:var(--amber)}
.glyph--split{margin-top:clamp(40px,6vh,80px);min-height:380px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,8vw,120px);padding:clamp(56px,9vh,96px) clamp(24px,8vw,120px) clamp(40px,8vh,80px)}
.split__col{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.5}
.split__col--l{text-align:right}
.split__name{font:500 .85rem/1.35 var(--sans);color:var(--amber);margin-bottom:.8rem}
.split__col ul{display:grid;gap:.25rem;color:var(--chalk)}
.glyph--zigzag{aspect-ratio:4/5;max-width:560px;min-height:420px;justify-self:center}
.zig__label{position:absolute;top:calc((var(--i) + 1) / 9 * 100%);transform:translateY(-50%);font:500 .85rem/1.35 var(--sans);color:var(--chalk-70);white-space:nowrap;transition:color .4s}
.zig__label--r{left:81%}
.zig__label--l{right:81%;text-align:right}
.zig__label.is-lit{color:var(--chalk)}
@media (max-width:900px){
  .chapter{min-height:0}
  .chapter__grid,.chapter__grid--flip{grid-template-columns:1fr;gap:2rem}
  .chapter__grid--flip .glyph{order:2}
  .chapter__grid--flip .chapter__copy{order:1}
  .glyph--spiral{max-width:360px;justify-self:start}
  /* on a phone the fork turns around: the road taken runs down the left, the dead end branches right */
  .glyph--fork{max-width:100%;aspect-ratio:auto;min-height:560px;justify-self:stretch;--fork-j:.12;--fork-main:-.3;--fork-dead-x:.3;--fork-dead-y:.32}
  .fork__dead{left:52%;top:35%;width:48%;text-align:left}
  .fork__taken{left:30%;top:57%;width:70%}
  .glyph--split{grid-template-columns:1fr;gap:2rem;padding:150px 24px 150px 56px;min-height:0}
  .pt--rail{display:block;left:calc(var(--gutter) / 2)!important;top:0}
  .pt--rail-end{top:100%}
  .chapter__copy{padding-left:calc(var(--gutter) + var(--gap));margin-top:56px}
  .chapter__grid--flip .chapter__copy{margin-top:0;margin-bottom:56px}
  .chapter__after{margin:40px 0 0;padding-left:calc(var(--gutter) + var(--gap));max-width:none}
  .split__col--l{text-align:left}
  .glyph--zigzag{max-width:100%;justify-self:start;min-height:380px}
  .zig__label{font-size:.78rem}
}

/* Identity */
.identity__body{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--gap);align-items:center}
.beliefs{margin-top:1.6rem;display:grid;gap:.5rem;max-width:56ch}
.beliefs li{position:relative;padding-left:1.4rem;color:var(--chalk)}
.beliefs li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;border-radius:50%;border:1px solid var(--amber)}
.beliefs li:nth-child(odd)::before{background:var(--amber)}
.identity__fig{margin:0;position:sticky;top:14vh}
.idcanvas{width:100%;aspect-ratio:5/6;height:auto}
.identity__legend{display:flex;gap:1.5rem;justify-content:center;margin-top:.8rem;font:500 .8rem/1.35 var(--sans);color:var(--chalk-70)}
.identity__legend span{display:inline-flex;align-items:center;gap:.5rem}
.identity__legend span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}
.legend__dark::before{background:transparent!important;border:1px solid var(--chalk-40)}
@media (max-width:900px){.identity__body{grid-template-columns:1fr}.identity__fig{position:relative;top:auto;max-width:420px}}

/* Ventures */
.ventures__body{display:grid;gap:clamp(40px,6vh,72px)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.slab{position:relative;background:var(--slate);background-image:url(../assets/img/grain.svg);color:var(--chalk);padding:1.75rem 1.75rem 1.4rem;border-radius:4px;display:flex;flex-direction:column;min-height:260px}
.slab--wide{grid-column:span 2}
.slab--principles{grid-column:1 / -1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:2rem;align-items:start}
.slab__name{font:300 clamp(1.6rem,2.4vw,2.2rem)/1.1 var(--serif);letter-spacing:-.015em;margin:0}
.slab__role{font:500 .85rem/1.35 var(--sans);color:var(--chalk-70);margin:.6rem 0 0}
.slab__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.slab__inner{overflow:hidden;min-height:0}
.slab__inner p{margin-top:1.4rem;color:var(--chalk);max-width:52ch}
.slab__inner p + p{margin-top:.2rem}
.slab.is-open .slab__more{grid-template-rows:1fr}
.slab__toggle{margin-top:auto;padding-top:1.6rem;align-self:flex-start;background:none;border:0;color:var(--chalk);font:500 .85rem/1.35 var(--sans);display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;padding-inline:0}
.slab__toggle-close{display:none}
.slab.is-open .slab__toggle-open{display:none}
.slab.is-open .slab__toggle-close{display:inline}
.slab__plus{position:relative;width:14px;height:14px}
.slab__plus::before,.slab__plus::after{content:"";position:absolute;background:var(--amber);left:0;top:6.5px;width:14px;height:1.5px;transition:transform .4s var(--ease)}
.slab__plus::after{transform:rotate(90deg)}
.slab.is-open .slab__plus::after{transform:rotate(0)}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem 1.5rem;counter-reset:p}
.principles li{counter-increment:p;font-size:1rem;line-height:1.4;color:var(--chalk);padding-top:.8rem;border-top:1px solid var(--chalk-18)}
.principles li::before{content:counter(p);display:block;font:500 .75rem/1.35 var(--sans);color:var(--amber);margin-bottom:.35rem}
@media (max-width:900px){.bento{grid-template-columns:1fr}.slab{min-height:0}.slab--wide{grid-column:auto}.slab--principles{grid-template-columns:1fr;gap:1rem}.slab__toggle{padding-top:1.2rem}}

/* Books */
.books__body{display:grid;gap:clamp(96px,14vh,160px)}
.spread{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:center}
.spread--jargon{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.spread__object{display:grid;place-items:center;min-height:420px}
.book__sub{font:300 italic 1.3rem/1.4 var(--serif);color:var(--ink-2);margin:-.3rem 0 1.3rem;max-width:40ch}
.book__out{font:500 .9rem/1.35 var(--sans);color:var(--ink)}
.book{position:relative;width:min(270px,70vw);aspect-ratio:2/3;perspective:1400px;transform-style:preserve-3d}
.book__cover{position:absolute;inset:0;border-radius:3px 8px 8px 3px;padding:1.5rem 1.4rem;display:flex;flex-direction:column;box-shadow:0 30px 50px -28px rgba(16,36,28,.6),inset 6px 0 0 -3px rgba(0,0,0,.18);transform-origin:left center;transition:transform .9s var(--ease)}
.book__cover::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}
.book__title{font:300 1.6rem/1.08 var(--serif);letter-spacing:-.015em;margin:0}
.book__tag{font:300 .95rem/1.3 var(--serif);font-style:italic;margin:.6rem 0 0;opacity:.85;text-wrap:balance}
.book__author{margin-top:auto;font:500 .75rem/1.35 var(--sans);letter-spacing:.02em}
.book--identity .book__cover{background:var(--slate);background-image:url(../assets/img/grain.svg);color:var(--chalk)}
.book__figure{height:38%;margin:0 0 1.2rem;background-image:radial-gradient(circle,var(--chalk) .9px,transparent 1.3px);background-size:10px 10px;-webkit-mask:radial-gradient(circle at 50% 28%,#000 24%,transparent 25%),radial-gradient(ellipse at 50% 115%,#000 48%,transparent 49%);mask:radial-gradient(circle at 50% 28%,#000 24%,transparent 25%),radial-gradient(ellipse at 50% 115%,#000 48%,transparent 49%);position:relative}
.book__figure::after{content:"";position:absolute;left:46%;top:54%;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(226,176,98,.25)}
.scene{position:relative;width:min(270px,70vw);aspect-ratio:2/3;--p:0;--amp:1}
.book--jargon{width:100%;height:100%}
.book--jargon .book__cover{background:var(--amber);color:var(--slate);z-index:2;backface-visibility:hidden}
.book--jargon .book__cover .book__title{font-size:1.5rem}
.book--jargon .book__cover .book__tag{opacity:.8}
.book__page{position:absolute;inset:0;background:var(--lime-2);color:var(--graphite);border-radius:3px 8px 8px 3px;padding:1.1rem 1rem;box-shadow:0 30px 50px -28px rgba(16,36,28,.5);overflow:auto;transition:opacity .4s var(--ease)}
.page__head{font:400 .75rem/1.35 var(--sans);color:var(--graphite-70);margin-bottom:.7rem}
.defs{display:grid;gap:.3rem;font-size:.76rem;line-height:1.3}
.defs dt{font:500 .74rem/1.35 var(--sans);color:var(--amber-ink)}
.defs dd{margin:0 0 .15rem;color:var(--graphite)}
.page__note{font:400 .66rem/1.35 var(--sans);color:var(--graphite-70);margin:.8rem 0 0}
.scene.is-open .book__cover{transform:rotateY(-158deg)}
.scene.is-open .word{opacity:0;pointer-events:none}
.word{
  position:absolute;left:50%;top:0;z-index:3;margin:0;
  font:400 .95rem/1.35 var(--serif);color:var(--graphite);
  transform:translate(calc(var(--fx) * var(--k,1) * (1 - var(--p)) + var(--tx) * var(--p)),calc(var(--fy) * var(--k,1) * (1 - var(--p)) + var(--ty) * var(--p)));
  transition:opacity .4s var(--ease),color .4s;
  white-space:nowrap;
}
.word > *{display:block}
.word::after{content:"";display:block;height:1px;background:currentColor;opacity:calc(var(--p) * .5);margin-top:2px}
.word__in{display:block;animation:drift 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(calc(var(--amp) * 9px),calc(var(--amp) * -12px))}}
.scene[style*="--p:1"] .word,.scene.is-set .word{color:var(--slate)}
@media (max-width:900px){
  .spread,.spread--jargon{grid-template-columns:1fr}
  .spread--jargon .spread__copy{order:1}.spread--jargon .spread__object{order:2}
  .spread__object{min-height:0;padding-block:2rem;justify-items:start}
  .word{--k:.45}
}

/* Innovation */
.innovation__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--gap);align-items:center}
.innovation__fig{margin:0;position:sticky;top:16vh}
.sketch{width:100%;aspect-ratio:480/440;overflow:visible;filter:url(#chalkify)}
.sketch path{fill:none;stroke:var(--chalk);stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sketch .ghost{opacity:.35}
.sketch .vtx{fill:var(--slate);stroke:var(--chalk);stroke-width:3.2;vector-effect:non-scaling-stroke}
.sketch .vtx.is-core{fill:var(--amber);stroke:var(--amber)}
.filters__head{font:500 .85rem/1.35 var(--sans);color:var(--chalk-70);margin:1.8rem 0 .6rem}
.filters{counter-reset:f;display:grid;gap:.1rem;max-width:40ch}
.filters li{counter-increment:f;display:grid;grid-template-columns:2rem 1fr;align-items:baseline;padding:.55rem 0;border-top:1px solid var(--chalk-18);color:var(--chalk);font-size:1.1rem}
.filters li:last-child{border-bottom:1px solid var(--chalk-18)}
.filters li::before{content:counter(f);font:500 .78rem/1.35 var(--sans);color:var(--amber)}
@media (max-width:900px){.innovation__body{grid-template-columns:1fr}.innovation__fig{position:relative;top:auto;max-width:420px}}

/* Speaking */
.speaking{padding-bottom:calc(var(--sec) * .8)}
.talks{margin-top:clamp(56px,9vh,96px)}
.talks__head{font:500 .9rem/1.35 var(--sans);color:var(--ink-2);text-align:center;margin-bottom:2.5rem}
.route{display:grid;position:relative}
.route__out{left:50%}
.talks__cta{position:relative}
.pt--cta{left:calc(var(--gutter) / 2)!important;top:0}
.talk{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;min-height:30vh}
.talk .pt{grid-column:2;position:relative;left:auto;top:auto;justify-self:center}
.talk--l .talk__card{grid-column:1;text-align:right;padding-right:clamp(16px,3vw,48px);justify-self:end}
.talk--r .talk__card{grid-column:3;padding-left:clamp(16px,3vw,48px)}
.talk__card{max-width:34ch}
.talk__name{font:300 clamp(1.5rem,2.4vw,2.1rem)/1.1 var(--serif);letter-spacing:-.015em;margin:0}
.talk__sub{font:400 1rem/1.4 var(--serif);color:var(--ink-2);margin:.5rem 0 .7rem}
.talk__ask{font:500 .82rem/1.35 var(--sans);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--graphite-40);padding-bottom:2px;transition:border-color .3s}
.talk__ask:hover{border-color:var(--graphite)}
.talks__cta{text-align:left;margin-top:clamp(72px,10vh,120px);padding-left:calc(var(--gutter) + var(--gap))}
@media (max-width:900px){
  .talk{grid-template-columns:var(--gutter) 1fr;column-gap:var(--gap);min-height:22vh}
  .talk .pt{grid-column:1}
  .talk--l .talk__card,.talk--r .talk__card{grid-column:2;text-align:left;padding:0;justify-self:start}
  .talks__head{text-align:left}
  .route__out{left:calc(var(--gutter) / 2)}
}

/* Consulting */
.consulting__body{display:grid;gap:clamp(56px,9vh,96px)}
.formats__head{font:500 .9rem/1.35 var(--sans);color:var(--ink-2);margin-bottom:1rem}
.formats__table{width:100%;border-collapse:collapse;font-size:1.02rem;line-height:1.4}
.formats__table th,.formats__table td{text-align:left;vertical-align:top;padding:1.05rem 1.25rem 1.05rem 0;border-bottom:1px solid var(--rule)}
.formats__table thead th{font:500 .8rem/1.35 var(--sans);color:var(--ink-2);padding-bottom:.6rem;border-bottom-color:var(--graphite-40)}
.formats__table tbody th{font:500 1.05rem/1.35 var(--serif);color:var(--ink);width:24%}
.formats__table td{color:var(--ink-2)}
.formats__table td:last-child{color:var(--ink);padding-right:0}
.booking{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:start;padding-top:clamp(40px,6vh,64px);border-top:1px solid var(--graphite-40)}
.booking__copy{max-width:36ch}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2rem}
.field{display:grid;gap:.35rem}
.field--full{grid-column:1 / -1}
.field label{font:500 .82rem/1.35 var(--sans);color:var(--ink-2)}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--graphite-40);border-radius:0;padding:.55rem 0;font:400 1.1rem/1.4 var(--serif);color:var(--ink);resize:vertical;transition:border-color .25s}
.field input:focus,.field textarea:focus{outline:none;border-bottom:1px solid var(--graphite);box-shadow:0 1px 0 0 var(--graphite)}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:var(--ember)}
.field__err{font:500 .8rem/1.35 var(--sans);color:var(--ember)}
.form__foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:.5rem}
.form__status{margin:0;font:400 .95rem/1.35 var(--serif);color:var(--ink)}
.form__status.is-error{color:var(--ember)}
.form__status a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
@media (max-width:900px){
  .booking{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media (max-width:720px){
  .formats__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .formats__table tr{display:block;padding:1rem 0;border-bottom:1px solid var(--rule)}
  .formats__table th,.formats__table td{display:block;border:0;padding:.2rem 0;width:auto}
  .formats__table tbody th{width:auto;padding-bottom:.4rem}
  .formats__table td::before{content:attr(data-label);display:block;font:500 .72rem/1.35 var(--sans);color:var(--ink-2);margin-bottom:.1rem}
}

/* Personal */
.personal{overflow:hidden;min-height:92vh;display:grid;align-items:center}
.topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.topo path{fill:none;stroke:var(--graphite);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.16}
.topo .is-route{opacity:.55;stroke-dasharray:3 6}
.personal .rail{position:relative;z-index:2}
.personal .copy{max-width:52ch}

/* Closing */
.closing{min-height:100svh;display:grid;align-items:center;padding-bottom:calc(var(--sec) * .6)}
.closing__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);align-items:center}
.closing .display{font-size:clamp(2.6rem,5.6vw,4.8rem)}
.glyph--cube{aspect-ratio:1;max-width:460px;justify-self:center}
.cube__end{position:absolute;left:50%;top:calc(100% + 1.6rem);transform:translateX(-50%);font:500 .85rem/1.35 var(--sans);color:var(--chalk);white-space:nowrap}
.cube__end.is-lit{color:var(--amber)}
.closing__copy{position:relative}
@media (max-width:900px){.closing__grid{grid-template-columns:1fr}.closing__copy{padding-left:calc(var(--gutter) + var(--gap))}.glyph--cube{max-width:300px;justify-self:start;margin-top:72px}}

/* Progress track */
.track{position:fixed;left:var(--pad);bottom:24px;z-index:30;font:500 .72rem/1.35 var(--sans);color:var(--chalk);opacity:0;transition:opacity .5s var(--ease),color .35s var(--ease);pointer-events:none}
.track.is-visible{opacity:1}
.track[data-theme="lime"]{color:var(--graphite)}
.track ol{display:flex;gap:1.1rem}
.track li{position:relative;padding-top:.75rem;opacity:.62;transition:opacity .35s,color .35s}
.track li::before{content:"";position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;border:1px solid currentColor}
.track li.is-done{opacity:.75}
.track li.is-done::before{background:currentColor}
.track li.is-now{opacity:1;color:var(--amber)}
.track li.is-now::before{background:var(--amber);border-color:var(--amber)}
.track[data-theme="lime"] li.is-now{color:var(--amber-ink)}
.track[data-theme="lime"] li.is-now::before{background:var(--amber-ink);border-color:var(--amber-ink)}
@media (max-width:1100px){
  .track{left:auto;right:16px;bottom:16px;font-size:.68rem}
  .track ol{gap:.55rem}
  .track li{padding-top:.65rem}
  .track li:not(.is-now) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* Footer */
.foot{padding-block:3rem 2.5rem;border-top:1px solid var(--chalk-18)}
.foot__grid{display:grid;grid-template-columns:auto 1fr;gap:1rem 2rem;align-items:center}
.foot__links{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:flex-end;font:400 .85rem/1.35 var(--sans)}
.foot__links a{text-decoration:none;color:var(--chalk-70)}
.foot__links a:hover{color:var(--chalk)}
.foot__copy{grid-column:1 / -1;font:400 .78rem/1.35 var(--sans);color:var(--chalk-70);margin:.5rem 0 0}
@media (max-width:720px){.foot__grid{grid-template-columns:1fr}.foot__links{justify-content:flex-start}}

/* Reduced motion: every drawing complete, no travelling tip */
@media (prefers-reduced-motion:reduce){
  .js.intro-in .hero .hero__lead,.js.intro-in .hero .hero__title,.js.intro-in .hero .hero__actions{animation:fadein .6s ease both!important}
  .rv,[data-lit],.btn,.nav__links a::after,.slab__more,.book__cover,.word,.brand__emblem{transition:none!important}
  .js .hero.is-arriving .qmark__hook,.js .hero.is-arriving .qmark__dot,.js .hero.is-arriving .hero__h,.js .hero.is-arriving .hero__lead,.js .hero.is-arriving .hero__title,.js .hero.is-arriving .hero__actions{animation:none!important}
  .word__in{animation:none!important}
  .spine__tip{display:none}
}