:root{
  --bg:#fbfaf8; --fg:#1c1c1a; --muted:#5f5f59; --line:#e2e0da;
  --card:#ffffff; --accent:#2f6b4f; --accent-soft:#eef3ef;
  --max:44rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141513; --fg:#eceae5; --muted:#a3a29b; --line:#2c2e2a;
    --card:#1c1e1b; --accent:#7fbf9c; --accent-soft:#1f2a24;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{text-decoration:none}

header.site{
  max-width:var(--max); margin:0 auto; padding:1.6rem 1.25rem 0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center;
}
header.site nav{display:flex; flex-wrap:wrap; gap:1.1rem; margin-left:auto}
@media(max-width:33rem){header.site nav{margin-left:0}}
header.site nav a{color:var(--muted); text-decoration:none; font-size:.94rem}
header.site nav a:hover,header.site nav a.on{color:var(--fg)}

main{max-width:var(--max); margin:0 auto; padding:2.6rem 1.25rem 4rem}
section{margin-bottom:3rem}
h1{font-size:2.05rem; line-height:1.18; letter-spacing:-.022em; margin:0 0 .9rem; font-weight:660}
h2{font-size:1.2rem; letter-spacing:-.012em; margin:2.4rem 0 .7rem; font-weight:640}
h3{font-size:1.02rem; margin:1.7rem 0 .35rem; font-weight:620}
p{margin:0 0 1rem}
.hero h1{font-size:2.5rem}
.lede{font-size:1.16rem; color:var(--muted); margin-bottom:1.4rem}
.meta{color:var(--muted); font-size:.9rem}
.crumb{font-size:.9rem; color:var(--muted); margin-bottom:.4rem}
.note{color:var(--muted); font-size:.92rem; font-style:italic}

.cards{display:grid; gap:.9rem; grid-template-columns:1fr}
@media(min-width:34rem){.cards{grid-template-columns:1fr 1fr}}
.card{
  display:block; padding:1.15rem 1.25rem; background:var(--card);
  border:1px solid var(--line); border-radius:11px; text-decoration:none; color:inherit;
}
.card:hover{border-color:var(--accent)}
.card h3{margin:0 0 .3rem; font-size:1.06rem; color:var(--accent)}
.card .tag{margin:0 0 .5rem; font-size:.96rem}
.card .meta{margin:0}

dl.principles{margin:0}
dl.principles dt{font-weight:620; margin-top:1.3rem}
dl.principles dd{margin:.25rem 0 0; color:var(--muted)}

blockquote{
  margin:0 0 1.2rem; padding:1rem 1.15rem; background:var(--accent-soft);
  border-radius:9px;
}
blockquote p:last-child{margin-bottom:0}

address{
  font-style:normal; color:var(--muted); line-height:1.55;
  margin:0 0 1rem; font-size:.95rem;
}
.cta{margin-top:2rem}
.cta a{
  display:inline-block; padding:.6rem 1.1rem; border:1px solid var(--accent);
  border-radius:8px; text-decoration:none; font-size:.96rem;
}
.cta a:hover{background:var(--accent-soft)}

footer.site{
  max-width:var(--max); margin:0 auto; padding:2rem 1.25rem 3.5rem;
  border-top:1px solid var(--line); color:var(--muted); font-size:.9rem;
}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--fg)}
footer.site .addr{line-height:1.5}
footer.site .fine{font-size:.84rem; margin-bottom:0}

.inflight{
  padding:1.1rem 1.25rem; background:var(--accent-soft);
  border-radius:11px; margin-top:4.5rem; margin-bottom:3rem;
}
.inflight h2{margin:0 0 .4rem; font-size:1.02rem}
.inflight p{margin:0; color:var(--muted); font-size:.96rem}

.wordmark{display:inline-flex; align-items:center; text-decoration:none; line-height:0}
.wordmark img{display:block; height:28px; width:auto}
.logoshow{display:block; height:110px; width:auto; margin:.3rem 0 1.5rem}

ul.assets{margin:0 0 1rem; padding-left:1.1rem}
ul.assets li{margin-bottom:.5rem}
ul.assets strong{font-weight:620}
code{font-size:.92em; background:var(--accent-soft); padding:.1em .35em; border-radius:4px}

.appicon{
  display:block; width:112px; height:112px; border-radius:24px;
  margin:0 0 1.1rem; box-shadow:0 1px 3px rgba(0,0,0,.12);
}

.card .cardicon{
  display:block; width:40px; height:40px; border-radius:9px;
  margin:0 0 .7rem; box-shadow:0 1px 2px rgba(0,0,0,.10);
}
.card.ghost{background:transparent; border-style:dashed}
.card.ghost:hover{border-color:var(--line)}
.card.ghost h3{color:var(--muted)}
.card.ghost .tag{color:var(--muted)}
.ghosticon{background:var(--accent-soft); border:1px dashed var(--line); box-shadow:none}