:root{--highlight-colour:#333399;--ink:#1a1a1a;--grey-700:#4a4a4a;--grey-400:#8a8a8a;--grey-200:#d8d8d8;--grey-100:#f3f3f3;--width:130ch;--prose-width:80ch;--unit:0.5rem;--section-gap:calc(var(--unit) * 7);--section-gap-lg:calc(var(--unit) * 14);--grid-gap:calc(var(--unit) * 8);font-size:18px}@media(max-width:700px){:root{--unit:0.35rem}}body{display:flex;flex-direction:column;font-family:inter,helvetica neue,Arial,sans-serif;margin:0;min-height:100vh;padding:0 calc(var(--unit) * 2)}header{position:sticky;top:0;z-index:10;background:#fff;margin-left:calc(-1 * var(--unit) * 2);margin-right:calc(-1 * var(--unit) * 2);width:calc(100% + var(--unit) * 4)}header .header-inner{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;flex-wrap:wrap;row-gap:calc(var(--unit) * 2);column-gap:calc(var(--unit) * 4);padding:calc(var(--unit) * 2.5)calc(var(--unit) * 2);max-width:var(--width);margin:0 auto}header h1{font-size:1.272rem;font-weight:700;line-height:1.25em;margin:0;color:#000}header a{text-decoration:none}header a:link{color:#000}header a:visited{color:#000}header nav ul{display:flex;flex-direction:row;justify-content:right;gap:calc(var(--unit) * 4);list-style:none;margin:0;padding:0;font-family:ibm plex mono,monospace;font-size:.786rem;letter-spacing:.06em;text-transform:uppercase}header nav ul a:hover{color:var(--highlight-colour)}header .nav-bar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:calc(var(--unit) * 4)}header a.cta{background-color:#000;border:1px solid #000;color:#fff;padding:calc(var(--unit) * 1)calc(var(--unit) * 1.5);cursor:pointer;font-family:ibm plex mono,monospace;font-size:.786rem;letter-spacing:.04em;text-transform:uppercase;transition:background-color .15s ease,border-color .15s ease}header a.cta:hover{background-color:var(--highlight-colour);border-color:var(--highlight-colour)}@media(max-width:700px){header a.cta{display:none}}main{flex:1;max-width:var(--width);width:100%;margin:0 auto;.page { max-width: var(--prose-width); } h1,h2,h3,h4,h5,h6 { margin-top: calc(var(--unit) * 3); margin-bottom: calc(var(--unit) * 1); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; line-height: 1.25em; } h1 { font-size: 4.236rem; line-height: 1.05; letter-spacing: -0.02em; margin-top: calc(var(--unit) * 6); } h2 { font-size: 2.618rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin-top: calc(var(--unit) * 5); padding-top: calc(var(--unit) * 3); a { text-decoration: none; } a:link { color: black; } a:visited { color: black; } a:hover { color: var(--highlight-colour); } } .row { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gap); align-items: start; margin-top: var(--section-gap-lg); } .home > h1 { margin-bottom: calc(var(--unit) * 2); } .row + .row { margin-top: var(--section-gap); } .row.row--bio { margin-top: calc(var(--unit) * 16); } .row > h2 { grid-column: 1; padding-top: 0; margin: 0; } .row > p { grid-column: 2 / span 2; margin: 0; } .row--bio img#portrait { grid-column: 1; grid-row: 1 / -1; } .row__copy { grid-column: 2 / span 2; } article.row > .row__copy { grid-row: 1; } article.row > img { grid-column: 1; grid-row: 1; width: 100%; height: auto; } article.row + article.row { margin-top: calc(var(--unit) * 12); } @media (max-width: 700px) { .row { grid-template-columns: 1fr; } .row > h2, .row > p, .row--bio img#portrait, .row__copy, article.row > img { grid-column: 1; } .row--bio img#portrait { grid-row: auto; } article.row > .row__copy { display: contents; } article.row > .row__copy > h2 { grid-column: 1; order: 1; } article.row > img { grid-row: auto; order: 2; } article.row > .row__copy > p, article.row > .row__copy > a { grid-column: 1; order: 3; } } .row__copy > h2 { margin-top: 0; padding-top: 0; } .capabilities { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gap); margin-top: var(--section-gap); } .capabilities + h2 { margin-top: var(--section-gap-lg); } @media (max-width: 900px) { .capabilities { grid-template-columns: 1fr; } .capability { padding-top: calc(var(--unit) * 3); } .capability:first-child { border-top: none; padding-top: 0; } } h3 { font-size: 1.618rem; line-height: 1.25; letter-spacing: -0.01em; margin-top: calc(var(--unit) * 4); } h4 { font-size: 1.272rem; } h5 { font-size: 1rem; } h6 { font-size: .786rem; } h7 { font-size: .618rem; } p { line-height: 1.5em; color: var(--grey-700); } p.lede { font-size: 1.272rem; line-height: 1.4; color: var(--grey-700); } p, li { font-family: 'Inter', sans-serif; color: var(--grey-700); } a:link { color: var(--highlight-colour); } a:visited { color: var(--highlight-colour); } a.button { display: inline-block; margin: 0 calc(var(--unit) * 1.5) calc(var(--unit) * 1.5) 0; background-color: black; border: 1px solid black; color: white; padding: calc(var(--unit) * 1) calc(var(--unit) * 1.5); border-radius: 0; cursor: pointer; text-decoration: none; font-family: "IBM Plex Mono", monospace; font-size: 0.786rem; letter-spacing: 0.04em; transition: background-color 0.15s ease, border-color 0.15s ease; &:hover { background-color: var(--highlight-colour); border-color: var(--highlight-colour); } } a.button.button--ghost { background-color: white; color: black; } a.button.button--ghost:hover { background-color: white; color: var(--highlight-colour); border-color: var(--highlight-colour); } img.lede { width: 100%; height: auto; margin-top: calc(var(--unit) * 1); } blockquote { background: var(--grey-100); border-left: calc(var(--unit) * 1) solid var(--grey-200); margin: 0; padding: calc(var(--unit) * 1); p { margin: calc(var(--unit) * 1); } } .home { img#portrait { width: 100%; height: auto; filter: grayscale(100%) contrast(1.15); } #wave { margin-top: calc(var(--unit) * 6); margin-bottom: calc(var(--unit) * 10); } }}footer{width:100%;max-width:var(--width);margin:calc(var(--unit) * 4)auto 0;padding-top:calc(var(--unit) * 3);p { color: var(--grey-400); font-family: "IBM Plex Mono", monospace; font-size: 0.786rem; letter-spacing: 0.02em; } a:link { color: var(--highlight-colour); } a:visited { color: var(--highlight-colour); }}