: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}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;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)0;width:100%;max-width:var(--width);margin:0 auto;h1 { font-size: 1.272rem; font-weight: 700; line-height: 1.25em; margin: 0; color: black; } a { text-decoration: none; } a:link { color: black; } a:visited { color: black; } 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: 0.786rem; letter-spacing: 0.06em; text-transform: uppercase; a:hover { color: var(--highlight-colour); } } } .nav-bar { display: flex; flex-direction: row; align-items: center; gap: calc(var(--unit) * 4); } a.cta { background-color: black; border: 1px solid black; color: white; padding: calc(var(--unit) * 1) calc(var(--unit) * 1.5); cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 0.786rem; letter-spacing: 0.04em; text-transform: uppercase; transition: background-color 0.15s ease, border-color 0.15s ease; } a.cta:hover { background-color: var(--highlight-colour); border-color: var(--highlight-colour); }}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 { 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); } a.button + a.button { margin-left: calc(var(--unit) * 1.5); } .full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } 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); }}