@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{zoom:1.15;--nav-accent:#80eacf;--paper:#faf9f6;--ink:#252722;--muted:#777970;--line:#e3e3db;--accent:#6b7057}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}header{height:126px;padding:37px 55px;display:flex;align-items:flex-end;justify-content:space-between}.logo{font-weight:400;font-family:'Libre Caslon Display',Georgia,serif;font-size:54.05px;line-height:1;letter-spacing:-3px}.logo span{color:#f25481}.header-note{font-size:13.8px;color:var(--muted);letter-spacing:.04em}nav{position:fixed;left:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;padding:12px 7px;border:1px solid var(--line);border-radius:19px;background:#fffefa;box-shadow:0 5px 18px #292b2410;z-index:5}nav a{width:75px;min-height:66px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;border-radius:11px;transition:background .2s,color .2s;color:#6e7168}nav a:hover{background:#f1f1e9;color:var(--ink)}nav a[aria-current=page]{background:var(--nav-accent);color:#000}nav svg{height:23px;width:23px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}nav span{font-size:10.35px;font-weight:500}main{margin:9px 70px 100px clamp(185px,18.2vw,290px);max-width:930px;min-height:610px}.illustration{height:213px;position:relative;display:flex;align-items:center;gap:15px}#drawing{width:230px;height:205px;overflow:visible}#ink{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(59.8px,5.865vw,88.55px);font-weight:400;letter-spacing:-.045em;line-height:1.07;margin:15px 0 25px}h1 em{font-weight:400;color:#737961}p{margin:0}.eyebrow{font-size:11.5px;letter-spacing:.18em;font-weight:600;color:#797d70;margin-top:10px}.intro{font-size:18.4px;line-height:1.85;color:#55594e;max-width:680px}.body-copy{font-size:17.25px;line-height:1.85;margin-top:22px;color:#777b70}.text-link{display:inline-flex;gap:39px;align-items:center;margin-top:30px;font-size:14.95px;border-bottom:1px solid #a9ad9d;padding:0 0 9px}.text-link span{font-size:23px}.text-link:hover{color:var(--accent)}footer{margin:0 56px 27px clamp(185px,18.2vw,290px);display:flex;justify-content:space-between;color:#8b8e82;font-size:11.5px;letter-spacing:.04em}.draft-note{font-size:12.65px;line-height:1.5;color:#818573;margin-top:16px}.entries{max-width:790px;margin-top:28px}.entries article{display:flex;gap:25px;padding:24px 0;border-top:1px solid var(--line);align-items:baseline}.index{font-size:11.5px;color:#919586}.entries h2{font-family:'Libre Caslon Display',Georgia,serif;font-size:33.35px;letter-spacing:-.025em;font-weight:400;margin:0 0 7px}.entries p{font-size:14.95px;color:#757a6c;line-height:1.7;max-width:550px}.pending{font-size:11.5px;white-space:nowrap;margin-left:auto;color:#878c7c}.role{font-size:10.35px;letter-spacing:.13em;color:#888d7d;display:block;margin-bottom:8px}form{margin-top:27px;max-width:660px}label{display:flex;flex-direction:column;font-size:13.8px;gap:10px;flex:1}.form-row{display:flex;gap:23px;margin-bottom:22px}input,textarea{width:100%;border:0;border-bottom:1px solid #cfd2c5;border-radius:0;padding:10px 0;background:transparent;font:16.1px 'DM Sans',sans-serif;color:var(--ink);outline:none}input:focus,textarea:focus{border-color:var(--accent)}textarea{resize:vertical}::placeholder{color:#a4a697}.form-end{display:flex;align-items:center;gap:20px;margin-top:25px}.form-end button,.examples-button{background:var(--ink);color:var(--paper);border:0;border-radius:6px;padding:14px 18px;font:13.8px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}.form-end button span{margin-left:22px}.form-end p{font-size:11.5px;color:var(--muted)}output{display:block;font-size:14.95px;line-height:1.7;margin-top:20px;white-space:pre-wrap}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(min-width:1500px){main{margin-top:40px}.illustration{height:240px}}@media(max-width:760px){header{height:95px;padding:26px 24px}.logo{font-size:44.85px}.header-note{font-size:11.5px}nav{position:relative;left:auto;top:auto;transform:none;flex-direction:row;margin:0 24px;padding:8px 4px;border-radius:15px;gap:7px}nav a{width:auto;flex:1;min-width:0;min-height:60px}nav span{font-size:9.2px}nav svg{width:21px;height:21px}main{margin:5px 23px 65px 23px;min-height:650px}.illustration{height:182px;gap:0}#drawing{width:175px;height:170px}h1{font-size:55.2px;line-height:1.09;letter-spacing:-.043em;margin-top:19px}.eyebrow{font-size:9.2px;line-height:1.7;letter-spacing:.11em}.intro{font-size:16.1px;line-height:1.85}.body-copy{font-size:14.95px}.desktop{display:none}footer{margin:0 24px 24px 24px;font-size:10.35px}.entries article{gap:12px;flex-wrap:wrap}.entries article>div{flex:1;min-width:0}.entries h2{font-size:29.9px}.entries p{font-size:13.8px}.pending{width:100%;margin-left:25px}.form-row{flex-direction:column;gap:22px}.form-end{flex-direction:column;align-items:flex-start;gap:12px}.text-link{font-size:13.8px;gap:20px}}/* Keep the artwork beside the title, not above it. */
#content>.illustration[hidden]{display:none}#content[data-page="home"]>h1{grid-column:1 / -1;grid-row:1}
#content{display:grid;grid-template-columns:minmax(0,1fr) 230px;column-gap:24px;align-items:start}#content>*{grid-column:1 / -1}#content>h1{grid-column:1;grid-row:2}#content>.illustration{grid-column:2;grid-row:2;height:auto;align-self:center;justify-content:flex-end}#content .illustration #drawing{width:100%;height:auto;aspect-ratio:300 / 260}#content>.eyebrow{grid-row:1}#content>.text-link{justify-self:start}main{padding-top:45px}
@media(max-width:1100px){#content{grid-template-columns:minmax(0,1fr) 160px;column-gap:16px}}
@media(max-width:760px){main{padding-top:25px}#content{grid-template-columns:minmax(0,1fr) 72px;column-gap:8px}#content>.illustration{align-self:start;margin-top:24px}}
.examples-button{justify-self:start;display:inline-block;margin-top:30px;text-decoration:none}
@media(min-width:761px){.examples-button{font-size:15.18px;line-height:1.35;padding:15.4px 19.8px;border-radius:6.6px}}
.project-title{display:flex;align-items:center;gap:16px}.entries .project-title{margin-bottom:14px}.app-icon{display:block;width:64px;height:64px;flex:none;border-radius:16px;box-shadow:0 4px 10px #25272218}
.github-label{display:inline-flex;align-items:center;gap:7px;font-size:14.95px;color:var(--muted);padding-bottom:4px}.github-label svg{flex:none}
.project-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:14px}.project-links .text-link{margin-top:0;gap:12px;padding-bottom:4px}.project-links .pending{margin-left:0;width:auto}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Things: independent products on the left, organisation highlights on the right. */
.things-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:36px}
.column-heading{font:600 11.5px/1.7 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.things-columns .entries{margin-top:0;max-width:none}
.things-columns .entries article{gap:16px;align-items:start}
.things-columns .entries article>div{min-width:0;flex:1}
.things-columns .index{padding-top:26px}
.things-columns .entries h3{font-family:'Libre Caslon Display',Georgia,serif;font-size:33.35px;letter-spacing:-.025em;font-weight:400;margin:0 0 14px}
.things-columns .role{line-height:1.7;letter-spacing:.04em;margin-bottom:10px}
.org-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:16px 0 0}.org-tags li{max-width:100%;padding:5px 9px;border:0;border-radius:6px;background:var(--tag-bg);color:var(--tag-text);font-size:11.5px;line-height:1.5;font-weight:500}.tags-dogecoin{--tag-bg:#f5edcc;--tag-text:#695316;--tag-border:#dfcd8e}.tags-getsetup{--tag-bg:#ffebe3;--tag-text:#a33208;--tag-border:#ffc4ad}.tags-kpmg{--tag-bg:#e5ecfa;--tag-text:#00338d}[data-theme="dark"] .tags-kpmg{--tag-bg:#172b4d;--tag-text:#adc9ff}.tags-ynomia{--tag-bg:#e1e9f0;--tag-text:#1a2734}.tags-iflix{--tag-bg:#fbe5e6;--tag-text:#a02127;--tag-border:#edb7ba}[data-theme="dark"] .tags-dogecoin{--tag-bg:#39321d;--tag-text:#e4cd79;--tag-border:#66572a}[data-theme="dark"] .tags-getsetup{--tag-bg:#412a22;--tag-text:#ffa17e;--tag-border:#77432f}[data-theme="dark"] .tags-ynomia{--tag-bg:#1a2734;--tag-text:#b9d0e5}[data-theme="dark"] .tags-iflix{--tag-bg:#3e2528;--tag-text:#f2a0a5;--tag-border:#733b40}
.org-logo{width:64px;height:64px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid #e3e3db;border-radius:14px}
.org-logo img{display:block;width:52px;height:52px;object-fit:contain}
.things-columns .project-title{gap:14px}
@media(max-width:1050px){.things-columns{grid-template-columns:minmax(0,1fr);gap:34px}}
@media(max-width:760px){.things-columns{margin-top:28px}.things-columns .entries h3{font-size:29.9px}.things-columns .entries article{gap:12px}.column-heading{font-size:10.35px;letter-spacing:.08em}}

/* A little space between the crafted project and recent work. */
.recent-section{margin-top:34px}
@media(max-width:760px){.recent-section{margin-top:72px}}

/* Three original de-form wordmark frames, with a quiet intermittent glitch. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.deform-wordmark{position:relative;display:block;width:156px;height:49px;flex:none}
.deform-wordmark img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.deform-wordmark img:nth-child(2),.deform-wordmark img:nth-child(3){opacity:0}
.deform-wordmark img:nth-child(2){animation:deform-frame-three 12s steps(1,end) infinite}
.deform-wordmark img:nth-child(3){animation:deform-frame-two 12s steps(1,end) infinite}
@keyframes deform-frame-three{0%,94%{opacity:0}95%,96%{opacity:1}97%,100%{opacity:0}}
@keyframes deform-frame-two{0%,96%{opacity:0}97%,98%{opacity:1}99%,100%{opacity:0}}
[data-theme="dark"] .deform-wordmark img{filter:invert(1)}
@media(prefers-reduced-motion:reduce){.deform-wordmark img:nth-child(2),.deform-wordmark img:nth-child(3){animation:none}}