@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');


:root {
    color-scheme:light;
    --paper:#f8f9f5;
    --ink:#202b25;
    --muted:#657067;
    --green:#284d3c;
    --line:#dce1d9;
    --font-sans:'DM Sans',sans-serif
}

* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:32px
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-sans);
    font-size:16px;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
button,a {
    -webkit-tap-highlight-color:transparent
}
a:focus-visible {
    outline:3px solid #4e825b;
    outline-offset:6px
}
::selection {
    background:#d4e5c9
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    font-weight:500
}
p {
    line-height:1.7
}
a {
    transition:color .2s,background .2s,transform .2s
}
.shell {
    max-width:1200px;
    padding-inline:48px;
    margin-inline:auto
}
.site-header {
    height:112px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.wordmark {
    font-size:27px;
    font-weight:700;
    letter-spacing:-1.3px
}
.wordmark span {
    color:#618153
}
nav {
    display:flex;
    align-items:center;
    gap:32px;
    font-size:13px;
    font-weight:500
}
nav a:hover,.text-link:hover {
    color:#518150
}
.nav-contact {
    margin-left:16px;
    display:inline-flex;
    align-items:center;
    min-height:44px
}
.nav-contact span {
    margin-left:8px
}
.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    padding:12px 18px;
    background:var(--ink);
    color:white;
    z-index:10
}
.skip-link:focus {
    top:12px
}
.eyebrow,.project-category,.hero-footnote,.art-caption,.resource-number {
    font-family:Consolas,'Courier New',monospace;
    font-size:10px;
    font-weight:400;
    letter-spacing:1.4px
}
.eyebrow {
    display:block;
    color:var(--muted)
}
.hero {
    padding-top:87px
}
.hero>.eyebrow {
    display:flex;
    align-items:center;
    gap:10px
}
.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#618153;
    box-shadow:0 0 0 4px #6181530c
}
h1 {
    font-size:clamp(58px,7.5vw,94px);
    line-height:1.06;
    letter-spacing:-6px;
    margin-top:31px
}
h1>span {
    color:#768473
}
.hero-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:38px;
    gap:48px
}
.hero-description {
    max-width:475px;
    font-size:18px;
    color:var(--muted);
    line-height:1.7
}
.primary-link {
    display:inline-flex;
    justify-content:space-between;
    align-items:center;
    gap:42px;
    background:var(--green);
    color:#fff;
    padding:17px 22px;
    border-radius:5px;
    font-size:13px;
    white-space:nowrap
}
.primary-link:hover {
    background:#39634b;
    transform:translateY(-2px)
}
.hero-footnote {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    padding:62px 0 22px;
    color:var(--muted);
    font-size:9px;
    letter-spacing:1px
}
.hero-footnote>span:first-child {
    font-family:var(--font-sans);
    letter-spacing:0;
    font-size:12px
}
.work-section {
    padding-top:76px
}
.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:35px
}
h2 {
    font-size:40px;
    letter-spacing:-1.9px;
    line-height:1.18;
    margin-top:21px
}
.section-heading>p {
    color:var(--muted);
    font-size:13px;
    padding-bottom:3px
}
.project {
    display:block;
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden;
    transition:border-color .2s,box-shadow .2s
}
.project:hover {
    border-color:#91a08f;
    box-shadow:0 8px 28px #263b2510
}
.project-featured {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:344px;
    background:#eaf0e5
}
.project-copy {
    padding:38px
}
.project-category {
    font-size:9px;
    letter-spacing:1.1px;
    color:#596d56
}
.project h3 {
    font-size:33px;
    letter-spacing:-1.3px
}
.project-copy h3 {
    margin-top:44px;
    display:flex;
    align-items:center;
    gap:14px
}
.project-copy h3 span {
    font-size:23px;
    font-weight:400;
    color:#7b8c74
}
.project-copy>p {
    font-size:15px;
    margin-top:7px
}
.project .project-detail {
    font-size:13px;
    line-height:1.7;
    color:#667361;
    margin-top:10px;
    max-width:340px
}
.project-cta {
    display:inline-flex;
    gap:25px;
    margin-top:30px;
    font-size:11px;
    font-weight:600
}
.featured-art {
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:340px;
    background:radial-gradient(ellipse at center,#cbdcbc80,transparent 70%)
}
.art-caption {
    position:absolute;
    bottom:25px;
    color:#6b8061;
    font-size:8px;
    letter-spacing:1.4px
}
.project-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-top:22px
}
.project-quark {
    background:#eeede8
}
.project-flywheel {
    background:#e9edf0
}
.small-project-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 30px
}
.small-project-top>span:last-child {
    font-size:20px;
    color:#718078
}
.small-project-copy {
    padding:0 30px 31px
}
.small-project-copy h3 {
    font-size:27px
}
.small-project-copy>p {
    font-size:14px;
    margin-top:6px
}
.quark-art {
    width:126px;
    height:126px;
    margin:16px auto 40px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    transform:rotate(-12deg)
}
.quark-art span {
    border-radius:10px;
    background:#c4c4b5;
    box-shadow:inset 0 0 0 1px #3646300c
}
.quark-art span:nth-child(2) {
    background:#788575;
    border-radius:10px 30px 10px 10px
}
.quark-art span:nth-child(3) {
    background:#d7d7cb
}
.quark-art span:nth-child(4) {
    background:#3e5542;
    border-radius:10px 10px 30px 10px
}
.flywheel-art {
    position:relative;
    width:126px;
    height:126px;
    margin:16px auto 40px;
    display:flex;
    align-items:center;
    justify-content:center
}
.flywheel-art span {
    position:absolute;
    border:14px solid #7b8e99;
    border-right-color:#c0cbd0;
    border-radius:50%;
    width:126px;
    height:126px;
    transform:rotate(-35deg)
}
.flywheel-art span:nth-child(2) {
    width:84px;
    height:84px;
    border-width:10px;
    border-color:#a4b3ba;
    border-bottom-color:#d1dadd;
    transform:rotate(-20deg)
}
.flywheel-art span:nth-child(3) {
    width:43px;
    height:43px;
    border-width:8px;
    border-color:#425f6d;
    border-left-color:#93a7b2
}
.flywheel-art i {
    height:7px;
    width:7px;
    background:#425f6d;
    border-radius:50%
}
.open-source-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    padding:100px 0 90px;
    border-bottom:1px solid var(--line)
}
.open-source-section>div>p {
    font-size:14px;
    color:var(--muted);
    margin-top:23px;
    max-width:380px
}
.text-link {
    font-size:12px;
    font-weight:600;
    display:inline-flex;
    gap:30px;
    margin-top:24px
}
.resource-list {
    align-self:center
}
.resource-list>a {
    display:flex;
    align-items:center;
    gap:20px;
    border-bottom:1px solid var(--line);
    padding:25px 0
}
.resource-list>a:first-child {
    border-top:1px solid var(--line)
}
.resource-number {
    color:#8d9888;
    font-size:10px
}
.resource-list h3 {
    font-size:15px;
    letter-spacing:-.2px
}
.resource-list p {
    font-size:12px;
    color:var(--muted);
    margin-top:4px
}
.resource-list>a>span:last-child {
    margin-left:auto;
    font-size:20px;
    color:#7d8b78
}
.resource-list>a:hover {
    color:#537445
}
.about-section {
    padding:88px 0 90px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px
}
.about-copy>.about-intro {
    font-size:22px;
    line-height:1.5;
    letter-spacing:-.4px;
    color:var(--ink)
}
.about-copy>p {
    font-size:14px;
    color:var(--muted);
    margin-top:18px
}
.about-copy>p:first-child {
    margin-top:0
}
.principles {
    margin-top:32px;
    display:grid;
    gap:25px
}
.principles h3 {
    font-size:14px;
    font-weight:550
}
.principles p {
    font-size:13px;
    color:var(--muted);
    margin-top:5px
}
.closing {
    background:#eaf0e5;
    border-radius:8px;
    padding:40px;
    margin-bottom:75px
}
.closing h2 {
    font-size:44px;
    margin-top:15px
}
.closing>div {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
.closing p {
    font-size:14px;
    color:var(--muted);
    margin-top:16px
}
.site-footer {
    min-height:110px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line)
}
.site-footer .wordmark {
    font-size:22px
}
.footer-github {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    font-size:13px;
    font-weight:500
}
.footer-github:hover { color:#518150; }
.site-footer>span {
    font-size:10px;
    color:var(--muted)
}

@media(min-width:1500px) {
    .hero {
    padding-top:110px
}

}

@media(max-width:800px) {
    .shell {
    padding-inline:28px
}
.site-header {
    height:90px
}
nav {
    gap:20px
}
.nav-contact {
    margin-left:0
}
.hero {
    padding-top:65px
}
h1 {
    letter-spacing:-3.8px;
    font-size:72px
}
.hero-bottom {
    gap:24px
}
.hero-description {
    font-size:16px;
    max-width:370px
}
.primary-link {
    gap:22px
}
.section-heading>p {
    max-width:215px
}
h2 {
    font-size:33px
}
.project-copy {
    padding:28px
}
.project-copy h3 {
    margin-top:35px
}
.small-project-top {
    padding:22px
}
.small-project-copy {
    padding:0 22px 27px
}
.project-category {
    font-size:8px
}
.open-source-section,.about-section {
    gap:40px
}
.site-footer>span:nth-child(2) {
    display:none
}

}

@media(max-width:560px) {
    .shell {
    padding-inline:22px
}
.site-header {
    height:85px;
    align-items:center
}
.wordmark {
    font-size:24px
}
nav {
    gap:16px;
    font-size:11px
}
.hero {
    padding-top:48px
}
.hero .eyebrow {
    font-size:8px;
    letter-spacing:1px
}
h1 {
    font-size:53px;
    letter-spacing:-3px;
    line-height:1.1;
    margin-top:27px
}
.hero-bottom {
    display:block;
    margin-top:26px
}
.hero-description {
    font-size:16px;
    max-width:330px
}
.hero-bottom .primary-link {
    margin-top:26px
}
.hero-footnote {
    padding-top:43px
}
.hero-footnote>span:last-child {
    display:none
}
.work-section {
    padding-top:48px
}
.section-heading {
    display:block;
    margin-bottom:26px
}
h2 {
    font-size:32px;
    letter-spacing:-1.4px
}
.section-heading>p {
    margin-top:20px;
    max-width:none
}
.project-featured {
    grid-template-columns:1fr
}
.project-copy {
    padding:27px
}
.project-copy h3 {
    margin-top:28px
}
.featured-art {
    min-height:245px;
    border-top:1px solid #dce5d5
}
.orbit-three {
    width:320px;
    height:320px
}
.art-caption {
    bottom:17px
}
.project-grid {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:18px
}
.small-project-top {
    padding:24px
}
.small-project-copy {
    padding:0 24px 28px
}
.project-category {
    font-size:9px
}
.quark-art,.flywheel-art {
    margin-top:10px;
    margin-bottom:32px
}
.open-source-section {
    grid-template-columns:1fr;
    gap:32px;
    padding:56px 0
}
.about-section {
    grid-template-columns:1fr;
    gap:28px;
    padding:55px 0
}
.about-copy>.about-intro {
    font-size:21px
}
.closing {
    padding:27px;
    margin-bottom:45px
}
.closing h2 {
    font-size:36px
}
.closing>div {
    display:block
}
.closing .primary-link {
    margin-top:24px
}
.site-footer {
    min-height:90px;
    flex-wrap:wrap;
    padding-block:18px;
    gap:4px 20px
}
.site-footer>span {
    font-size:9px;
    flex-basis:100%
}

}

@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto
}


a {
    transition:none
}
.primary-link:hover {
    transform:none
}

}




.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 36px;
    padding: 28px 0 64px;
}
.project-links .text-link { margin-top: 0; }
.writing-section { padding: 65px 0 70px; border-bottom: 1px solid var(--line); }
.intro { padding: 55px 0 52px; border-bottom: 1px solid var(--line); }
.intro h1 { font-size: clamp(36px, 4.5vw, 58px); line-height: 1.12; letter-spacing: -2.2px; margin: 0; }
.intro h1 span { color: #768473; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 28px; }
.intro-actions .text-link { margin: 0; }
.writing-title { font-size: 24px; line-height: 1.3; letter-spacing: -.6px; margin: 0; }
.writing-section .section-heading { margin-bottom: 18px; }
.writing-intro { color: var(--muted); font-size: 15px; max-width: 540px; }
.writing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; }
.article-feature { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 0 8px; border-top: 1px solid var(--line); }
.article-image { position: relative; width: 100%; height: 180px; margin-bottom: 24px; overflow: hidden; border-radius: 6px; background: #eeede8; }
.article-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-image-comic { background: #fff; border: 1px solid var(--line); padding: 12px 12px 28px; }
.article-image-comic img { object-fit: contain; }
.image-credit { position: absolute; bottom: 7px; right: 12px; font-size: 10px; color: var(--muted); }
.article-feature h3 { font-size: 27px; line-height: 1.3; letter-spacing: -.8px; margin: 22px 0 15px; max-width: 430px; }
.article-feature p { color: var(--muted); font-size: 14px; margin-bottom: 25px; }
.article-link { display: inline-flex; gap: 24px; font-size: 12px; font-weight: 600; margin-top: auto; }
.article-feature:hover h3 { color: #537445; }
.featured-art .quark-art { margin: 0; width: 154px; height: 154px; }
.project-librarian { background: #f0eae2; }
.librarian-art { height: 126px; width: 135px; display: flex; align-items: flex-end; gap: 8px; margin: 16px auto 40px; }
.librarian-art span { height: 110px; width: 36px; background: #a39780; border-radius: 5px; border-top: 12px solid #cfc4b1; border-bottom: 12px solid #cfc4b1; }
.librarian-art span:nth-child(2) { height: 126px; background: #675f4d; }
.librarian-art span:nth-child(3) { transform: rotate(-12deg); transform-origin: bottom; background: #b4aa96; }
@media(max-width: 560px) {
    .intro { padding: 32px 0 38px; }
    .intro h1 { letter-spacing: -1.2px; }
    .article-image { height: 150px; }
    .writing-section { padding: 45px 0; }
    .writing-grid { grid-template-columns: 1fr; gap: 24px; }
    .article-feature h3 { font-size: 25px; }
    .featured-art .quark-art { width: 126px; height: 126px; }
    .site-header nav { gap: 10px; }
}