:root{--bg:#e8e8e3;--surface:#dcdcd6;--paper:#f3f3ef;--ink:#181715;--muted:#5d5c56;--accent:#c22b20;--on-accent:#f6f5f1;--field:#181715;--field-ink:#e8e8e3;--field-muted:#a9a8a1;
--m:28px;--edge:max(var(--m),calc((100vw - 1200px) / 2));--cw:680px;--col:min(560px,100% - 2 * var(--m));--left:var(--edge);
--s-small:clamp(.875rem,.85rem + .1vw,.9375rem);--s-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);--s-lead:clamp(1.5rem,1.3rem + .6vw,1.75rem);
--s-head:clamp(2.125rem,1.6rem + 1.6vw,2.75rem);--s-disp:clamp(2.125rem,1rem + 5vw,5.75rem);--ease:cubic-bezier(.16,1,.3,1);
--disp:"Stack Sans Headline",ui-sans-serif,system-ui,sans-serif;--text:"Stack Sans Text",ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:var(--s-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;display:flex;flex-direction:column;min-height:100svh}
main{flex:1 0 auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}::selection{background:var(--accent);color:var(--on-accent)}
h1,h2,h3,p,ul,dl,dd,figure{margin:0;padding:0}
.nw{white-space:nowrap}ul{list-style:none}
h1{font-family:var(--disp);font-weight:300;font-size:var(--s-disp);letter-spacing:-.022em;line-height:1.05}
h2{font-family:var(--disp);font-weight:300;font-size:var(--s-lead);letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
.col{width:var(--col);margin-left:var(--left)}
.tl{font-weight:500}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:500;padding:.7em 1.25em;transition:background .2s,transform .2s var(--ease)}
.btn:hover{background:var(--ink)}.btn:active{transform:scale(.97)}
/* bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;padding:16px var(--edge);background:var(--bg)}
.mark{font-weight:500;text-decoration:none;margin-right:auto}
.bar nav{display:flex;gap:28px}.bar nav a{text-decoration:none;font-size:var(--s-small)}.bar nav a:hover{text-decoration:underline}
.act{background:var(--ink);color:var(--bg);text-decoration:none;font-size:var(--s-small);font-weight:500;padding:.55em 1em;transition:background .2s}.act:hover{background:var(--accent)}
.foot{display:flex;justify-content:space-between;gap:24px;padding:28px var(--edge);background:var(--field);color:var(--field-muted);font-size:var(--s-small)}
/* hero: the column, with the likeness cropped by the top-right corner */
.hero{position:relative;min-height:min(calc(100svh - 64px),860px);padding-top:calc(min(36vw,560px) * .5625 + 72px);padding-bottom:96px}
.like{position:absolute;top:0;right:0;width:min(36vw,560px);color:var(--muted)}
.hero-char{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--accent)}
.hero-char canvas,.char-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-char.is-ready .char-still{opacity:0}
.hero.has-hs{display:grid;grid-template-columns:minmax(0,620px) auto;justify-content:space-between;align-items:center;gap:48px;padding:48px var(--edge) 96px}
.has-hs .hero-c{grid-column:1;grid-row:1;margin-left:0;width:auto}
.like.hs{position:static;grid-column:2;grid-row:1;width:clamp(300px,28vw,460px)}.like.hs img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.like-n{margin-top:10px;font-size:var(--s-small);padding-right:var(--m)}
.coarse{display:none}@media (pointer:coarse){.fine{display:none}.coarse{display:block}}
.hero h1{max-width:11ch}
.sub{margin-top:36px;max-width:52ch;font-size:max(18px,var(--s-body))}
.cta{display:flex;align-items:center;gap:28px;margin-top:36px}
/* showcase: the monitor lifted, its parts beside it (a grid, not a sideways run: the page never scrolls sideways) */
.show{padding:160px var(--edge) 0}
.show-l{width:var(--col);margin-left:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.show-l h2{font-size:var(--s-head);width:100%}
.show-n{width:100%;max-width:52ch;color:var(--muted);font-size:var(--s-small)}.show-n:first-of-type{margin-top:12px}
.run{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr) minmax(0,1fr);grid-auto-rows:1fr;gap:8px;margin-top:56px}
.fr{display:flex;flex-direction:column;min-width:0}.lift{grid-row:span 2}
.fr-in{flex:1;display:flex;min-height:0}.fr-in>.ui{flex:1;width:auto}
.fr figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-size:var(--s-small);color:var(--ink)}.fr figcaption span+span{color:var(--muted)}
/* the fragments */
.ui{background:var(--paper);color:var(--ink);border:1px solid rgba(24,23,21,.14);font-size:15px;line-height:1.45;overflow:hidden}
.ui code,.ui pre{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13.5px}
.ui pre{margin:0;padding:18px 20px;white-space:pre-wrap;line-height:1.7}
.ui-set,.ui-chat{padding:18px 20px}
.ui-run{display:flex;flex-direction:column}
.ui-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(24,23,21,.12);background:var(--bg)}
.ui-bar p{font-weight:500;margin-right:auto}.dot{width:9px;height:9px;border-radius:50%;background:#3d8b4f}
.ui-btn{font:inherit;font-weight:500;background:var(--accent);color:var(--on-accent);border:0;padding:.4em .9em;cursor:pointer;transition:background .2s,transform .15s}
.ui-btn:hover{background:var(--ink)}.ui-btn:active{transform:scale(.96)}.ui-btn[disabled]{opacity:.5;cursor:wait}
.ui-log{color:var(--muted);border-bottom:1px solid rgba(24,23,21,.12)}
.ui-log .ok{color:var(--ink)}
.ui-post{padding:16px 18px 18px}.ui-title{font-weight:500;margin-bottom:12px}
.g{margin-top:12px}.gk{font-weight:500;display:flex;gap:8px;align-items:center}.gk span{font-size:13px;padding:0 7px;border-radius:9px;background:var(--surface)}
.g-new .gk span{background:var(--accent);color:var(--on-accent)}.g-resolved .gk span{background:#3d8b4f;color:#fff}
.g li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid rgba(24,23,21,.08)}.g li span{color:var(--muted);text-align:right}
.ui-foot{margin-top:14px;color:var(--muted);font-size:13.5px}
.ui-h{font-weight:500;margin-bottom:12px}
.ui-set li{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(24,23,21,.08)}
.ui-set i{width:34px;height:20px;border-radius:10px;background:#bdbcb5;position:relative}.ui-set i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.ui-set i.on{background:#3d8b4f}.ui-set i.on::after{left:17px}
.ui-note,.ui-read{margin-top:12px;color:var(--muted)}.ui-chat p+p{margin-top:8px}
/* stats */
.stats{display:grid;grid-template-columns:1fr auto;align-items:start;gap:48px;padding:200px var(--edge) 0 0}
.stats h2,.ledger h2,.list h2{font-size:var(--s-head);margin-bottom:40px}
.stats dl{display:grid;gap:28px}
.stats dl div{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:baseline}
.stats dt{text-align:right;font-family:var(--disp);font-size:var(--s-lead);font-variant-numeric:tabular-nums}
.stats dd{max-width:40ch}
.stats-p{width:min(36vw,520px);margin-top:96px}.cp img{width:100%;height:100%;object-fit:cover;object-position:48% 30%}
/* ledger */
.ledger{position:relative;display:grid;grid-template-columns:auto 1fr;margin-top:180px;padding:140px var(--edge) 140px 0;background:var(--surface)}
.rows a{display:grid;grid-template-columns:55% 1fr auto;gap:12px;align-items:baseline;min-height:44px;padding:10px 0;text-decoration:none;transition:color .15s}
.rows .k,.rows .y{font-size:var(--s-small)}.rows .k{color:var(--muted)}.rows .y{font-variant-numeric:tabular-nums}
.rows:hover a,.rows:focus-within a{color:var(--muted)}.rows a:hover,.rows a:focus-visible{color:var(--ink)}
.preview{align-self:center;padding-left:64px}
.pv{font-family:var(--disp);font-size:var(--s-lead);line-height:1.2;letter-spacing:-.015em;max-width:18ch;min-height:3.6em}
.pk{margin-top:20px;color:var(--muted);font-size:var(--s-small);max-width:32ch}
/* gallery: the page's one rest, photographs gathered round a heading */
.gal{position:relative;height:max(88svh,700px);margin-top:160px}
.gal-c{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(580px,calc(100% - 2 * var(--m)));text-align:center}
.gal-c h2{font-size:var(--s-head)}.gal-c p{margin-top:16px}
.sc{position:absolute;width:clamp(140px,15vw,230px);aspect-ratio:9/10;overflow:hidden}.sc img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.s0{left:17%;top:0}.s1{left:70%;top:6%}.s2{left:27%;top:74%}.s3{left:64%;top:70%}.s4{left:42%;top:2%}.s5{left:73%;top:40%}.s6{left:20%;top:38%}.s7{left:47%;top:82%}
/* list */
/* about: the letter and the record side by side */
.about{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:0 96px;padding:160px var(--edge) 120px}
.letter{grid-column:1}.list{grid-column:2;justify-self:end;width:100%;max-width:480px;padding-top:72px}
.list ul{margin-bottom:40px}.list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:36px;padding:6px 0}
.list li a,.nm{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0}.list li>span:last-child{font-size:var(--s-small);color:var(--muted);white-space:nowrap}
.lg{color:var(--muted);margin-bottom:6px}
.d{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--ink);align-self:center}.d.a{background:var(--accent)}
/* letter */
.av{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:48% 30%;background:var(--accent);display:block}
.letter h2{margin:28px 0 20px;font-size:var(--s-head)}
.letter p+p{margin-top:1em}.letter p{max-width:52ch;line-height:1.55}
.sig{font-family:var(--disp);font-size:var(--s-lead);margin-top:1.6em!important}.role{margin-top:4px!important;color:var(--muted);font-size:var(--s-small)}
/* contact */
.contact{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;align-items:start;padding:160px var(--edge) 120px;background:var(--field);color:var(--field-ink)}
.say{grid-column:1/7;font-size:var(--s-head);line-height:1.1}
.cp{grid-column:8/10;aspect-ratio:1;overflow:hidden;background:var(--accent)}
.cpw{grid-column:8/10}.cpw .cp{aspect-ratio:1}.cpw .like-n{color:var(--field-muted);padding-right:0}.cp .hero-char{aspect-ratio:1;width:100%;height:100%}
.cl{grid-column:10/13;display:flex;flex-direction:column;gap:10px}.cl .q{font-weight:500;margin-bottom:10px}.cl a{font-size:var(--s-body);overflow-wrap:anywhere}
.city{margin-top:8px;color:var(--field-muted);font-size:var(--s-small)}
.contact a:hover{color:#fff}
/* case study */
.cs{padding:120px 0 0}
/* an article reads down a centred column; its figures centre under it */
.cs .col{width:min(var(--cw),100% - 2 * var(--m));margin-left:auto;margin-right:auto}
.cs .pair{width:min(960px,100% - 2 * var(--m));max-width:none;margin:72px auto 0}
.cs .wide{--w:min(960px,calc(100vw - 2 * var(--m)));width:var(--w);margin-left:calc((100% - var(--w)) / 2)}
/* a title holds to two lines: it runs from the column's start to the frame's edge, and a long one sets smaller
   (--n is its length in characters; Stack Sans Headline runs about .48em a character, 1.85 leaves room for the break) */
.cs-h h1{--hw:min((100vw + var(--cw)) / 2 - var(--edge),100vw - 2 * var(--m));width:var(--hw);font-size:min(var(--s-disp),var(--hw) * 1.85 / (var(--n) * .48))}.meta{margin-top:20px;color:var(--muted)}
.pair{margin:72px var(--edge) 0 var(--left);max-width:960px}
.xf{position:relative;aspect-ratio:1440/690;overflow:hidden;background:var(--paper)}
.xf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.xf .x1{opacity:0;transition:opacity 1.6s ease}.xf.on .x1{opacity:1}
figcaption{font-size:var(--s-small);color:var(--muted);margin-top:12px;max-width:64ch}
.prose{margin-top:96px}
.prose h2{font-size:var(--s-head);margin:96px 0 24px}
.prose p,.prose li{max-width:62ch}.prose p+p{margin-top:1em}
.prose .lede{font-size:var(--s-lead);line-height:1.35;font-family:var(--disp)}
.prose .numbers{margin-top:48px;background:var(--surface);padding:28px 32px}.prose .numbers li+li{margin-top:14px}
.prose .numbers li{list-style:none}
.prose ul:not(.rowsl) li{margin-top:.5em}
.prose>ul:not(.rowsl),.prose ol{margin-top:1em;padding-left:1.25em}.prose>ul:not(.rowsl){list-style:disc}.prose ol li{margin-top:.75em;padding-left:.25em}
.prose .callout{margin-top:40px;padding:18px 24px;background:var(--surface);border-left:2px solid var(--accent);max-width:62ch}
.prose .proofp{margin-top:96px;padding:40px 40px 28px;background:var(--surface)}.prose .proofp h2{margin:0 0 16px}
.prose>figure:not([class]){margin:48px 0;background:var(--surface);padding:28px 32px}.prose>figure:not([class])>figcaption{margin:0;font-size:var(--s-body);color:var(--ink);max-width:62ch}
.prose .frag{margin:48px 0}.prose .frag .ui{width:auto}
.agrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-auto-rows:1fr;gap:8px}.agrid .lift{grid-row:span 2}.agents>figcaption{margin-top:16px}
.prose code{font:inherit;background:var(--surface);padding:.05em .3em}
.ar{display:inline-block;width:.9em;height:.9em;vertical-align:-.08em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wide{margin:48px 0;width:min(900px,calc(100vw - var(--left) - var(--edge)))}.wide img{display:block;width:100%;height:auto;background:var(--paper)}
.pf{font-size:var(--s-small);color:var(--muted);white-space:nowrap}
.pf::before{content:"("}.pf::after{content:")"}
.rowsl li{display:flex;gap:16px;align-items:baseline;padding:10px 0;max-width:62ch}.rowsl .pf{flex:0 0 96px}.rowsl .pt{flex:1;min-width:0}
.prose .note{margin-top:72px;color:var(--muted);font-size:var(--s-small)}
.tline li{display:grid;grid-template-columns:172px minmax(0,1fr);gap:6px 32px;padding:0;max-width:none}.tline li+li{margin-top:40px}
.tline .when{font-size:var(--s-small);color:var(--muted);font-variant-numeric:tabular-nums;padding-top:.35em;white-space:nowrap}
.tline .r{font-family:var(--disp);font-size:var(--s-lead);line-height:1.2}.tline .w{grid-column:2;max-width:56ch}
.ab-hs{width:min(320px,70%);margin:40px 0 0}.ab-hs img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.kv li{max-width:none}.kv .k{flex:0 0 96px;font-size:var(--s-small);color:var(--muted)}.kv a{overflow-wrap:anywhere}
.proofp .pn-n{margin-top:20px;font-size:var(--s-small);color:var(--muted)}
.gal-n{margin-top:12px!important;font-size:var(--s-small);color:var(--muted)}
.nf-l{margin-top:56px}.nf-l .rows a{grid-template-columns:1fr auto}.nf-l .k{display:none}
@media (min-width:1001px){.cs .ab-h{--hw:calc((100vw + var(--cw)) / 2 - var(--edge));width:var(--hw);margin-left:calc((100vw - var(--cw)) / 2);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end}
 .cs .ab-h h1{width:auto}.ab-h .ab-hs{margin:0;width:clamp(240px,22vw,340px)}}
.pn{display:grid;grid-template-columns:1fr 1fr;margin-top:160px;background:var(--surface)}
.pn a{display:flex;flex-direction:column;gap:10px;padding:56px var(--edge);text-decoration:none;font-family:var(--disp);font-size:var(--s-lead);line-height:1.15;transition:background .2s}
.pn a+a{text-align:right;align-items:flex-end}.pn a:hover{background:var(--ink);color:var(--bg)}
.pn span{font-size:var(--s-small);opacity:.7}.pn b{font-weight:inherit}
/* wide screens (1680px and up): a wider frame, a wider reading column and one step up in type, so a 1920 screen is not
   a 1200px page floating in empty ground */
@media (min-width:1680px){
 :root{--edge:calc((100vw - 1400px) / 2);--cw:760px;--s-body:1.25rem;--s-disp:6.5rem}
 .hero.has-hs{grid-template-columns:minmax(0,720px) auto}.like.hs{width:560px}
 /* the hero sizes to its content, so the agent demo starts on the first screen instead of below an empty band */
 .hero,.hero.has-hs{min-height:0}.show{padding-top:120px}
 /* the case index takes the wide column so its preview sits in the right half, not stranded mid-page */
 .ledger .col{width:var(--cw)}.preview{padding-left:120px}.pv{font-size:var(--s-head)}
}
@media (max-width:1000px){
 :root{--left:var(--m);--edge:var(--m)}
 .like{position:relative;width:auto;margin:0 0 0 var(--m)}.like-n{padding:0 var(--m) 0 0}
 .hero,.hero.has-hs{padding-top:48px}.hero.has-hs{display:block;padding:48px 0 40px}.has-hs .hero-c{margin-left:var(--m);width:var(--col)}.like.hs{position:relative;width:min(60%,340px);margin:0 0 0 var(--m)}.cpw{width:200px}.hero h1{width:auto;margin-top:40px}
 .stats{grid-template-columns:1fr}.stats-p{width:auto;margin:0 0 0 var(--m)}
 .run{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.lift{grid-column:1/-1;grid-row:auto}.show-l{margin-left:0}
 .about{grid-template-columns:1fr}.letter,.list{grid-column:1}.list{padding-top:96px;justify-self:stretch}
 .ledger{display:block}.preview{display:none}
 .contact{display:flex;flex-direction:column;gap:32px}.cp{width:120px}
 .pair{margin-left:var(--m)}.wide{width:auto}.agrid{grid-template-columns:1fr;grid-auto-rows:auto}.agrid .lift{grid-row:auto}
}
@media (max-width:600px){
 :root{--m:20px}
 .bar{gap:10px;padding:14px var(--m)}.mark{font-size:15px}.bar nav{gap:12px}.bar nav a,.act{font-size:14px}.act{padding:.45em .7em}
 .hero{min-height:0;padding-bottom:40px}.sub{margin-top:24px}.cta{flex-wrap:wrap;gap:16px}.cta .btn{width:100%;text-align:center}
 .show{padding-top:96px}.run{grid-template-columns:1fr}.ui pre{font-size:12.5px}
 .say{font-size:var(--s-lead)}.prose h2{font-size:var(--s-lead);margin-top:72px}
 .stats,.ledger,.about{padding-top:120px}.stats dl div{grid-template-columns:88px 1fr;gap:16px}
 .rows a{grid-template-columns:1fr auto;min-height:52px}.rows .k{grid-column:1/3;grid-row:2}
 .gal{height:auto;margin-top:120px;padding:0 var(--m);display:grid;grid-template-columns:1fr 1fr;gap:12px}
 .gal-c{position:static;transform:none;grid-column:1/-1;order:2;width:auto;margin:24px 0}.sc{position:static;width:auto}.s0,.s1{order:1}.s2,.s3,.s4,.s5,.s6,.s7{order:3}
 .list li{min-height:44px}
 .pn{grid-template-columns:1fr}.prose .proofp{padding:28px 20px 16px}.pn a+a{text-align:left;align-items:flex-start}
 .tline li{grid-template-columns:1fr}.tline .w{grid-column:1}.tline li+li{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}